@extends('layouts.app')

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

@section('content')
@php
$posteOptions = [
    ['value' => 'Gérant', 'label' => 'Gérant'],
    ['value' => 'Vendeur', 'label' => 'Vendeur'],
    ['value' => 'Caissier', 'label' => 'Caissier'],
    ['value' => 'Manutentionnaire', 'label' => 'Manutentionnaire'],
];
$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">Poste</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">Téléphone</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">{{ $u->poste ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->magasin?->nom ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->telephone ?? '—' }}</td>
                        <td class="px-4 py-3">
                            <x-action-buttons :editAction="'editPersonnel(' . $index . ')'" :deleteAction="'openDeleteModal(' . $index . ')'" />
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" 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="poste" :value="form.poste">
                    <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" :required="true">
                            <input type="email" name="email" x-model="form.email" required class="form-input" placeholder="ex: jean@domaine.com">
                        </x-form-group>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Matricule">
                            <input type="text" name="matricule" x-model="form.matricule" class="form-input" placeholder="Ex: MAT-0001">
                        </x-form-group>
                        <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>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Poste" :required="true">
                            <x-searchable-select form-id="personnel-form" model="poste" required placeholder="Sélectionner un poste" :options="$posteOptions" />
                        </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>

                    <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 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>
@endsection
