@extends('layouts.admin')

@section('page-title', 'Campaign Requests')

@section('content')
<div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Page Header --}}
        <div class="flex justify-between items-start mb-6">
            <div>
                <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Campaign Requests</h2>
                <p class="text-sm text-gray-500 mt-1">You have total <span class="font-semibold text-indigo-600">{{ $requests->total() }}</span> requests</p>
            </div>
        </div>

        {{-- Table Card --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
                <h4 class="text-base font-semibold text-gray-900">Campaign Requests</h4>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider w-12">#</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Campaign</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Seller Name</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Shop Name</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Product</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Discount</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Discount Type</th>
                            <th class="text-left py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                            <th class="text-center py-3 px-5 text-xs font-semibold text-gray-500 uppercase tracking-wider">Options</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        @forelse($requests as $request)
                        <tr class="hover:bg-gray-50/50 transition-colors" id="row_{{ $request->id }}">
                            <td class="py-3 px-5 text-sm text-gray-500">{{ $loop->iteration + ($requests->currentPage() - 1) * $requests->perPage() }}</td>
                            <td class="py-3 px-5">
                                @if($request->campaign)
                                    <a href="{{ route('admin.campaigns.edit', $request->campaign) }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-800">{{ $request->campaign->name }}</a>
                                @else
                                    <span class="text-sm text-gray-400">N/A</span>
                                @endif
                            </td>
                            <td class="py-3 px-5 text-sm text-gray-700">{{ $request->vendor->user->name ?? $request->vendor->name ?? '-' }}</td>
                            <td class="py-3 px-5 text-sm text-gray-700">{{ $request->vendor->name ?? '-' }}</td>
                            <td class="py-3 px-5">
                                @if($request->product)
                                    <span class="text-sm text-gray-900">{{ Str::limit($request->product->name, 30) }}</span>
                                @else
                                    <span class="text-sm text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="py-3 px-5 text-sm font-medium text-gray-900">
                                @if($request->discount)
                                    {{ $request->discount }}{{ $request->discount_type === 'percentage' ? '%' : '' }}
                                @else
                                    <span class="text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="py-3 px-5">
                                @if($request->discount_type)
                                    <span class="px-2 py-1 rounded text-xs font-semibold capitalize
                                        @if($request->discount_type === 'percentage') bg-blue-100 text-blue-700
                                        @else bg-green-100 text-green-700
                                        @endif">
                                        {{ $request->discount_type }}
                                    </span>
                                @else
                                    <span class="text-sm text-gray-400">-</span>
                                @endif
                            </td>
                            <td class="py-3 px-5">
                                @php
                                    $statusColors = [
                                        'pending' => 'bg-yellow-100 text-yellow-700',
                                        'approved' => 'bg-green-100 text-green-700',
                                        'rejected' => 'bg-red-100 text-red-700',
                                    ];
                                @endphp
                                <span class="px-2 py-1 rounded text-xs font-semibold {{ $statusColors[$request->status] ?? 'bg-gray-100 text-gray-700' }}">
                                    {{ ucfirst($request->status) }}
                                </span>
                            </td>
                            <td class="py-3 px-5">
                                <div class="flex items-center justify-center gap-2">
                                    @if($request->status === 'pending')
                                        <button onclick="document.getElementById('approve-{{ $request->id }}').classList.remove('hidden')" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-emerald-300 text-emerald-600 hover:bg-emerald-50 transition-colors" title="Approve">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        </button>
                                        <button onclick="document.getElementById('reject-{{ $request->id }}').classList.remove('hidden')" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-red-300 text-red-600 hover:bg-red-50 transition-colors" title="Reject">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        </button>
                                    @endif
                                    <a href="{{ route('admin.campaign-requests.show', $request) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-gray-300 text-gray-600 hover:bg-gray-50 transition-colors" title="View">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                                    </a>
                                    <form action="{{ route('admin.campaign-requests.destroy', $request) }}" method="POST" class="inline" onsubmit="return confirm('Delete this request?')">
                                        @csrf @method('DELETE')
                                        <button type="submit" class="inline-flex items-center justify-center w-8 h-8 rounded-full border border-red-300 text-red-600 hover:bg-red-50 transition-colors" title="Delete">
                                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/></svg>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>

                        {{-- Approve Modal --}}
                        <div id="approve-{{ $request->id }}" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                            <div class="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
                                <h3 class="text-lg font-semibold mb-4">Approve Request</h3>
                                <form action="{{ route('admin.campaign-requests.approve', $request) }}" method="POST">
                                    @csrf
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Assign to Campaign</label>
                                        <select name="campaign_id" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                                            <option value="">None</option>
                                            @foreach(\App\Models\Campaign::where('status', 'active')->get() as $campaign)
                                                <option value="{{ $campaign->id }}">{{ $campaign->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Admin Notes</label>
                                        <textarea name="admin_notes" rows="3" class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500 resize-none"></textarea>
                                    </div>
                                    <div class="flex justify-end gap-3">
                                        <button type="button" onclick="document.getElementById('approve-{{ $request->id }}').classList.add('hidden')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">Cancel</button>
                                        <button type="submit" class="px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 transition-colors text-sm font-medium">Approve</button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        {{-- Reject Modal --}}
                        <div id="reject-{{ $request->id }}" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
                            <div class="bg-white rounded-xl p-6 w-full max-w-md shadow-2xl">
                                <h3 class="text-lg font-semibold mb-4">Reject Request</h3>
                                <form action="{{ route('admin.campaign-requests.reject', $request) }}" method="POST">
                                    @csrf
                                    <div class="mb-4">
                                        <label class="block text-sm font-medium text-gray-700 mb-2">Reason</label>
                                        <textarea name="admin_notes" rows="3" required class="w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 resize-none" placeholder="Reason for rejection..."></textarea>
                                    </div>
                                    <div class="flex justify-end gap-3">
                                        <button type="button" onclick="document.getElementById('reject-{{ $request->id }}').classList.add('hidden')" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors text-sm font-medium">Cancel</button>
                                        <button type="submit" class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors text-sm font-medium">Reject</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @empty
                        <tr>
                            <td colspan="9" class="py-16 text-center">
                                <div class="w-16 h-16 mx-auto bg-gray-50 rounded-2xl flex items-center justify-center mb-4">
                                    <svg class="w-8 h-8 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/></svg>
                                </div>
                                <p class="text-gray-500 font-medium">No campaign requests</p>
                                <p class="text-sm text-gray-400 mt-1">Vendor campaign requests will appear here</p>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if($requests->hasPages())
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $requests->links() }}
            </div>
            @endif
        </div>
    </div>
</div>
@endsection