@extends('layouts.portal')

@section('title', 'Edit Requests')
@section('page_title', 'Edit Requests')
@section('page_subtitle', 'Manage client edit access requests')

@section('sidebar')
    @include('admin.partials.sidebar', ['active' => 'edit-requests'])
@endsection

@section('content')
    
    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4 flex items-center">
            <i class="fas fa-check-circle mr-2"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4 flex items-center">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            {{ session('error') }}
        </div>
    @endif

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Pending Approval</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['total_pending'] }}</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-clock text-yellow-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Approved</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['total_approved'] }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Rejected</p>
                    <p class="text-2xl font-bold text-gray-800">{{ $stats['total_rejected'] }}</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-times-circle text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-xl shadow-md p-6 border border-gray-100">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 mb-1">Total Revenue</p>
                    <p class="text-2xl font-bold text-gray-800">RM{{ number_format($stats['total_revenue'], 2) }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
                    <i class="fas fa-dollar-sign text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Requests Table -->
    <div class="bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden">
        <div class="bg-gray-800 px-6 py-4 border-b border-gray-700">
            <h3 class="text-lg font-semibold text-white">Edit Requests</h3>
        </div>
        
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Section</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Payment Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Request Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">OTP Verification</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($editRequests as $request)
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#{{ $request->id }}</td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600 font-bold text-xs mr-3">
                                    {{ substr($request->client->first_name ?? 'C', 0, 1) }}
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-900">{{ $request->client->first_name }} {{ $request->client->last_name }}</p>
                                    <p class="text-sm text-gray-500">{{ $request->client->email }}</p>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex flex-col gap-2">
                                <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 w-fit">
                                    {{ ucfirst($request->section_type) }}
                                </span>
                                @php
                                    $packages = \App\Models\PackagePurchase::where('edit_request_id', $request->id)->with('package')->get();
                                @endphp
                                @if($packages->count() > 0)
                                    <div class="text-xs text-gray-600 space-y-1">
                                        <p class="font-semibold">Packages:</p>
                                        @foreach($packages as $purchase)
                                            <span class="block px-2 py-1 bg-purple-100 text-purple-700 rounded">
                                                {{ $purchase->package->name ?? 'N/A' }}
                                            </span>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-semibold">
                            RM{{ number_format($request->amount, 2) }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ $request->payment_status === 'paid' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                {{ ucfirst($request->payment_status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full 
                                {{ $request->status === 'approved' ? 'bg-green-100 text-green-800' : 
                                   ($request->status === 'rejected' ? 'bg-red-100 text-red-800' : 
                                   ($request->status === 'cancelled' ? 'bg-gray-100 text-gray-800' :
                                   ($request->status === 'paid_pending_approval' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-800'))) }}">
                                {{ ucfirst(str_replace('_', ' ', $request->status)) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ $request->created_at->format('M d, Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                            @if($request->status === 'paid_pending_approval')
                                <form action="{{ route('admin.edit-requests.approve', $request) }}" method="POST" class="inline">
                                    @csrf
                                    <button type="submit" onclick="return confirm('Approve this edit request?')" class="text-green-600 hover:text-green-900 mr-3">
                                        <i class="fas fa-check-circle"></i> Approve
                                    </button>
                                </form>
                                <button onclick="rejectRequest({{ $request->id }})" class="text-red-600 hover:text-red-900">
                                    <i class="fas fa-times-circle"></i> Reject
                                </button>
                            @elseif($request->status === 'approved')
                                <span class="text-green-600 text-sm">
                                    <i class="fas fa-check-circle"></i> Approved
                                </span>
                            @elseif($request->status === 'rejected')
                                <span class="text-red-600 text-sm">
                                    <i class="fas fa-times-circle"></i> Rejected
                                </span>
                            @elseif($request->status === 'cancelled')
                                <span class="text-gray-500 text-sm">
                                    <i class="fas fa-ban"></i> Cancelled
                                </span>
                            @else
                                <span class="text-gray-400 text-sm">Pending Payment</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm">
                            @if($request->status === 'approved')
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span class="text-green-600 font-medium">Verified & Approved</span>
                                </div>
                            @elseif($request->payment_status === 'paid' && $request->otp_code)
                                <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
                                    <div class="flex items-center justify-between mb-2">
                                        <span class="text-yellow-800 font-medium">OTP Generated</span>
                                        <span class="font-mono text-lg text-blue-600">{{ $request->otp_code }}</span>
                                    </div>
                                    <div class="text-xs text-yellow-700">
                                        @if($request->otp_expires_at)
                                            <i class="fas fa-clock mr-1"></i>Expires: {{ \Carbon\Carbon::parse($request->otp_expires_at)->diffForHumans() }}
                                        @else
                                            <i class="fas fa-infinity mr-1"></i>No expiry
                                        @endif
                                    </div>
                                    <div class="mt-2 text-xs text-yellow-600">
                                        <i class="fas fa-info-circle mr-1"></i>Waiting for user verification
                                    </div>
                                </div>
                            @elseif($request->payment_status === 'paid' && !$request->otp_code)
                                <div class="flex items-center">
                                    <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                    <span class="text-green-600">Auto-Approved</span>
                                </div>
                            @else
                                <div class="flex items-center">
                                    <i class="fas fa-hourglass-half text-gray-400 mr-2"></i>
                                    <span class="text-gray-400">Pending Payment</span>
                                </div>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 block text-gray-300"></i>
                            No edit requests found
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        @if($editRequests->count() > 0)
        <div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
            <div class="flex items-center justify-between flex-wrap gap-4">
                <div class="text-sm text-gray-600">
                    Showing <span class="font-semibold">{{ $editRequests->firstItem() ?? 0 }}</span> to 
                    <span class="font-semibold">{{ $editRequests->lastItem() ?? 0 }}</span> of 
                    <span class="font-semibold">{{ $editRequests->total() }}</span> results
                </div>
                
                @if($editRequests->hasPages())
                <div class="flex gap-1">
                    {{-- Previous Page Link --}}
                    @if($editRequests->onFirstPage())
                        <button disabled class="px-3 py-2 bg-gray-300 text-gray-500 rounded text-sm cursor-not-allowed">
                            <i class="fas fa-chevron-left mr-1"></i>Previous
                        </button>
                    @else
                        <a href="{{ $editRequests->previousPageUrl() }}" class="px-3 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition">
                            <i class="fas fa-chevron-left mr-1"></i>Previous
                        </a>
                    @endif
                    
                    {{-- Page Numbers --}}
                    @php
                        $start = max(1, $editRequests->currentPage() - 2);
                        $end = min($editRequests->lastPage(), $editRequests->currentPage() + 2);
                        if ($start > 1) echo '<span class="px-2 py-2 text-gray-500">...</span>';
                    @endphp
                    
                    @for($i = $start; $i <= $end; $i++)
                        @if($i == $editRequests->currentPage())
                            <span class="px-3 py-2 bg-blue-600 text-white rounded text-sm font-medium">{{ $i }}</span>
                        @else
                            <a href="{{ $editRequests->url($i) }}" class="px-3 py-2 border border-gray-300 text-gray-700 rounded text-sm hover:bg-gray-100 transition">
                                {{ $i }}
                            </a>
                        @endif
                    @endfor
                    
                    @php
                        if ($end < $editRequests->lastPage()) echo '<span class="px-2 py-2 text-gray-500">...</span>';
                    @endphp
                    
                    {{-- Next Page Link --}}
                    @if($editRequests->hasMorePages())
                        <a href="{{ $editRequests->nextPageUrl() }}" class="px-3 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition">
                            Next<i class="fas fa-chevron-right ml-1"></i>
                        </a>
                    @else
                        <button disabled class="px-3 py-2 bg-gray-300 text-gray-500 rounded text-sm cursor-not-allowed">
                            Next<i class="fas fa-chevron-right ml-1"></i>
                        </button>
                    @endif
                </div>
                @endif
            </div>
        </div>
        @endif
    </div>
@endsection

<script>
function rejectRequest(requestId) {
    const reason = prompt('Please enter rejection reason:');
    if (reason) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '/admin/edit-requests/' + requestId + '/reject';
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
        if (csrfToken) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = '_token';
            input.value = csrfToken;
            form.appendChild(input);
        }
        
        const reasonInput = document.createElement('input');
        reasonInput.type = 'hidden';
        reasonInput.name = 'reason';
        reasonInput.value = reason;
        form.appendChild(reasonInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}
</script>