@extends('layouts.dashboard')

@section('content')
@php
    $states = [
        'pending' => 'Nouveau',
        'exported' => 'Exportés',
        'trash' => 'Corbeille'
    ];
    $colors = [
        'pending' => 'bg-yellow-100 text-yellow-800',
        'exported' => 'bg-blue-100 text-blue-800',
        'trash' => 'bg-gray-200 text-gray-600'
    ];
@endphp
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="freeCreditRequests()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold flex items-center gap-2">
            <i class="bi bi-chat-square-text mr-2"></i>
            Crédit Gratuit
        </h1>
        <button type="button"
            class="ml-auto px-5 py-2 bg-brand text-white rounded-lg font-semibold shadow hover:bg-brand-dark transition"
            @click="exportRequests()"
            x-show="tab==='pending' && {{ count($requests['pending'] ?? []) }} > 0"
        >
            <i class="bi bi-download mr-2"></i>
            Exporter les demandes
        </button>
        <a id="export-download-link" href="{{ route('dashboard.free-credit-requests.export') }}" style="display:none"></a>
    </div>
    <div class="flex gap-2 px-8" x-cloak>
        <template x-for="(label, state) in { pending: 'Nouveau', exported: 'Exportés', trash: 'Corbeille' }" :key="state">
            <button type="button"
                class="px-6 py-3 rounded-t-lg font-semibold text-sm focus:outline-none transition border-b-2 flex items-center gap-2"
                :class="tab === state
                    ? 'border-brand bg-white text-brand shadow'
                    : 'border-transparent bg-gray-100 text-gray-500 hover:bg-gray-200'"
                @click="tab = state; filter='';">
                <i x-show="state === 'trash'" class="bi bi-trash3"></i>
                <span x-text="label"></span>
                <template x-if="state !== 'trash' && requests[state] && requests[state].length > 0">
                    <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold"
                        :class="{
                            'bg-yellow-100 text-yellow-800': state === 'pending',
                            'bg-blue-100 text-blue-800': state === 'exported'
                        }"
                        x-text="requests[state].length">
                    </span>
                </template>
            </button>
        </template>
    </div>
    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        <template x-for="(reqs, state) in requests" :key="state">
            <div x-show="tab === state" x-cloak x-transition.opacity>
                <div x-show="reqs.length > 0">
                    <div class="mb-4">
                        <input type="text"
                            class="px-3 py-2 w-full rounded-md border border-gray-300 focus:border-gray-900 outline-0"
                            placeholder="Filtrer par nom, prénom, téléphone, ville, profession, moto..."
                            x-model="filter"
                        >
                    </div>
                </div>
                <div class="grid md:grid-cols-2 gap-5">
                    <template x-for="req in reqs.filter(r => 
                        filter === '' ||
                        r.firstname.toLowerCase().includes(filter.toLowerCase()) ||
                        r.lastname.toLowerCase().includes(filter.toLowerCase()) ||
                        r.phone.toLowerCase().includes(filter.toLowerCase()) ||
                        r.city.toLowerCase().includes(filter.toLowerCase()) ||
                        r.work.toLowerCase().includes(filter.toLowerCase()) ||
                        r.moto_title.toLowerCase().includes(filter.toLowerCase())
                    )" :key="req.id">
                        <button type="button"
                            class="rounded-lg border border-gray-200 hover:bg-gray-200/30 p-6 flex justify-between gap-4 transition w-full text-left"
                            @click="openDetail(req.id)">
                            <div class="flex items-center gap-5">
                                <div class="flex-shrink-0 w-12 h-12 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-lg"
                                    x-text="(req.firstname[0] || '').toUpperCase() + (req.lastname[0] || '').toUpperCase()">
                                </div>
                                <div>
                                    <div class="font-semibold text-lg" x-text="req.firstname + ' ' + req.lastname"></div>
                                    <span class="text-xs text-gray-500" x-text="req.phone"></span>
                                </div>
                            </div>
                            <div class="flex flex-col gap-2">
                                <span class="text-xs text-gray-400" x-text="req.created_at_human"></span>
                            </div>
                        </button>
                    </template>
                    <template x-if="reqs.length === 0">
                        <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucune demande dans cet état.</div>
                    </template>
                </div>
            </div>
        </template>
    </div>
    <!-- Modale détail demande -->
    <div x-show="showDetail" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/40" @click.self="closeDetail()" @keydown.escape.window="closeDetail()" tabindex="0">
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 p-0 max-w-xl w-full relative max-h-[95vh] flex flex-col overflow-y-scroll">
            <button type="button" class="absolute top-4 right-4 text-gray-500 hover:text-black" @click="closeDetail()">
                <i class="bi bi-x-lg text-2xl"></i>
            </button>
            <template x-if="detail">
                <div>
                    <div class="flex flex-col items-center bg-gradient-to-br from-amber-50 via-white to-gray-100 px-8 pt-10 pb-6">
                        <div class="w-20 h-20 rounded-full bg-brand/10 flex items-center justify-center text-black font-bold text-3xl mb-3 shadow">
                            <span x-text="detail.initials"></span>
                        </div>
                        <div class="text-xl font-bold mb-1" x-text="detail.firstname + ' ' + detail.lastname"></div>
                        <div class="text-sm text-gray-500 mb-2" x-text="detail.phone"></div>
                        <div class="text-xs text-gray-400 mb-4" x-text="detail.created_at"></div>
                        <div x-data="{ open: false }" class="relative mt-2 max-w-xs">
                            <button 
                                type="button"
                                @click="open = !open"
                                class="w-full flex items-center gap-3 justify-between px-4 py-2 rounded-full border text-sm font-semibold shadow-sm transition
                                bg-white hover:bg-gray-50"
                                :class="detail.state === 'pending' ? 'text-yellow-800 border-yellow-300'
                                    : detail.state === 'exported' ? 'text-blue-800 border-blue-300'
                                    : detail.state === 'trash' ? 'text-gray-600 border-gray-300'
                                    : 'text-gray-800 border-gray-300'"
                            >
                                <span x-text="detail.state === 'trash' ? 'Corbeille' : detail.state_label"></span>
                                <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
                            </button>
                            <div 
                                x-show="open" 
                                x-transition 
                                @click.away="open = false"
                                class="absolute left-0 top-full mt-1 w-full z-10 rounded-xl border border-gray-200 shadow-lg bg-white overflow-hidden"
                            >
                                <template x-for="(lbl, targetState) in detail.states" :key="targetState">
                                    <template x-if="detail.state !== targetState">
                                        <button 
                                            type="button"
                                            @click="changeState(targetState); open = false;"
                                            class="w-full text-left px-4 py-2 text-sm font-medium transition hover:bg-gray-100"
                                            :class="targetState === 'exported' ? 'text-blue-800'
                                                : targetState === 'pending' ? 'text-yellow-700'
                                                : 'text-gray-700'"
                                        >
                                            <span x-text="lbl"></span>
                                        </button>
                                    </template>
                                </template>
                            </div>
                        </div>
                    </div>
                    <div class="px-8 pb-8 pt-4 flex flex-col gap-4">
                        <div>
                            <div class="font-semibold mb-2">Moto choisie</div>
                            <div class="text-gray-700 bg-gray-100 px-5 py-3 rounded-xl border border-gray-200 shadow-sm" x-text="detail.moto_title"></div>
                        </div>
                        <div>
                            <div class="font-semibold mb-2">Profession</div>
                            <div class="text-gray-700 bg-gray-100 px-5 py-3 rounded-xl border border-gray-200 shadow-sm" x-text="detail.work"></div>
                        </div>
                        <div>
                            <div class="font-semibold mb-2">Ville</div>
                            <div class="text-gray-700 bg-gray-100 px-5 py-3 rounded-xl border border-gray-200 shadow-sm" x-text="detail.city"></div>
                        </div>
                        <template x-if="detail.message">
                            <div>
                                <div class="font-semibold mb-2">Message</div>
                                <div class="text-gray-700 bg-amber-100/60 px-5 py-4 rounded-xl border border-amber-200 shadow-sm" x-text="detail.message"></div>
                            </div>
                        </template>
                        <div class="flex justify-end mt-4">
                            <template x-if="detail && detail.state !== 'trash'">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
                                    @click="moveToTrash(detail.id)">
                                    <i class="bi bi-trash3"></i>
                                    Supprimer
                                </button>
                            </template>
                            <template x-if="detail && detail.state === 'trash'">
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-yellow-600 text-white rounded-lg hover:bg-yellow-700 transition"
                                    @click="changeState('pending')">
                                    <i class="bi bi-arrow-counterclockwise"></i>
                                    Récupérer
                                </button>
                                <button type="button"
                                    class="flex items-center gap-2 px-4 py-2 bg-gray-700 text-white rounded-lg hover:bg-gray-800 transition"
                                    @click="deleteRequest(detail.id)">
                                    <i class="bi bi-trash"></i>
                                    Supprimer définitivement
                                </button>
                            </template>
                        </div>
                    </div>
                </div>
            </template>
        </div>
    </div>
