@extends('admin.layout')

@section('content')
<div class="page-header">
    <div>
        <h1 class="text-3xl font-bold text-gray-800 page-title">Vouchers</h1>
        <p class="text-gray-600 mt-1">Manage Uber and Lyft vouchers for holidays</p>
    </div>
    <div class="flex flex-col sm:flex-row gap-3">
        <a href="{{ route('vouchers.import') }}" style="background: linear-gradient(to right, #10b981, #059669);" class="group relative inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
            </svg>
            Import Vouchers
        </a>
        <a href="{{ route('vouchers.create') }}" style="background-color: #2563eb;" class="inline-flex items-center text-white px-5 py-2.5 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            Create Voucher
        </a>
    </div>
</div>

@if(session('success'))
    <div class="mb-6 bg-green-50 border-l-4 border-green-500 rounded-lg shadow-sm">
        <div class="flex items-start p-4">
            <svg class="w-5 h-5 mr-3 mt-0.5" style="fill: #10b981;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
            </svg>
            <p class="text-green-800 font-medium">{{ session('success') }}</p>
        </div>
    </div>
@endif

{{-- Filter Form --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden mb-6">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);" class="px-6 py-4">
        <h2 class="text-xl font-bold text-white flex items-center">
            <svg class="w-6 h-6 mr-2" style="fill: #ffffff;" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z" clip-rule="evenodd"></path>
            </svg>
            Filters
        </h2>
    </div>

    <form method="GET" action="{{ route('vouchers.index') }}" id="filterForm" class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div>
                <label for="type" class="block text-sm font-medium text-gray-700 mb-2">Voucher Type</label>
                <select name="type" id="type" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">All Types</option>
                    <option value="uber" {{ request('type') == 'uber' ? 'selected' : '' }}>Uber</option>
                    <option value="lyft" {{ request('type') == 'lyft' ? 'selected' : '' }}>Lyft</option>
                </select>
            </div>

            <div>
                <label for="claimed" class="block text-sm font-medium text-gray-700 mb-2">Claimed Status</label>
                <select name="claimed" id="claimed" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">All Statuses</option>
                    <option value="1" {{ request('claimed') == '1' ? 'selected' : '' }}>Claimed</option>
                    <option value="0" {{ request('claimed') == '0' ? 'selected' : '' }}>Not Claimed</option>
                </select>
            </div>

            <div>
                <label for="holiday_id" class="block text-sm font-medium text-gray-700 mb-2">Holiday</label>
                <select name="holiday_id" id="holiday_id" class="w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <option value="">All Holidays</option>
                    @foreach($holidays as $holiday)
                        <option value="{{ $holiday->id }}" {{ request('holiday_id') == $holiday->id ? 'selected' : '' }}>
                            {{ $holiday->emoji }} {{ $holiday->title }} {{ \Carbon\Carbon::parse($holiday->start_date)->format('Y') }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="flex items-end space-x-3">
                <button type="submit" style="background-color: #2563eb;" class="inline-flex items-center text-white px-6 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-200 transform hover:-translate-y-0.5">
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
                    </svg>
                    Filter
                </button>
                @if(request('type') || request('claimed') !== null || request('holiday_id'))
                    <button type="button" onclick="confirmBulkDelete()" style="background: linear-gradient(to right, #ef4444, #dc2626);" class="group relative inline-flex items-center text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200 transform hover:-translate-y-0.5">
                        <svg class="w-4 h-4 mr-2 group-hover:rotate-12 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                        Delete Filtered
                        <span class="absolute -top-1 -right-1 flex h-5 w-5" style="pointer-events: none;">
                            <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75" style="background-color: #f87171;"></span>
                            <span class="relative inline-flex rounded-full h-5 w-5 items-center justify-center text-xs font-bold" style="background-color: #ef4444;">!</span>
                        </span>
                    </button>
                @endif
            </div>
        </div>
    </form>
</div>

{{-- Results Count --}}
<div class="mb-4 flex items-center justify-between">
    <p class="text-sm text-gray-600">Showing <span class="font-semibold text-gray-900">{{ $vouchers->count() }}</span> voucher(s)</p>
</div>

{{-- Vouchers Table --}}
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
    <div class="overflow-x-auto table-container">
        <table class="w-full">
            <thead style="background-color: #f9fafb;">
                <tr>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Code</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Type</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Claimed By</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Holiday</th>
                    <th class="px-6 py-4 text-left text-sm font-semibold text-gray-700">Claimed At</th>
                    <th class="px-6 py-4 text-center text-sm font-semibold text-gray-700">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($vouchers as $voucher)
                <tr class="hover:bg-gray-50 border-b border-gray-100 transition">
                    <td class="px-6 py-4">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 h-10 w-10 rounded-lg flex items-center justify-center mr-3" style="background-color: {{ $voucher->type == 'uber' ? '#000000' : '#FF00BF' }};">
                                <svg class="w-5 h-5" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path d="M8 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM15 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"></path>
                                    <path d="M3 4a1 1 0 00-1 1v10a1 1 0 001 1h1.05a2.5 2.5 0 014.9 0H10a1 1 0 001-1V5a1 1 0 00-1-1H3zM14 7a1 1 0 00-1 1v6.05A2.5 2.5 0 0115.95 16H17a1 1 0 001-1v-5a1 1 0 00-.293-.707l-2-2A1 1 0 0015 7h-1z"></path>
                                </svg>
                            </div>
                            <span class="font-mono text-sm font-semibold text-gray-900">{{ $voucher->code }}</span>
                        </div>
                    </td>
                    <td class="px-6 py-4">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold {{ $voucher->type == 'uber' ? 'bg-black text-white' : 'bg-pink-100 text-pink-800' }}">
                            {{ ucfirst($voucher->type) }}
                        </span>
                    </td>
                    <td class="px-6 py-4 text-sm">
                        @if($voucher->claimed_by)
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-8 w-8 rounded-full flex items-center justify-center mr-2" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <span class="text-white font-bold text-xs">{{ strtoupper(substr($voucher->user ? ($voucher->user->first_name ?? $voucher->user->email) : 'U', 0, 1)) }}</span>
                                </div>
                                <span class="text-gray-900 font-medium">{{ $voucher->user ? $voucher->user->name : 'User #' . $voucher->claimed_by }}</span>
                            </div>
                        @else
                            <span class="inline-flex items-center text-gray-400">
                                <svg class="w-4 h-4 mr-1" style="fill: currentColor;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path>
                                </svg>
                                Not claimed
                            </span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm">
                        @if($voucher->holiday)
                            <div class="flex items-center">
                                @if($voucher->holiday->emoji)
                                    <span class="text-xl mr-2">{{ $voucher->holiday->emoji }}</span>
                                @endif
                                <div>
                                    <span class="text-gray-900 font-medium">{{ $voucher->holiday->title }}</span>
                                    <span class="text-gray-500 block text-xs">{{ \Carbon\Carbon::parse($voucher->holiday->start_date)->format('M d, Y') }}</span>
                                </div>
                            </div>
                        @else
                            <span class="text-gray-400">-</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-sm text-gray-600">
                        {{ $voucher->claimed_at ? $voucher->claimed_at->format('M d, Y') : '-' }}
                        @if($voucher->claimed_at)
                            <span class="text-gray-500 block text-xs">{{ $voucher->claimed_at->format('H:i') }}</span>
                        @endif
                    </td>
                    <td class="px-6 py-4 text-center">
                        <form action="{{ route('vouchers.destroy', $voucher) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to delete this voucher? This action cannot be undone.');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" style="background-color: #ef4444;" class="inline-flex items-center px-3 py-2 rounded-lg text-white text-xs font-medium shadow-sm hover:shadow-md transition-all duration-200 transform hover:-translate-y-0.5">
                                <svg class="w-4 h-4 mr-1" style="fill: #ffffff;" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                                </svg>
                                Delete
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-16 text-center">
                        <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 100 4v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2a2 2 0 100-4V6z"></path>
                        </svg>
                        <p class="text-gray-500 text-lg font-medium">No vouchers found</p>
                        <p class="text-gray-400 text-sm mt-1">
                            <a href="{{ route('vouchers.import') }}" class="text-blue-600 hover:underline font-medium">Import vouchers</a> or <a href="{{ route('vouchers.create') }}" class="text-blue-600 hover:underline font-medium">create one manually</a> to get started
                        </p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Pagination --}}
@if($vouchers->hasPages())
    <div class="mt-6">
        {{ $vouchers->links() }}
    </div>
@endif

{{-- Hidden Form for Bulk Delete --}}
<form id="bulkDeleteForm" action="{{ route('vouchers.bulk-delete') }}" method="POST" style="display: none;">
    @csrf
    <input type="hidden" name="type" value="{{ request('type') }}">
    <input type="hidden" name="claimed" value="{{ request('claimed') }}">
    <input type="hidden" name="holiday_id" value="{{ request('holiday_id') }}">
</form>

<script>
function confirmBulkDelete() {
    const count = {{ $vouchers->total() }};
    if (confirm(`⚠️ WARNING: You are about to delete ${count} filtered voucher(s).\n\nThis action cannot be undone. Are you sure you want to proceed?`)) {
        document.getElementById('bulkDeleteForm').submit();
    }
}
</script>
@endsection