@extends('layouts.app')
@section('title', 'Gestion clients')

@section('styles')
<style>
    .sa-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
    .sa-title { font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:600; color:#2D4A5F; }
    .sa-grid { display:grid; grid-template-columns:1fr 380px; gap:20px; align-items:start; }
    @media(max-width:900px) { .sa-grid { grid-template-columns:1fr; } }

    .card { background:white; border-radius:14px; border:1px solid #dde3e8; padding:24px; }
    .card-title { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:#2D4A5F; margin-bottom:16px; }

    .tenant-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #f0f2f4; }
    .tenant-row:last-child { border-bottom:none; }
    .tenant-avatar { width:40px; height:40px; border-radius:10px; flex-shrink:0; overflow:hidden; border:1px solid #dde3e8; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; color:#fff; letter-spacing:.03em; }
    .tenant-avatar img { width:100%; height:100%; object-fit:cover; }
    .tenant-info { flex:1; }
    .tenant-name { font-size:14px; font-weight:500; color:#1e2d3a; }
    .tenant-meta { font-size:11px; color:#6b7c8d; margin-top:2px; }
    .tenant-actions { display:flex; gap:6px; }

    .btn-xs { padding:5px 12px; border-radius:6px; font-size:11px; font-family:'Jost',sans-serif; font-weight:500; cursor:pointer; border:none; text-decoration:none; display:inline-flex; align-items:center; }
    .btn-login { background:#E1F5EE; color:#085041; }
    .btn-delete { background:#FCEBEB; color:#791F1F; }

    .form-group { margin-bottom:14px; }
    .form-label { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#6b7c8d; margin-bottom:5px; }
    .form-input { width:100%; padding:10px 12px; border:1px solid #dde3e8; border-radius:8px; font-size:13px; font-family:'Jost',sans-serif; color:#1e2d3a; outline:none; }
    .form-input:focus { border-color:#3a5f78; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
    .color-wrap { display:flex; align-items:center; gap:6px; }
    .color-dot { width:28px; height:28px; border-radius:6px; border:1px solid #dde3e8; flex-shrink:0; }

    .btn-save { width:100%; margin-top:16px; background:#2D4A5F; color:#C8B47A; border:none; border-radius:10px; padding:13px; font-size:13px; font-family:'Jost',sans-serif; font-weight:500; letter-spacing:.08em; cursor:pointer; }
    .btn-save:hover { background:#3a5f78; }

    .alert-success { background:#E1F5EE; border:1px solid #9FE1CB; border-radius:10px; padding:12px 16px; font-size:13px; color:#085041; margin-bottom:20px; }
    .alert-error { background:#FCEBEB; border:1px solid #f5c6c6; border-radius:10px; padding:12px 16px; font-size:13px; color:#c0392b; margin-bottom:20px; }

    .divider { border:none; border-top:1px solid #f0f2f4; margin:16px 0; }
</style>
@push('scripts')
<script>
function previewLogo(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = document.getElementById('logoPreview');
            img.src = e.target.result;
            img.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush
@endsection

@section('content')

@if(session('success'))
<div class="alert-success">✓ {{ session('success') }}</div>
@endif
@if(session('error'))
<div class="alert-error">⚠ {{ session('error') }}</div>
@endif
@if($errors->any())
<div class="alert-error">⚠ {{ $errors->first() }}</div>
@endif

<div class="sa-header">
    <div class="sa-title">👥 Gestion des clients</div>
    <span style="font-size:12px;color:#6b7c8d;">{{ $tenants->count() }} client(s)</span>
</div>

<div class="sa-grid">

    {{-- Liste des tenants --}}
    <div class="card">
        <div class="card-title">Clients actifs</div>
        @forelse($tenants as $tenant)
        <div class="tenant-row">
            <div class="tenant-avatar" style="background:{{ $tenant->couleur_principale }}">
                @if($tenant->logo)
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($tenant->logo) }}" alt="{{ $tenant->nom }}">
                @else
                    {{ strtoupper(substr($tenant->nom, 0, 2)) }}
                @endif
            </div>
            <div class="tenant-info">
                <div class="tenant-name">{{ $tenant->nom_app }} <span style="color:#6b7c8d;font-weight:400;">— {{ $tenant->nom }}</span></div>
                <div class="tenant-meta">{{ $tenant->users_count }} utilisateur(s) · {{ $tenant->slug }} · {{ $tenant->created_at->format('d/m/Y') }}</div>
            </div>
            <div class="tenant-actions">
                <a href="{{ route('superadmin.show', $tenant) }}" class="btn-xs" style="background:#EEF2F7;color:#2D4A5F;">Détail</a>
                <form method="POST" action="{{ route('superadmin.login-as', $tenant) }}" style="display:inline">
                    @csrf
                    <button type="submit" class="btn-xs btn-login" title="Se connecter en tant que ce client">👁 Voir</button>
                </form>
                <form method="POST" action="{{ route('superadmin.destroy', $tenant) }}" onsubmit="return confirm('Supprimer ce client et tous ses utilisateurs ?')" style="display:inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn-xs btn-delete">✕</button>
                </form>
            </div>
        </div>
        @empty
        <p style="color:#6b7c8d;font-size:13px;text-align:center;padding:20px;">Aucun client pour l'instant</p>
        @endforelse
    </div>

    {{-- Formulaire nouveau client --}}
    <div class="card">
        <div class="card-title">➕ Nouveau client</div>
        <form method="POST" action="{{ route('superadmin.store') }}" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label class="form-label">Logo (optionnel)</label>
                <input class="form-input" type="file" name="logo" accept="image/*" onchange="previewLogo(this)">
                <img id="logoPreview" src="" style="display:none;max-height:50px;margin-top:8px;border-radius:6px;">
            </div>
            <div class="form-group">
                <label class="form-label">Nom société</label>
                <input class="form-input" type="text" name="nom" placeholder="Ex : Restaurant Dupont" required>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label class="form-label">Nom de l'app</label>
                    <input class="form-input" type="text" name="nom_app" placeholder="Ex : TraçaDupont" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Slug</label>
                    <input class="form-input" type="text" name="slug" placeholder="Ex : dupont" required>
                </div>
            </div>

            <hr class="divider">

            <div class="form-group">
                <label class="form-label">Couleurs</label>
                <div class="form-row-3">
                    <div>
                        <div style="font-size:10px;color:#6b7c8d;margin-bottom:4px;">Principale</div>
                        <div class="color-wrap">
                            <div class="color-dot" id="dot1" style="background:#2D4A5F"></div>
                            <input class="form-input" type="text" name="couleur_principale" value="#2D4A5F" oninput="document.getElementById('dot1').style.background=this.value" required>
                        </div>
                    </div>
                    <div>
                        <div style="font-size:10px;color:#6b7c8d;margin-bottom:4px;">Accent</div>
                        <div class="color-wrap">
                            <div class="color-dot" id="dot2" style="background:#C8B47A"></div>
                            <input class="form-input" type="text" name="couleur_accent" value="#C8B47A" oninput="document.getElementById('dot2').style.background=this.value" required>
                        </div>
                    </div>
                    <div>
                        <div style="font-size:10px;color:#6b7c8d;margin-bottom:4px;">Fond</div>
                        <div class="color-wrap">
                            <div class="color-dot" id="dot3" style="background:#f7f2e8"></div>
                            <input class="form-input" type="text" name="couleur_accent_pale" value="#f7f2e8" oninput="document.getElementById('dot3').style.background=this.value" required>
                        </div>
                    </div>
                </div>
            </div>

            <hr class="divider">

            <div class="form-group">
                <label class="form-label">Nom administrateur</label>
                <input class="form-input" type="text" name="nom_admin" placeholder="Ex : Jean Dupont" required>
            </div>
            <div class="form-group">
                <label class="form-label">Email administrateur</label>
                <input class="form-input" type="email" name="email_admin" placeholder="jean@dupont.fr" required>
            </div>
            <div class="form-group">
                <label class="form-label">Mot de passe</label>
                <input class="form-input" type="password" name="password_admin" placeholder="Min. 8 caractères" required>
            </div>

            <button type="submit" class="btn-save">Créer le client</button>
        </form>
    </div>

</div>

@push('scripts')
<script>
function previewLogo(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = document.getElementById('logoPreview');
            img.src = e.target.result;
            img.style.display = 'block';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush
@endsection