</div>
<script>
window.freeCreditRequests = function() {
    return {
        requests: {
            pending: @json($requests['pending'] ?? []),
            exported: @json($requests['exported'] ?? []),
            trash: @json($requests['trash'] ?? [])
        },
        tab: 'pending',
        filter: '',
        showDetail: false,
        detail: null,
        openDetail(id) {
            fetch(`/dashboard/free-credit-requests/${id}/ajax`)
                .then(r => r.json())
                .then((data) => {
                    this.detail = {
                        ...data,
                        initials: (data.firstname[0] ?? '').toUpperCase() + (data.lastname[0] ?? '').toUpperCase(),
                        state_label: data.state === 'pending' ? 'Nouveau'
                            : data.state === 'exported' ? 'Exportés'
                            : data.state === 'trash' ? 'Corbeille'
                            : 'N/A',
                        state_color: data.state === 'pending' ? 'bg-yellow-100 text-yellow-800'
                            : data.state === 'exported' ? 'bg-blue-100 text-blue-800'
                            : data.state === 'trash' ? 'bg-gray-200 text-gray-600'
                            : 'bg-gray-100 text-gray-800',
                        states: {
                            pending: 'Nouveau',
                            exported: 'Exportés'
                        }
                    };
                    this.showDetail = true;
                });
        },
        closeDetail() {
            this.showDetail = false;
            this.detail = null;
        },
        changeState(newState) {
            if (!this.detail) return;
            fetch(`/dashboard/free-credit-requests/${this.detail.id}/state`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ state: newState })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        },
        moveToTrash(id) {
            fetch(`/dashboard/free-credit-requests/${id}/state`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: JSON.stringify({ state: 'trash' })
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        },
        deleteRequest(id) {
            fetch(`/dashboard/free-credit-requests/${id}`, {
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(r => r.json())
            .then(data => {
                if (data.success) {
                    window.location.reload();
                }
            });
        },
        exportRequests() {
            const link = document.getElementById('export-download-link');
            link.click();

            // Attendre un court instant pour que le téléchargement démarre
            setTimeout(() => {
                // Récupérer toutes les demandes en attente
                const movedRequests = [...this.requests.pending];
                
                // Mettre à jour leur état
                movedRequests.forEach(req => req.state = 'exported');

                // Les ajouter à la liste des exportés
                this.requests.exported = [...movedRequests, ...this.requests.exported];
                
                // Vider la liste des demandes en attente
                this.requests.pending = [];

            }, 500); // 500ms de délai pour s'assurer que le téléchargement a commencé
        }
    }
}
</script>
@endsection