@extends('layouts.admin')

@section('page-title', 'Campaign Request Details')

@section('content')
<div class="py-6">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center gap-3 mb-6">
            <a href="{{ route('admin.campaign-requests.index') }}" class="inline-flex items-center justify-center w-9 h-9 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </a>
            <h2 class="text-2xl font-bold text-gray-900 tracking-tight">Campaign Request</h2>
        </div>

        <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">Request Details</h4>
            </div>

            <div class="p-6">
                <div class="grid grid-cols-2 gap-6">
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Campaign</p>
                        <p class="font-semibold text-gray-900">
                            @if($campaignRequest->campaign)
                                <a href="{{ route('admin.campaigns.edit', $campaignRequest->campaign) }}" class="text-indigo-600 hover:underline">{{ $campaignRequest->campaign->name }}</a>
                            @else
                                <span class="text-gray-400">Not assigned</span>
                            @endif
                        </p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Status</p>
                        @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[$campaignRequest->status] ?? 'bg-gray-100 text-gray-700' }}">
                            {{ ucfirst($campaignRequest->status) }}
                        </span>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Seller</p>
                        <p class="font-semibold text-gray-900">{{ $campaignRequest->vendor->user->name ?? $campaignRequest->vendor->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Shop</p>
                        <p class="font-semibold text-gray-900">{{ $campaignRequest->vendor->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Product</p>
                        <p class="font-semibold text-gray-900">{{ $campaignRequest->product->name ?? '-' }}</p>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Discount</p>
                        <p class="font-semibold text-gray-900">
                            @if($campaignRequest->discount)
                                {{ $campaignRequest->discount }}{{ $campaignRequest->discount_type === 'percentage' ? '%' : '' }}
                                <span class="text-xs text-gray-400 capitalize">({{ $campaignRequest->discount_type }})</span>
                            @else
                                <span class="text-gray-400">-</span>
                            @endif
                        </p>
                    </div>
                    <div class="col-span-2">
                        <p class="text-sm text-gray-500 mb-1">Description</p>
                        <p class="text-gray-700 bg-gray-50 p-3 rounded-lg">{{ $campaignRequest->description ?: '-' }}</p>
                    </div>
                    @if($campaignRequest->admin_notes)
                    <div class="col-span-2">
                        <p class="text-sm text-gray-500 mb-1">Admin Notes</p>
                        <p class="text-gray-700 bg-gray-50 p-3 rounded-lg">{{ $campaignRequest->admin_notes }}</p>
                    </div>
                    @endif
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Requested</p>
                        <p class="font-semibold text-gray-900">{{ $campaignRequest->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    @if($campaignRequest->approved_at)
                    <div>
                        <p class="text-sm text-gray-500 mb-1">Approved</p>
                        <p class="font-semibold text-gray-900">{{ $campaignRequest->approved_at->format('M d, Y H:i') }}</p>
                        <p class="text-xs text-gray-400">by {{ $campaignRequest->approver->name ?? 'Admin' }}</p>
                    </div>
                    @endif
                </div>
            </div>

            @if($campaignRequest->status === 'pending')
            <div class="px-6 py-4 border-t border-gray-200 bg-gray-50 flex justify-end gap-3">
                <button onclick="document.getElementById('reject-modal').classList.remove('hidden')" class="px-4 py-2 border border-red-300 text-red-600 rounded-lg hover:bg-red-50 transition-colors text-sm font-medium">Reject</button>
                <button onclick="document.getElementById('approve-modal').classList.remove('hidden')" 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>
            @endif
        </div>
    </div>
</div>

{{-- Approve Modal --}}
<div id="approve-modal" 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', $campaignRequest) }}" 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">
                    <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 resize-none"></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('approve-modal').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-modal" 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', $campaignRequest) }}" 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 resize-none" placeholder="Reason for rejection..."></textarea>
            </div>
            <div class="flex justify-end gap-3">
                <button type="button" onclick="document.getElementById('reject-modal').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>
@endsection