@extends('layouts.app')
@section('title', 'Admin — Gestion Sociétés')
@section('page-title', 'Admin — Gestion Sociétés')

@push('styles')
<style>
    /* ── Layout 2 colonnes ── */
    .gs-layout { display:grid; grid-template-columns:320px 1fr; gap:20px; align-items:start; }

    /* ── Liste utilisateurs (gauche) ── */
    .gs-users { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
    .gs-users-header { background:#F4F6FB; padding:12px 16px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .gs-users-header span { font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
    .gs-search { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); }
    .gs-search input { border:1.5px solid var(--border); border-radius:7px; padding:5px 10px; font-size:12px; font-family:'Nunito',sans-serif; font-weight:600; outline:none; flex:1; }
    .gs-search input:focus { border-color:var(--yellow); }
    .user-list { max-height:calc(100vh - 260px); overflow-y:auto; }
    .user-list::-webkit-scrollbar { width:4px; }
    .user-list::-webkit-scrollbar-thumb { background:#CBD0DC; border-radius:2px; }
    .user-row { padding:11px 16px; cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.12s; display:flex; align-items:center; gap:10px; }
    .user-row:hover { background:#F0F4FF; }
    .user-row.active { background:#EEF2FF; border-left:3px solid var(--yellow); }
    .user-avatar { width:32px; height:32px; background:var(--yellow); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:var(--navy); flex-shrink:0; }
    .user-info { flex:1; min-width:0; }
    .user-name { font-size:13px; font-weight:800; color:var(--text); }
    .user-email { font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .soc-count { background:#EEF2FF; color:var(--navy); font-size:11px; font-weight:800; padding:2px 8px; border-radius:10px; flex-shrink:0; }
    .soc-count.zero { background:#FEF2F2; color:#E53E3E; }

    /* ── Panneau droite ── */
    .gs-right { display:flex; flex-direction:column; gap:16px; }

    /* ── Liste sociétés de l'utilisateur ── */
    .soc-list-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
    .soc-list-header { background:#F4F6FB; padding:12px 16px; border-bottom:1.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
    .soc-list-header span { font-size:11px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:.07em; }
    .soc-table { width:100%; border-collapse:collapse; }
    .soc-table thead th { background:#F4F6FB; padding:9px 14px; font-size:11px; font-weight:800; color:var(--text-muted); text-align:left; border-bottom:1.5px solid var(--border); }
    .soc-table tbody tr { border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.12s; }
    .soc-table tbody tr:hover { background:#F0F4FF; }
    .soc-table tbody tr.selected-row { background:#EEF2FF; }
    .soc-table tbody td { padding:10px 14px; font-size:13px; font-weight:600; color:var(--text); }
    .badge-active { background:#E6FFFA; color:#276749; font-size:11px; font-weight:800; padding:2px 8px; border-radius:4px; }
    .badge-inactive { background:#FFF0F0; color:#C53030; font-size:11px; font-weight:800; padding:2px 8px; border-radius:4px; }

    /* ── Fiche société ── */
    .fiche-card { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; }
    .fiche-header { background:linear-gradient(135deg,var(--navy),var(--navy-light)); color:#fff; padding:14px 20px; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:space-between; }
    .fiche-body { padding:20px; }
    .f-label { font-size:12px; font-weight:700; color:var(--text-muted); white-space:nowrap; }
    .f-input { border:1.5px solid var(--border); border-radius:7px; padding:6px 10px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--text); background:#fff; outline:none; transition:border-color 0.2s; width:100%; box-sizing:border-box; }
    .f-input:focus { border-color:var(--yellow); }
    .f-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 8px center; background-size:14px; padding-right:28px; }
    .frow { display:grid; gap:6px 12px; align-items:center; margin-bottom:10px; }
    .frow-1 { grid-template-columns:140px 1fr; }
    .frow-2 { grid-template-columns:140px 1fr 140px 1fr; }
    .s-title { font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; color:var(--navy); border-bottom:2px solid var(--yellow); padding-bottom:4px; margin-bottom:12px; }
    .fiche-actions { padding:14px 20px; border-top:1.5px solid var(--border); background:#F4F6FB; display:flex; gap:10px; align-items:center; }
    .btn-y { background:var(--yellow); color:var(--navy); border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-y:hover { background:var(--yellow-dark); }
    .btn-navy { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-navy:hover { background:var(--navy-light); }
    .btn-ghost { background:#fff; color:var(--text-muted); border:1.5px solid var(--border); border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; }
    .btn-ghost:hover { background:#F4F6FB; }
    .btn-danger { background:#fff; color:#E53E3E; border:1.5px solid #E53E3E; border-radius:20px; padding:7px 18px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
    .btn-danger:hover { background:#FFF5F5; }
    .alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
    .no-selection { padding:32px; text-align:center; color:var(--text-muted); font-size:13px; font-weight:600; }
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="gs-layout">

    {{-- ══ Colonne gauche : liste des utilisateurs ══ --}}
    <div class="gs-users">
        <div class="gs-users-header">
            <span>Utilisateurs</span>
            <span style="font-size:11px;font-weight:600;color:var(--text-muted);">{{ $users->count() }} compte(s)</span>
        </div>
        <div class="gs-search">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            <input type="text" id="userSearch" placeholder="Rechercher…" oninput="filterUsers()">
        </div>
        <div class="user-list" id="userList">
            @forelse($users as $u)
            <div class="user-row {{ ($selectedUser && $selectedUser->id == $u->id) ? 'active' : '' }}"
                 data-search="{{ strtolower($u->name.' '.$u->email) }}"
                 onclick="window.location='{{ route('admin.societes.index', ['user_id' => $u->id]) }}'">
                <div class="user-avatar">{{ strtoupper(substr($u->name, 0, 1)) }}</div>
                <div class="user-info">
                    <div class="user-name">{{ $u->name }}</div>
                    <div class="user-email">{{ $u->email }}</div>
                </div>
                <span class="soc-count {{ $u->societes_count === 0 ? 'zero' : '' }}">{{ $u->societes_count }}</span>
            </div>
            @empty
            <div class="no-selection">Aucun utilisateur</div>
            @endforelse
        </div>
    </div>

    {{-- ══ Colonne droite ══ --}}
    <div class="gs-right">

        @if(!$selectedUser)
        <div class="fiche-card">
            <div class="no-selection" style="padding:60px;">
                <svg viewBox="0 0 24 24" style="width:40px;height:40px;stroke:var(--border);fill:none;stroke-width:1.5;margin:0 auto 12px;display:block;"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
                Sélectionnez un utilisateur pour gérer ses sociétés
            </div>
        </div>

        @else

        {{-- Liste des sociétés de l'utilisateur --}}
        <div class="soc-list-card">
            <div class="soc-list-header">
                <span>Sociétés de {{ $selectedUser->name }}</span>
                <a href="{{ route('admin.societes.index', ['user_id' => $selectedUser->id, 'new' => 1]) }}"
                   class="btn-navy" style="padding:6px 16px;font-size:12px;text-decoration:none;">
                    <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Nouvelle société
                </a>
            </div>
            @if($societes->isEmpty())
            <div class="no-selection">Aucune société pour cet utilisateur — cliquez sur "Nouvelle société"</div>
            @else
            <table class="soc-table">
                <thead>
                    <tr>
                        <th>Nom de la société</th>
                        <th>SIRET</th>
                        <th>Ville</th>
                        <th>Statut</th>
                        <th style="width:80px; text-align:center;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($societes as $s)
                    <tr class="{{ ($societe && $societe->id == $s->id) ? 'selected-row' : '' }}"
                        onclick="window.location='{{ route('admin.societes.index', ['user_id' => $selectedUser->id, 'societe_id' => $s->id]) }}'">
                        <td style="font-weight:800;">{{ $s->nom }}</td>
                        <td style="font-family:monospace; font-size:12px;">{{ $s->siret ?? '—' }}</td>
                        <td>{{ $s->ville ?? '—' }}</td>
                        <td>
                            @if($s->statut === 'active')
                                <span class="badge-active">Active</span>
                            @else
                                <span class="badge-inactive">Inactive</span>
                            @endif
                        </td>
                        <td style="text-align:center;" onclick="event.stopPropagation()">
                            <form method="POST" action="{{ route('admin.societes.destroy', $s->id) }}" style="display:inline;"
                                  onsubmit="return confirm('Supprimer la société « {{ $s->nom }} » ?')">
                                @csrf @method('DELETE')
                                <button type="submit" style="background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:5px;transition:background 0.15s;" title="Supprimer">
                                    <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M9 6V4h6v2"/></svg>
                                </button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            @endif
        </div>

        {{-- Fiche société (nouveau ou modification) --}}
        <div class="fiche-card" id="ficheCard">
            <div class="fiche-header">
                <span>{{ $societe ? 'Modifier — '.$societe->nom : 'Nouvelle société pour '.$selectedUser->name }}</span>
            </div>
            <form method="POST"
                  action="{{ $societe ? route('admin.societes.update', $societe->id) : route('admin.societes.store') }}"
                  autocomplete="off">
                @csrf
                @if($societe) @method('PUT') @endif
                <input type="hidden" name="user_id" value="{{ $selectedUser->id }}">

                <div class="fiche-body">
                    <div class="s-title">Identification</div>
                    <div class="frow frow-2">
                        <label class="f-label">Nom de la société *</label>
                        <input type="text" name="nom" class="f-input" value="{{ $societe?->nom }}" required placeholder="Raison sociale">
                        <label class="f-label">SIRET</label>
                        <input type="text" name="siret" class="f-input" value="{{ $societe?->siret }}" placeholder="14 chiffres">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Téléphone</label>
                        <input type="tel" name="telephone" class="f-input" style="max-width:180px;" value="{{ $societe?->telephone }}">
                        <label class="f-label">Email</label>
                        <input type="email" name="email" class="f-input" value="{{ $societe?->email }}">
                    </div>

                    <div class="s-title" style="margin-top:14px;">Adresse</div>
                    <div class="frow frow-1">
                        <label class="f-label">Adresse 1</label>
                        <input type="text" name="adresse1" class="f-input" value="{{ $societe?->adresse1 }}">
                    </div>
                    <div class="frow frow-1">
                        <label class="f-label">Adresse 2</label>
                        <input type="text" name="adresse2" class="f-input" value="{{ $societe?->adresse2 }}">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Code postal</label>
                        <input type="text" name="code_postal" class="f-input" style="max-width:90px;" value="{{ $societe?->code_postal }}">
                        <label class="f-label">Ville</label>
                        <input type="text" name="ville" class="f-input" value="{{ $societe?->ville }}">
                    </div>

                    <div class="s-title" style="margin-top:14px;">Informations professionnelles</div>
                    <div class="frow frow-2">
                        <label class="f-label">No Agrément</label>
                        <input type="text" name="no_agree" class="f-input" value="{{ $societe?->no_agree }}">
                        <label class="f-label">Code NOÉMIE</label>
                        <input type="text" name="code_noemie" class="f-input" style="max-width:100px;" value="{{ $societe?->code_noemie }}">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">TVA Intracommunautaire</label>
                        <input type="text" name="tva_intracommunautaire" class="f-input" value="{{ $societe?->tva_intracommunautaire }}">
                        <label class="f-label">Fax</label>
                        <input type="tel" name="fax" class="f-input" style="max-width:180px;" value="{{ $societe?->fax }}">
                    </div>
                    <div class="frow frow-2">
                        <label class="f-label">Statut</label>
                        <select name="statut" class="f-input f-select" style="max-width:180px;">
                            <option value="active"   {{ ($societe?->statut ?? 'active') === 'active'   ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ ($societe?->statut) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                        <label class="f-label">Notes</label>
                        <input type="text" name="notes" class="f-input" value="{{ $societe?->notes }}">
                    </div>
                </div>

                <div class="fiche-actions">
                    <button type="submit" class="btn-y">
                        <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
                        Enregistrer
                    </button>
                    <a href="{{ route('admin.societes.index', ['user_id' => $selectedUser->id]) }}" class="btn-ghost" style="text-decoration:none;">Annuler</a>
                </div>
            </form>
        </div>

        @endif
    </div>{{-- fin gs-right --}}

</div>{{-- fin gs-layout --}}

@endsection

@push('scripts')
<script>
function filterUsers() {
    const q = document.getElementById('userSearch').value.toLowerCase();
    document.querySelectorAll('.user-row').forEach(r => {
        r.style.display = r.dataset.search.includes(q) ? '' : 'none';
    });
}
</script>
@endpush