@extends('layouts.app')

@section('title', 'Fournisseurs')
@section('page-title', 'Fournisseurs')

@section('content')

<script>
    window.__fournisseursData = @json($fournisseurs);
    window.fournisseurManager = function(paginator) {
        const p = paginator && typeof paginator === 'object' && 'data' in paginator ? paginator : {
            data: []
        };
        return {
            showModal: false
            , showDeleteModal: false
            , deleteIndex: null
            , deleteLabel: ''
            , editingIndex: null
            , fournisseurs: p.data || []
            , form: {
                nom: ''
                , adresse: ''
                , email: ''
                , contact: ''
            }
            , formatPrice(n) {
                return new Intl.NumberFormat('fr-FR').format(n) + ' FCFA';
            }
            , openModal() {
                this.editingIndex = null;
                this.form = {
                    nom: ''
                    , adresse: ''
                    , email: ''
                    , contact: ''
                };
                this.showModal = true;
            }
            , editClient(i) {
                this.editingIndex = i;
                this.form = {
                    ...this.fournisseurs[i]
                };
                this.showModal = true;
            }
            , openDeleteModal(i) {
                this.deleteIndex = i;
                this.deleteLabel = this.fournisseurs[i].nom;
                this.showDeleteModal = true;
            }
            , confirmDelete() {
                if (this.deleteIndex === null) return;
                const c = this.fournisseurs[this.deleteIndex];
                const id = c.hash_id || c.id;
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url('
                fournisseurs ') }}/' + id;
                const token = document.querySelector('meta[name="csrf-token"]') ? .content || '';
                form.innerHTML = '<input type="hidden" name="_token" value="' + token + '"><input type="hidden" name="_method" value="DELETE">';
                document.body.appendChild(form);
                form.submit();
            }
        };
    };

</script>


<div x-data="fournisseurManager(__fournisseursData)">
    <x-page-card title="Liste des fournisseurs" action="openModal()" actionLabel="Nouveau fournisseur">
        <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">Contact</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Email</th>
                        <th class="px-4 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Adresse</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">
                    <template x-for="(f, i) in fournisseurs" :key="i">
                        <tr class="hover:bg-slate-50/50 transition-colors">
                            <td class="px-4 py-3 font-medium text-slate-800" x-text="f.nom"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.contact"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.email"></td>
                            <td class="px-4 py-3 text-slate-600" x-text="f.adresse"></td>
                            <td class="px-4 py-3">
                                <x-action-buttons :editAction="'editFournisseur(i)'" :deleteAction="'openDeleteModal(i)'" />
                            </td>
                        </tr>
                    </template>
                </tbody>
            </table>
        </div>
    </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" class="relative bg-white rounded-2xl shadow-2xl max-w-lg 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" x-text="editingIndex === null ? 'Nouveau fournisseur' : 'Modifier le fournisseur'"></h3>
                </div>
                <form @submit.prevent="saveFournisseur()" class="p-6 space-y-5">
                    <x-form-group label="Nom / Entreprise" :required="true">
                        <input type="text" x-model="form.nom" required class="form-input" placeholder="Ex: Distrib SA">
                    </x-form-group>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <x-form-group label="Téléphone" :required="true">
                            <input type="tel" x-model="form.contact" required class="form-input" placeholder="+225 27 00 00 00 00">
                        </x-form-group>
                        <x-form-group label="Email">
                            <input type="email" x-model="form.email" class="form-input" placeholder="contact@entreprise.ci">
                        </x-form-group>
                    </div>
                    <x-form-group label="Adresse">
                        <input type="text" x-model="form.adresse" class="form-input" placeholder="Ex: Zone 4, Abidjan">
                    </x-form-group>
                    <div class="flex gap-3 pt-2">
                        <button type="submit" class="form-btn-primary flex-1">
                            <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="M5 13l4 4L19 7" /></svg>
                            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>

<script>
    function fournisseurManager() {
        return {
            showModal: false
            , showDeleteModal: false
            , deleteIndex: null
            , deleteLabel: ''
            , editingIndex: null
            , fournisseurs: [{
                    nom: 'Distrib SA'
                    , contact: '+225 27 21 00 00 01'
                    , email: 'contact@distrib.ci'
                    , adresse: 'Zone 4, Abidjan'
                }
                , {
                    nom: 'Agro Plus'
                    , contact: '+225 27 22 11 22 33'
                    , email: 'info@agroplus.ci'
                    , adresse: 'Marcory, Abidjan'
                }
            ]
            , form: {
                nom: ''
                , contact: ''
                , email: ''
                , adresse: ''
            }
            , openModal() {
                this.editingIndex = null;
                this.form = {
                    nom: ''
                    , contact: ''
                    , email: ''
                    , adresse: ''
                };
                this.showModal = true;
            }
            , editFournisseur(i) {
                this.editingIndex = i;
                this.form = {
                    ...this.fournisseurs[i]
                };
                this.showModal = true;
            }
            , saveFournisseur() {
                if (this.editingIndex !== null) {
                    this.fournisseurs[this.editingIndex] = {
                        ...this.form
                    };
                } else {
                    this.fournisseurs.push({
                        ...this.form
                    });
                }
                this.showModal = false;
            }
            , openDeleteModal(i) {
                this.deleteIndex = i;
                this.deleteLabel = this.fournisseurs[i].nom;
                this.showDeleteModal = true;
            }
            , confirmDelete() {
                if (this.deleteIndex !== null) {
                    this.fournisseurs.splice(this.deleteIndex, 1);
                    this.showDeleteModal = false;
                    this.deleteIndex = null;
                    this.deleteLabel = '';
                }
            }
        };
    }

</script>
@endsection
