@extends('layouts.app')
@section('title', 'Sélection société')
@section('page-title', 'Boite à outils — Société')

@push('styles')
<style>
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 28px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;transition:background 0.2s;}
    .btn-y:hover{background:var(--yellow-dark);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:background 0.15s;}
    .btn-ghost:hover{background:#F4F6FB;}

    .soc-outer { display:flex; justify-content:center; padding-top:60px; }
    .soc-wrap  { width:500px; flex-shrink:0; }
    .soc-title { text-align:center; font-size:14px; font-weight:800; color:var(--navy); padding:11px 16px; background:#E8EAF6; border:1.5px solid var(--border); border-radius:10px 10px 0 0; border-bottom:none; }
    .soc-header { background:#D0D3E8; padding:8px 14px; border:1.5px solid var(--border); border-bottom:none; }
    .soc-header span { font-size:12px; font-weight:800; color:var(--navy); }
    .soc-list { border:1.5px solid var(--border); border-radius:0 0 10px 10px; overflow:hidden; max-height:300px; overflow-y:auto; }
    .soc-list::-webkit-scrollbar { width:6px; }
    .soc-list::-webkit-scrollbar-thumb { background:#CBD0DC; border-radius:3px; }
    .soc-row { padding:10px 14px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; border-bottom:1px solid var(--border); transition:background 0.1s; display:flex; align-items:center; justify-content:space-between; }
    .soc-row:last-child { border-bottom:none; }
    .soc-row:nth-child(even) { background:#F4F6FB; }
    .soc-row:hover { background:#E8EEF8; }
    .soc-row.selected { background:var(--navy) !important; color:#fff; }
    .soc-row.selected .soc-check { opacity:1; }
    .soc-check { opacity:0; transition:opacity 0.15s; }
    .soc-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }

    /* Page d'attente */
    .wait-card { background:#fff; border-radius:16px; border:1px solid var(--border); padding:48px 40px; text-align:center; max-width:480px; margin:60px auto; }
    .wait-icon { width:64px; height:64px; background:#FFF3CD; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
    .wait-title { font-size:18px; font-weight:800; color:var(--navy); margin-bottom:10px; }
    .wait-text  { font-size:14px; font-weight:600; color:var(--text-muted); line-height:1.6; }
</style>
@endpush

@section('content')

@if($societes->count() === 0)

{{-- ── Aucune société : page d'attente ── --}}
<div class="wait-card">
    <div class="wait-icon">
        <svg viewBox="0 0 24 24" style="width:32px;height:32px;stroke:#C05621;fill:none;stroke-width:2;stroke-linecap:round;">
            <circle cx="12" cy="12" r="10"/>
            <line x1="12" y1="8" x2="12" y2="12"/>
            <line x1="12" y1="16" x2="12.01" y2="16"/>
        </svg>
    </div>
    <div class="wait-title">Compte en attente de configuration</div>
    <div class="wait-text">
        Votre compte n'a pas encore de société associée.<br>
        Veuillez contacter l'administrateur pour activer votre accès.
    </div>
    <div style="margin-top:28px;">
        <form method="POST" action="{{ route('logout') }}" style="display:inline;">
            @csrf
            <button type="submit" class="btn-ghost">Se déconnecter</button>
        </form>
    </div>
</div>

@else

{{-- ── Sélecteur de société ── --}}
<div class="soc-outer"><div class="soc-wrap">

    <form method="POST" action="{{ route('societe.select') }}">
    @csrf

    <div class="soc-title">Sélectionnez la société</div>
    <div class="soc-header"><span>Nom de la Société</span></div>

    <div class="soc-list" id="socList">
        @foreach($societes as $s)
        <div class="soc-row {{ ($currentSocieteId == $s->id || $loop->first && !$currentSocieteId) ? 'selected' : '' }}"
             data-id="{{ $s->id }}"
             onclick="selectSoc(this)">
            <span>{{ $s->nom }}</span>
            <svg class="soc-check" viewBox="0 0 24 24" style="width:16px;height:16px;stroke:#F5C518;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
        </div>
        @endforeach
    </div>

    <input type="hidden" name="societe_id" id="societe_id_input"
           value="{{ $currentSocieteId ?? $societes->first()->id }}">

    <div class="soc-actions">
        <button type="submit" class="btn-y">Valider</button>
        @if(session('societe_id'))
        <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
        @else
        <form method="POST" action="{{ route('logout') }}" style="display:inline;">
            @csrf
            <button type="submit" class="btn-ghost">Se déconnecter</button>
        </form>
        @endif
    </div>

    </form>

</div></div>

@endif

@endsection

@push('scripts')
<script>
function selectSoc(row) {
    document.querySelectorAll('.soc-row').forEach(r => r.classList.remove('selected'));
    row.classList.add('selected');
    document.getElementById('societe_id_input').value = row.dataset.id;
}
</script>
@endpush