@extends('layouts.dashboard')

@section('content')
@php
    use Carbon\Carbon;
    $states = [
        'pending' => 'Nouveau',
        'working' => 'En cours',
        'canceled' => 'Refusés',
        'success' => 'Terminés',
        'trash' => 'Corbeille'
    ];
    $colors = [
        'pending' => 'bg-yellow-100 text-yellow-800',
        'working' => 'bg-blue-100 text-blue-800',
        'canceled' => 'bg-red-100 text-red-800',
        'success' => 'bg-green-100 text-green-800',
        'trash' => 'bg-gray-200 text-gray-600'
    ];
@endphp
@push('head')
    <style>[x-cloak] { display: none !important; }</style>
@endpush
<div x-data="partRequests()">
    <div class="flex items-center justify-between mb-8">
        <h1 class="text-2xl font-bold">
            <i class="bi bi-cart4 mr-2"></i>
            Demandes de Pièces
        </h1>
    </div>
    <div class="flex gap-2 px-8" x-cloak>
        @foreach($states as $state => $label)
            <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='';">
                @if($state === 'trash')
                    <i class="bi bi-trash3"></i>
                    {{ $label }}
                @else
                    {{ $label }}
                    @if(count($requests[$state] ?? []) > 0)
                        <span class="ml-2 px-2 py-1 rounded-full text-xs font-bold {{ $colors[$state] }}">
                            {{ count($requests[$state] ?? []) }}
                        </span>
                    @endif
                @endif
            </button>
        @endforeach
    </div>

    <div class="bg-white rounded-lg border border-gray-200 p-8" x-cloak>
        @foreach($states as $state => $label)
            <div x-show="tab==='{{ $state }}'" x-cloak x-transition.opacity>
                @if(count($requests[$state] ?? []) > 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, email, moto, etc."
                        x-model="filter"
                    >
                </div>
                @endif
                <div class="grid md:grid-cols-2 gap-5">
                @forelse(($requests[$state] ?? []) as $req)
                    <template x-if="
                        filter === '' ||
                        (
                            {{ json_encode(strtolower($req->firstname)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($req->lastname)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($req->phone)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($req->email)) }}.includes(filter.toLowerCase()) ||
                            {{ json_encode(strtolower($req->moto_title)) }}.includes(filter.toLowerCase())
                        )
                    ">
                    <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-blue-500/10 flex items-center justify-center text-black font-bold text-lg">
                                {{ strtoupper(substr($req->firstname,0,1)) }}{{ strtoupper(substr($req->lastname,0,1)) }}
                            </div>
                            <div>
                                <div class="font-semibold text-lg">{{ $req->firstname }} {{ $req->lastname }}</div>
                                <span class="text-xs text-gray-500">{{ $req->email }}</span>
                            </div>
                        </div>
                        <div class="flex flex-col gap-2">
                            <span class="text-xs bg-gray-100 rounded px-2 py-1 font-semibold">
                                {{ count($req->partRequestProducts) }} produit(s)
                            </span>
                            <span class="text-xs text-gray-400">
                                {{ Carbon::parse($req->created_at)->diffForHumans() }}
                            </span>
                        </div>
                    </button>
                    </template>
                @empty
                    <div class="col-span-full text-gray-400 py-16 text-center text-lg">Aucune demande dans cet état.</div>
                @endforelse
                </div>
            </div>
        @endforeach
    </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-blue-50 via-white to-gray-100 px-8 pt-10 pb-6">
                        <div class="w-20 h-20 rounded-full bg-blue-500/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.email"></div>
                        <a
                            class="text-sm mb-2 flex items-center gap-1"
                            :href="`https://wa.me/${detail.phone.replace(/[^0-9]/g, '')}`"
                            style="color:green;text-decoration:underline;"
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            whatsapp: <span x-text="detail.phone"></span>
                        </a>

                        <div class="text-xs text-gray-400 mb-4" x-text="detail.created_at"></div>
                        <div class="text-sm font-bold mb-2">Moto : <span class="text-brand" x-text="detail.moto_title"></span></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 === 'working' ? 'text-blue-800 border-blue-300'
                                    : detail.state === 'canceled' ? 'text-red-800 border-red-300'
                                    : detail.state === 'trash' ? 'text-gray-600 border-gray-300'
                                    : 'text-green-800 border-green-300'"
                            >
                                <span x-text="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 === 'working' ? 'text-blue-800'
                                                : targetState === 'success' ? 'text-green-800'
                                                : targetState === 'canceled' ? 'text-red-800'
                                                : targetState === 'trash' ? 'text-gray-600'
                                                : 'text-yellow-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">Produits demandés</div>
                            <div class="grid grid-cols-1 gap-3">
                                <template x-for="prod in detail.products" :key="prod.id">
                                    <div class="bg-gray-100 rounded-xl border border-gray-200 shadow-sm p-4 flex items-center gap-4">
                                        <img :src="prod.image" class="w-14 h-14 object-contain rounded" alt="">
                                        <div>
                                            <div class="text-sm font-semibold" x-text="prod.title"></div>
                                            <div class="text-xs text-gray-500" x-show="prod.reference" x-text="'Réf: ' + prod.reference"></div>
                                            <div class="text-xs text-brand" x-text="prod.price + ' dhs'"></div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                            <div class="mt-4">
                                <span class="font-semibold">Prix total :</span>
                                <span class="text-brand font-bold" x-text="totalPrice(detail.products) + ' dhs'"></span>
                            </div>
                        </div>
                        <div x-data="{ showProof: false }">
                            <div class="font-semibold mb-2">Preuve</div>
                            <template x-if="detail.proof_url">
                                <button type="button" @click="showProof = true">
                                    <img :src="detail.proof_url" class="w-24 h-24 object-cover rounded cursor-pointer border border-gray-200" alt="Preuve">
                                </button>
                            </template>
                            <template x-if="!detail.proof_url">
                                <span class="text-gray-500">Aucune image fournie</span>
                            </template>
                            <div x-show="showProof" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/80"
                                @click.self="showProof = false" @keydown.escape.window="showProof = false" tabindex="0">
                                <button type="button" class="absolute top-8 right-8 w-14 h-14 flex items-center justify-center rounded-full text-white transition"
                                    @click="showProof = false" aria-label="Fermer la preuve">
                                    <i class="bi bi-x-lg text-4xl"></i>
                                </button>
                                <img :src="detail.proof_url" class="h-[80vh] rounded shadow-lg" alt="Preuve">
                            </div>
                        </div>
                        <template x-if="detail.message">
                            <div>
                                <div class="font-semibold mb-2">Texte de la demande</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>
function partRequests() {
    return {
        tab: 'pending',
        filter: '',
        showDetail: false,
        detail: null,
        openDetail(id) {
            fetch(`/dashboard/part-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 === 'working' ? 'En cours'
                            : data.state === 'canceled' ? 'Refusés'
                            : data.state === 'trash' ? 'Corbeille'
                            : 'Terminés',
                        state_color: data.state_color,
                        proof_url: data.proof ? `/storage/${data.proof}` : null,
                    };
                    this.showDetail = true;
                });
        },
        closeDetail() {
            this.showDetail = false;
            this.detail = null;
        },
        changeState(newState) {
            if (!this.detail) return;
            fetch(`/dashboard/part-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/part-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/part-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();
                }
            });
        },
        totalPrice(products) {
            if (!products) return 0;
            return products.reduce((sum, p) => sum + (parseFloat(p.price) || 0), 0);
        }
    }
}
</script>
@endsection