@extends('layouts.app')

@section('title', 'Customer Download Requests')

@section('nav-items')
    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li><a href="{{ route('admin.users.index') }}">Users</a></li>
    <li><a href="{{ route('admin.divisions.index') }}">Divisions</a></li>
    <li><a href="{{ route('admin.logos.index') }}">Logos</a></li>
    <li><a href="{{ route('admin.company-profiles.index') }}">Company Profile</a></li>
    <li><a href="{{ route('admin.customer-download-requests.index') }}" style="color: var(--primary);">Download Requests</a></li>
    <li><a href="{{ route('admin.marketing-requests.index') }}">Marketing Requests</a></li>
    <li><a href="{{ route('admin.media.index') }}">Media</a></li>
@endsection

@section('styles')
<style>
    .filters {
        background: white;
        padding: 1.5rem;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        align-items: end;
    }

    .filter-group {
        flex: 1;
        min-width: 150px;
    }

    .filter-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .filter-group select {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .requests-table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--gray-200);
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: var(--gray-50);
    }

    th {
        padding: 1rem;
        text-align: left;
        font-weight: 600;
        font-size: 0.875rem;
        color: var(--gray-700);
        border-bottom: 1px solid var(--gray-200);
    }

    td {
        padding: 1rem;
        border-bottom: 1px solid var(--gray-200);
        font-size: 0.875rem;
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    tbody tr:hover {
        background: var(--gray-50);
    }

    .badge {
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        display: inline-block;
    }

    .badge-pending {
        background: rgba(245, 158, 11, 0.1);
        color: var(--warning);
    }

    .badge-approved {
        background: rgba(5, 150, 105, 0.1);
        color: var(--success);
    }

    .badge-rejected {
        background: rgba(220, 38, 38, 0.1);
        color: var(--error);
    }

    .resource-type {
        padding: 0.25rem 0.75rem;
        background: rgba(227, 27, 35, 0.1);
        color: var(--primary);
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: capitalize;
    }

    .action-btns {
        display: flex;
        gap: 0.5rem;
    }

    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
        text-decoration: none;
        display: inline-block;
    }

    .btn-success {
        background: var(--success);
        color: white;
    }

    .btn-success:hover {
        background: #047857;
    }

    .btn-danger {
        background: var(--error);
        color: white;
    }

    .btn-danger:hover {
        background: #b91c1c;
    }

    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
        align-items: center;
        justify-content: center;
    }

    .modal.active {
        display: flex;
    }

    .modal-content {
        background: white;
        border-radius: 12px;
        padding: 2rem;
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: 1.5rem;
    }

    .form-group {
        margin-bottom: 1rem;
    }

    .form-group label {
        display: block;
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0.5rem;
        color: var(--gray-700);
    }

    .form-group textarea {
        width: 100%;
        padding: 0.625rem 0.875rem;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        font-size: 0.875rem;
        min-height: 100px;
        resize: vertical;
    }

    .empty-state {
        text-align: center;
        padding: 3rem;
        color: var(--gray-500);
    }

    @media (max-width: 768px) {
        .requests-table {
            overflow-x: auto;
        }
        table {
            min-width: 1000px;
        }
    }
</style>
@endsection

@section('content')
<h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: var(--gray-900);">
    Customer Download Requests
</h1>

<!-- Filters -->
<form method="GET" class="filters">
    <div class="filter-group">
        <label for="status">Status</label>
        <select name="status" id="status" onchange="this.form.submit()">
            <option value="">All Status</option>
            <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
            <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Approved</option>
            <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
        </select>
    </div>

    <div class="filter-group">
        <label for="resource_type">Resource Type</label>
        <select name="resource_type" id="resource_type" onchange="this.form.submit()">
            <option value="">All Types</option>
            <option value="division_file" {{ request('resource_type') == 'division_file' ? 'selected' : '' }}>Division File</option>
            <option value="logo" {{ request('resource_type') == 'logo' ? 'selected' : '' }}>Logo</option>
            <option value="company_profile" {{ request('resource_type') == 'company_profile' ? 'selected' : '' }}>Company Profile</option>
        </select>
    </div>

    @if(request()->hasAny(['status', 'resource_type']))
        <div class="filter-group">
            <a href="{{ route('admin.customer-download-requests.index') }}" class="btn btn-secondary" style="width: 100%; text-align: center;">
                Clear Filters
            </a>
        </div>
    @endif
</form>

