@extends('layouts.app')

@section('title', 'Gestion du personnel')
@section('page-title', 'Gestion du personnel')

@section('content')
@php
$magasinsOptions = $magasins->map(fn($m) => ['value' => $m->id, 'label' => $m->nom])->values()->all();
@endphp

<script>
    window.__personnelData = @json($personnel);
    window.__personnelBaseUrl = @json(url('personnel'));

</script>
<script src="{{ asset('js/personnel.js') }}"></script>

<div x-data="personnelManager(__personnelData)" id="personnel-form">
    <x-page-card title="Liste du personnel" action="openModal()" actionLabel="Nouvel employé">
        <div class="overflow-x-auto -mx-4 sm:mx-0">
            <table class="min-w-full divide-y divide-slate-200">
                <thead>
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Nom</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Matricule</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Magasin</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Rôle</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Téléphone</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
                        <th class="px-4 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider w-24">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($personnel as $index => $u)
                    <tr class="hover:bg-slate-50/50 transition-colors">
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $u->name }}</td>
                        <td class="px-4 py-3 text-slate-600 font-mono text-sm">{{ $u->matricule ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->magasin?->nom ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->roles->first()?->name ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->telephone ?? '—' }}</td>
                        <td class="px-4 py-3">
                            @if($u->is_active)
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-emerald-100 text-emerald-800">Actif</span>
                            @else
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-slate-200 text-slate-700">Désactivé</span>
                            @endif
                        </td>
                        <td class="px-4 py-3">
                            <div class="flex items-center justify-end gap-1">
                                <button type="button" @click="openToggleModal({{ $index }})" class="p-2 rounded-lg {{ $u->is_active ? 'text-slate-500 hover:text-slate-700 hover:bg-slate-100' : 'text-emerald-600 hover:text-emerald-700 hover:bg-emerald-50' }} transition-colors" title="{{ $u->is_active ? 'Désactiver le compte' : 'Réactiver le compte' }}">
                                    @if($u->is_active)
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" /></svg>
                                    @else
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                    @endif
                                </button>
                                <x-action-buttons :editAction="'editPersonnel(' . $index . ')'" :deleteAction="'openDeleteModal(' . $index . ')'" />
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="px-4 py-8 text-center text-slate-500">Aucun employé.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($personnel->hasPages())
        <div class="mt-4 px-4">
            {{ $personnel->links() }}
        </div>
        @endif
    </x-page-card>

    <div x-show="showModal" x-cloak class="fixed inset-0 z-50 overflow-y-auto">
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="showModal" @click="showModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
            <div x-show="showModal" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" @click.stop class="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full overflow-hidden">
                <div class="px-6 py-5 border-b border-slate-100 bg-gradient-to-b from-slate-50 to-white">
                    <h3 class="text-lg font-semibold text-slate-800">
                        <span x-text="editingIndex === null ? 'Nouvel employé' : 'Modifier l\'employé'">Nouvel employé</span>
                    </h3>
                </div>

                <form :action="editingIndex !== null ? '{{ url('personnel') }}/' + (personnel[editingIndex].id) : '{{ route('personnel.store') }}'" method="POST" class="p-6 space-y-5" @submit="if(!$el.checkValidity()){ $el.reportValidity(); $event.preventDefault(); }">
                    @csrf
                    <template x-if="editingIndex !== null">
                        <input type="hidden" name="_method" value="PUT">
                    </template>

                    <input type="hidden" name="magasin_id" :value="form.magasin_id">

                    @if($errors->any())
                    <div class="p-3 rounded-lg bg-red-50 text-red-700 text-sm">
                        @foreach($errors->all() as $error)
                        <p>{{ $error }}</p>
                        @endforeach
                    </div>
                    @endif

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Nom complet" :required="true">
                            <input type="text" name="name" x-model="form.name" required class="form-input" placeholder="Ex: Kouassi Jean">
                        </x-form-group>
                        <x-form-group label="Email">
                            <input type="email" name="email" x-model="form.email" class="form-input" placeholder="ex: jean@domaine.com (optionnel)">
                        </x-form-group>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Téléphone" :required="true">
                            <input type="tel" name="telephone" x-model="form.telephone" required class="form-input" placeholder="+225 07 00 00 00 00">
                        </x-form-group>
                        <x-form-group label="Magasin d'affectation" :required="true">
                            <x-searchable-select form-id="personnel-form" model="magasin_id" required placeholder="Sélectionner un magasin" :options="$magasinsOptions" />
                        </x-form-group>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Rôle" :required="true">
                            <select name="role" x-model="form.role" required class="form-input">
                                <option value="">Choisir un rôle</option>
                                @foreach($roles as $r)
                                <option value="{{ $r }}">{{ $r }}</option>
                                @endforeach
                            </select>
                        </x-form-group>

                        <x-form-group label="Mot de passe" :required="true">
                            <input type="password" name="password" x-model="form.password" class="form-input" :required="editingIndex === null" :placeholder="editingIndex === null ? 'Définir un mot de passe' : 'Laisser vide pour ne pas modifier'">
                        </x-form-group>
                    </div>

                    <div class="flex gap-3 pt-2">
                        <button type="submit" class="form-btn-primary flex-1">Enregistrer</button>
                        <button type="button" @click="showModal = false" class="form-btn-secondary">Annuler</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <x-delete-modal>
        Êtes-vous sûr de vouloir supprimer « <span x-text="deleteLabel"></span> » ? Cette action est irréversible.
    </x-delete-modal>

    <div x-show="showToggleModal" x-cloak class="fixed inset-0 z-[60] overflow-y-auto" aria-labelledby="toggle-modal-title">
        <div class="flex min-h-screen items-center justify-center p-4">
            <div x-show="showToggleModal" @click="showToggleModal = false" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>
            <div x-show="showToggleModal" x-transition:enter="ease-out duration-200" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" class="relative bg-white rounded-2xl shadow-2xl max-w-lg w-full overflow-hidden">
                <div class="p-6">
                    <template x-if="toggleIsActive">
                        <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                        </div>
                    </template>
                    <template x-if="!toggleIsActive">
                        <div class="w-12 h-12 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-4">
                            <svg class="w-6 h-6 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                    </template>
                    <h3 class="text-lg font-semibold text-slate-800 text-center mb-2" id="toggle-modal-title" x-text="toggleIsActive ? 'Désactiver le compte' : 'Réactiver le compte'"></h3>
                    <p class="text-slate-600 text-center mb-6">
                        <span x-show="toggleIsActive">Êtes-vous sûr de vouloir désactiver le compte de « <span x-text="toggleLabel"></span> » ? L'employé n'aura plus accès à l'application.</span>
                        <span x-show="!toggleIsActive">Êtes-vous sûr de vouloir réactiver le compte de « <span x-text="toggleLabel"></span> » ?</span>
                    </p>
                    <div class="flex gap-3">
                        <template x-if="toggleIsActive">
                            <button type="button" @click="confirmToggleActive()" class="flex-1 px-4 py-2.5 bg-slate-600 hover:bg-slate-700 text-white font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg>
                                Désactiver
                            </button>
                        </template>
                        <template x-if="!toggleIsActive">
                            <button type="button" @click="confirmToggleActive()" class="flex-1 px-4 py-2.5 bg-emerald-600 hover:bg-emerald-700 text-white font-medium rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                Réactiver
                            </button>
                        </template>
                        <button type="button" @click="showToggleModal = false" class="px-4 py-2.5 border border-slate-300 hover:bg-slate-50 font-medium rounded-lg transition-colors">
                            Annuler
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection