@extends('layouts.app')

@section('content')
    <x-common.page-breadcrumb pageTitle="{{ $title ?? 'Approval Pembatalan' }}" />

    @if(session('success'))
    <div class="mb-4 rounded-lg bg-success-50 p-4 text-sm text-success-700 dark:bg-success-500/15 dark:text-success-500">
        {{ session('success') }}
    </div>
    @endif

    @if(session('error'))
    <div class="mb-4 rounded-lg bg-error-50 p-4 text-sm text-error-700 dark:bg-error-500/15 dark:text-error-500">
        {{ session('error') }}
    </div>
    @endif

    <div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 dark:text-white/90">Request Pembatalan</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Kelola permintaan pembatalan order dan item</p>
                </div>
            </div>
        </div>

        {{-- Filters --}}
        <div class="border-b border-gray-200 px-5 py-4 dark:border-gray-800">
            <form method="GET" class="flex flex-wrap items-end gap-4">
                <div class="flex-1 min-w-[200px]">
                    <x-form.input
                        name="search"
                        placeholder="Cari invoice, nama customer..."
                        :value="request('search')"
                    />
                </div>
                <div class="w-40">
                    <x-form.select
                        name="status"
                        placeholder="Status"
                        :options="['pending' => '⏳ Menunggu', 'approved' => '✅ Disetujui', 'rejected' => '❌ Ditolak']"
                        :value="request('status', 'pending')"
                    />
                </div>
                <button type="submit" class="h-11 rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                    Filter
                </button>
                @if(request()->hasAny(['search', 'status']))
                <a href="{{ route('cancellations.index') }}" class="h-11 flex items-center rounded-lg border border-gray-300 px-4 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-800">
                    Reset
                </a>
                @endif
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-200 dark:border-gray-800">
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Invoice</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Tipe</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Item</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Alasan</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Diajukan Oleh</th>
                        <th class="px-5 py-3 text-left text-sm font-medium text-gray-500 dark:text-gray-400">Waktu</th>
                        <th class="px-5 py-3 text-center text-sm font-medium text-gray-500 dark:text-gray-400">Status</th>
                        <th class="px-5 py-3 text-center text-sm font-medium text-gray-500 dark:text-gray-400">Aksi</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                    @forelse($cancellations as $cr)
                    <tr class="hover:bg-gray-50 dark:hover:bg-white/[0.02]">
                        <td class="px-5 py-4">
                            <a href="{{ route('orders.show', $cr->order_id) }}" class="text-sm font-medium text-brand-500 hover:underline">
                                {{ $cr->order->invoice_number ?? '-' }}
                            </a>
                            <p class="text-xs text-gray-500">{{ $cr->order->customer_name ?? '-' }}</p>
                        </td>
                        <td class="px-5 py-4">
                            @if($cr->type === 'order')
                            <span class="inline-flex items-center rounded-full bg-error-50 px-2 py-0.5 text-xs font-medium text-error-700 dark:bg-error-500/15 dark:text-error-400">
                                Order
                            </span>
                            @else
                            <span class="inline-flex items-center rounded-full bg-warning-50 px-2 py-0.5 text-xs font-medium text-warning-700 dark:bg-warning-500/15 dark:text-warning-400">
                                Item
                            </span>
                            @endif
                        </td>
                        <td class="px-5 py-4">
                            <span class="text-sm text-gray-800 dark:text-white/90">
                                {{ $cr->type === 'item' && $cr->orderItem ? $cr->orderItem->product_name : '-' }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <p class="text-sm text-gray-600 dark:text-gray-300 max-w-xs truncate" title="{{ $cr->reason }}">{{ $cr->reason }}</p>
                        </td>
                        <td class="px-5 py-4">
                            <span class="text-sm text-gray-800 dark:text-white/90">{{ $cr->requester->name ?? '-' }}</span>
                        </td>
                        <td class="px-5 py-4">
                            <span class="text-sm text-gray-600 dark:text-gray-300">{{ $cr->created_at->format('d M Y H:i') }}</span>
                        </td>
                        <td class="px-5 py-4 text-center">
                            <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-medium {{ $cr->getStatusBadgeClass() }}">
                                {{ $cr->getStatusLabel() }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            @if($cr->isPending())
                            <div x-data="{ showApprove: false, showReject: false }" class="flex items-center justify-center gap-2">
                                <button @click="showApprove = true" class="inline-flex items-center gap-1 rounded-lg bg-success-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-success-600 transition-colors" title="Approve">
                                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                                    </svg>
                                    Setujui
                                </button>
                                <button @click="showReject = true" class="inline-flex items-center gap-1 rounded-lg border border-error-300 bg-white px-3 py-1.5 text-xs font-medium text-error-600 hover:bg-error-50 transition-colors dark:border-error-500/30 dark:bg-gray-800 dark:text-error-400 dark:hover:bg-error-500/10" title="Tolak">
                                    <svg class="size-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                    Tolak
                                </button>

                                {{-- Approve Confirmation Modal --}}
                                <div x-show="showApprove" x-cloak x-transition class="fixed inset-0 z-99999 flex items-center justify-center overflow-y-auto p-4">
                                    <div @click="showApprove = false" class="fixed inset-0 h-full w-full bg-gray-900/50 backdrop-blur-sm"></div>
                                    <div @click.stop class="relative w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
                                        <div class="flex justify-center mb-4">
                                            <div class="flex size-14 items-center justify-center rounded-full bg-success-50 text-success-500 dark:bg-success-500/15">
                                                <svg class="size-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                </svg>
                                            </div>
                                        </div>
                                        <h3 class="mb-2 text-center text-lg font-semibold text-gray-900 dark:text-white">Setujui Pembatalan</h3>
                                        <p class="mb-1 text-center text-sm text-gray-500 dark:text-gray-400">
                                            {{ $cr->type === 'order' ? 'Seluruh order' : 'Item' }} pada invoice <strong>#{{ $cr->order->invoice_number ?? '-' }}</strong> akan dibatalkan.
                                        </p>
                                        <p class="mb-4 text-center text-xs text-warning-600 dark:text-warning-400">Tindakan ini tidak dapat dibatalkan.</p>
                                        <form action="{{ route('cancellations.approve', $cr) }}" method="POST">
                                            @csrf
                                            <div class="mb-4">
                                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                    Catatan <span class="text-gray-400">(opsional)</span>
                                                </label>
                                                <textarea name="review_notes" rows="2" placeholder="Tambahkan catatan..."
                                                    class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:border-brand-300 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:text-white/90 dark:placeholder-gray-500"></textarea>
                                            </div>
                                            <div class="flex gap-2 justify-end">
                                                <button @click="showApprove = false" type="button" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                                                    Batal
                                                </button>
                                                <button type="submit" class="rounded-lg bg-success-500 px-4 py-2 text-sm font-medium text-white hover:bg-success-600">
                                                    Ya, Setujui
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                {{-- Reject Confirmation Modal --}}
                                <div x-show="showReject" x-cloak x-transition class="fixed inset-0 z-99999 flex items-center justify-center overflow-y-auto p-4">
                                    <div @click="showReject = false" class="fixed inset-0 h-full w-full bg-gray-900/50 backdrop-blur-sm"></div>
                                    <div @click.stop class="relative w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl dark:bg-gray-900">
                                        <div class="flex justify-center mb-4">
                                            <div class="flex size-14 items-center justify-center rounded-full bg-error-50 text-error-500 dark:bg-error-500/15">
                                                <svg class="size-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                                </svg>
                                            </div>
                                        </div>
                                        <h3 class="mb-3 text-center text-lg font-semibold text-gray-900 dark:text-white">Tolak Pembatalan</h3>
                                        <form action="{{ route('cancellations.reject', $cr) }}" method="POST">
                                            @csrf
                                            <div class="mb-4">
                                                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-300">
                                                    Catatan Penolakan <span class="text-error-500">*</span>
                                                </label>
                                                <textarea name="review_notes" rows="3" required placeholder="Alasan penolakan..."
                                                    class="w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder-gray-400 focus:border-brand-300 focus:outline-none focus:ring-2 focus:ring-brand-500/20 dark:border-gray-700 dark:text-white/90 dark:placeholder-gray-500"></textarea>
                                            </div>
                                            <div class="flex gap-2 justify-end">
                                                <button @click="showReject = false" type="button" class="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700">
                                                    Batal
                                                </button>
                                                <button type="submit" class="rounded-lg bg-error-500 px-4 py-2 text-sm font-medium text-white hover:bg-error-600">
                                                    Tolak
                                                </button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            @else
                            <div class="text-center">
                                @if($cr->isApproved())
                                <span class="text-xs text-success-600 dark:text-success-400">oleh {{ $cr->reviewer->name ?? '-' }}</span>
                                @elseif($cr->isRejected())
                                <span class="text-xs text-error-600 dark:text-error-400" title="{{ $cr->review_notes }}">oleh {{ $cr->reviewer->name ?? '-' }}</span>
                                @endif
                            </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="px-5 py-8 text-center text-sm text-gray-500 dark:text-gray-400">
                            @if(request('status', 'pending') === 'pending')
                                Tidak ada request pembatalan yang menunggu approval.
                            @else
                                Tidak ada data untuk filter yang dipilih.
                            @endif
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($cancellations->hasPages())
        <div class="border-t border-gray-200 px-5 py-4 dark:border-gray-800">
            {{ $cancellations->links() }}
        </div>
        @endif
    </div>
@endsection