<!-- Requests Table -->
<div class="requests-table">
    <table>
        <thead>
            <tr>
                <th>Customer</th>
                <th>Resource</th>
                <th>Type</th>
                <th>Status</th>
                <th>Requested</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($requests as $req)
                <tr>
                    <td>
                        <div style="font-weight: 600; color: var(--gray-900);">{{ $req->name }}</div>
                        <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $req->email }}</div>
                        @if($req->company)
                            <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $req->company }}</div>
                        @endif
                    </td>
                    <td>
                        <div style="font-weight: 500; color: var(--gray-900);">{{ $req->resource_name }}</div>
                    </td>
                    <td>
                        <span class="resource-type">{{ str_replace('_', ' ', $req->resource_type) }}</span>
                    </td>
                    <td>
                        <span class="badge badge-{{ $req->status }}">{{ ucfirst($req->status) }}</span>
                    </td>
                    <td>
                        <div>{{ $req->created_at->format('M d, Y') }}</div>
                        <div style="font-size: 0.75rem; color: var(--gray-500);">{{ $req->created_at->diffForHumans() }}</div>
                    </td>
                    <td>
                        @if($req->isPending())
                            <div class="action-btns">
                                <button onclick="openApproveModal({{ $req->id }})" class="btn-sm btn-success">
                                    Approve
                                </button>
                                <button onclick="openRejectModal({{ $req->id }})" class="btn-sm btn-danger">
                                    Reject
                                </button>
                            </div>
                        @else
                            @if($req->approver)
                                <div style="font-size: 0.75rem; color: var(--gray-500);">
                                    {{ $req->status === 'approved' ? 'Approved' : 'Rejected' }} by {{ $req->approver->name }}
                                </div>
                                <div style="font-size: 0.75rem; color: var(--gray-500);">
                                    {{ $req->approved_at->format('M d, Y') }}
                                </div>
                            @endif
                        @endif
                    </td>
                </tr>
            @empty
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <svg style="width: 48px; height: 48px; margin: 0 auto 1rem; color: var(--gray-400);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            <p>No download requests found</p>
                        </div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<!-- Pagination -->
@if($requests->hasPages())
    <div style="margin-top: 1.5rem; display: flex; justify-content: center;">
        {{ $requests->links() }}
    </div>
@endif

<!-- Approve Modal -->
<div id="approveModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">Approve Download Request</div>
        <form method="POST" id="approveForm">
            @csrf
            <div class="form-group">
                <label for="approve_notes">Admin Notes (Optional)</label>
                <textarea id="approve_notes" name="admin_notes" placeholder="Add any notes about this approval..."></textarea>
            </div>
            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
                <button type="submit" class="btn btn-primary">Approve & Send OTP</button>
                <button type="button" onclick="closeModal('approveModal')" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>

<!-- Reject Modal -->
<div id="rejectModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">Reject Download Request</div>
        <form method="POST" id="rejectForm">
            @csrf
            <div class="form-group">
                <label for="reject_notes">Rejection Reason (Optional)</label>
                <textarea id="reject_notes" name="admin_notes" placeholder="Provide a reason for rejection..."></textarea>
            </div>
            <div style="display: flex; gap: 1rem; margin-top: 1.5rem;">
                <button type="submit" class="btn" style="background: var(--error); color: white;">Reject Request</button>
                <button type="button" onclick="closeModal('rejectModal')" class="btn btn-secondary">Cancel</button>
            </div>
        </form>
    </div>
</div>

<script>
function openApproveModal(requestId) {
    // Build URL directly - route parameter is now named 'downloadRequest'
    const baseUrl = '{{ url("/admin/customer-download-requests") }}';
    document.getElementById('approveForm').action = baseUrl + '/' + requestId + '/approve';
    document.getElementById('approveModal').classList.add('active');
}

function openRejectModal(requestId) {
    // Build URL directly - route parameter is now named 'downloadRequest'
    const baseUrl = '{{ url("/admin/customer-download-requests") }}';
    document.getElementById('rejectForm').action = baseUrl + '/' + requestId + '/reject';
    document.getElementById('rejectModal').classList.add('active');
}

function closeModal(modalId) {
    document.getElementById(modalId).classList.remove('active');
}

// Close modal on outside click
document.getElementById('approveModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal('approveModal');
});

document.getElementById('rejectModal').addEventListener('click', function(e) {
    if (e.target === this) closeModal('rejectModal');
});
</script>
@endsection