@extends('admin.layouts.base')
@section('title', 'Warehouse Extension Requests')

@section('content')
    <div class="card">
        <div class="card-header border-0 pt-6">
            <div class="card-title">
                <h3 class="fw-bold">Warehouse Extension Requests</h3>
            </div>
            <div class="card-toolbar">
                <a href="{{ route('admin.warehouse-bookings.index') }}" class="btn btn-light">
                    <i class="fas fa-warehouse me-2"></i> All Bookings
                </a>
            </div>
        </div>

        <div class="card-body py-4">
            {{-- Statistics Cards Row --}}
            <div class="row g-3 mb-6">
                <div class="col-md-3">
                    <div class="card border border-primary">
                        <div class="card-body text-center p-4">
                            <h6 class="text-muted fw-semibold mb-2">Total Requests</h6>
                            <h2 class="mb-0 text-primary">{{ $statistics['total'] ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border border-warning">
                        <div class="card-body text-center p-4">
                            <h6 class="text-muted fw-semibold mb-2">Awaiting Approval</h6>
                            <h2 class="mb-0 text-warning">{{ $statistics['awaiting'] ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border border-success">
                        <div class="card-body text-center p-4">
                            <h6 class="text-muted fw-semibold mb-2">Approved</h6>
                            <h2 class="mb-0 text-success">{{ $statistics['approved'] ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="card border border-danger">
                        <div class="card-body text-center p-4">
                            <h6 class="text-muted fw-semibold mb-2">Rejected</h6>
                            <h2 class="mb-0 text-danger">{{ $statistics['rejected'] ?? 0 }}</h2>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filter Tabs --}}
            <ul class="nav nav-pills mb-4">
                <li class="nav-item">
                    <a class="nav-link {{ !request('status') ? 'active' : '' }}"
                        href="{{ route('admin.warehouse-extensions.index') }}">All</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request('status') === 'pending' ? 'active' : '' }}"
                        href="{{ route('admin.warehouse-extensions.index', ['status' => 'pending']) }}">Pending</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request('status') === 'approved' ? 'active' : '' }}"
                        href="{{ route('admin.warehouse-extensions.index', ['status' => 'approved']) }}">Approved</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request('status') === 'rejected' ? 'active' : '' }}"
                        href="{{ route('admin.warehouse-extensions.index', ['status' => 'rejected']) }}">Rejected</a>
                </li>
            </ul>

            {{-- Table --}}
            <div class="table-responsive">
                <table class="table align-middle table-row-dashed fs-6 gy-5">
                    <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                            <th class="min-w-50px">#</th>
                            <th class="min-w-150px">Customer</th>
                            <th class="min-w-100px">Booking</th>
                            <th class="min-w-150px">Warehouse</th>
                            <th class="min-w-150px">Dates</th>
                            <th class="min-w-80px text-center">Days</th>
                            <th class="min-w-100px text-end">Cost</th>
                            <th class="text-center min-w-100px">Status</th>
                            <th class="text-center min-w-150px">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($extensionRequests as $request)
                            <tr>
                                <td><strong>#{{ $request->id }}</strong></td>
                                <td>
                                    <div class="fw-bold">{{ $request->user->fullname }}</div>
                                    <small class="text-muted">{{ $request->user->email }}</small>
                                </td>
                                <td><span class="badge badge-light-primary">{{ $request->booking->booking_code }}</span>
                                </td>
                                <td>{{ $request->booking->warehouse->name }}</td>
                                <td>
                                    <div class="text-muted">{{ $request->current_end_date->format('M d, Y') }} →</div>
                                    <div class="fw-bold">{{ $request->requested_end_date->format('M d, Y') }}</div>
                                </td>
                                <td class="text-center">
                                    <span class="badge badge-light-info">{{ $request->additional_days }} days</span>
                                </td>
                                <td class="text-end"><strong>${{ number_format($request->additional_amount, 2) }}</strong>
                                </td>
                                <td class="text-center">
                                    @php
                                        $badges = [
                                            'pending' => 'warning',
                                            'escalated' => 'danger',
                                            'approved' => 'success',
                                            'rejected' => 'secondary',
                                        ];
                                        $color = $badges[$request->status] ?? 'dark';
                                    @endphp
                                    <span
                                        class="badge badge-light-{{ $color }}">{{ ucfirst($request->status) }}</span>
                                </td>
                                <td class="text-center">
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-primary view-btn"
                                            data-id="{{ $request->id }}" title="View Details">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        @if ($request->canBeApproved())
                                            <button type="button" class="btn btn-sm btn-success approve-btn"
                                                data-id="{{ $request->id }}" title="Approve">
                                                <i class="fas fa-check"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger reject-btn"
                                                data-id="{{ $request->id }}" title="Reject">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center py-5">
                                    <p class="text-muted">No extension requests found.</p>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

    {{-- View Details Modal --}}
    <div class="modal fade" id="view_modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>Extension Request Details</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body" id="view_modal_body">
                    <div class="text-center py-5">
                        <span class="spinner-border spinner-border-sm"></span>
                        <p class="mt-2">Loading...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Approve Modal --}}
    <div class="modal fade" id="approve_modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <form id="approveForm">
                    @csrf
                    <div class="modal-header">
                        <h2>Approve Extension Request</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="approve_id">
                        <div class="mb-5">
                            <label class="form-label">Admin Notes</label>
                            <textarea name="admin_notes" class="form-control" rows="3" placeholder="Optional notes..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Approve Request</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Reject Modal --}}
    <div class="modal fade" id="reject_modal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered mw-650px">
            <div class="modal-content">
                <form id="rejectForm">
                    @csrf
                    <div class="modal-header">
                        <h2>Reject Extension Request</h2>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" id="reject_id">
                        <div class="mb-5">
                            <label class="form-label required">Rejection Reason</label>
                            <textarea name="admin_notes" class="form-control" rows="3" placeholder="Explain why..." required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger">Reject Request</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const viewModal = new bootstrap.Modal(document.getElementById('view_modal'));
        const approveModal = new bootstrap.Modal(document.getElementById('approve_modal'));
        const rejectModal = new bootstrap.Modal(document.getElementById('reject_modal'));

        // View Details
        $(document).on('click', '.view-btn', function() {
            const id = $(this).data('id');
            $('#view_modal_body').html('<div class="text-center py-5"><span class="spinner-border"></span></div>');
            viewModal.show();

            $.get(`/admin/warehouse-extensions/${id}`)
                .done(html => $('#view_modal_body').html(html))
                .fail(() => $('#view_modal_body').html(
                    '<p class="text-danger text-center">Error loading details</p>'));
        });

        //Approve
        $(document).on('click', '.approve-btn', function() {
            $('#approve_id').val($(this).data('id'));
            $('#approveForm')[0].reset();
            approveModal.show();
        });

        $('#approveForm').on('submit', function(e) {
            e.preventDefault();
            const id = $('#approve_id').val();
            const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

            $.post(`/admin/warehouse-extensions/${id}/approve`, $(this).serialize())
                .done(res => {
                    approveModal.hide();
                    Swal.fire('Approved!', res.message || 'Extension approved!', 'success').then(() => location
                        .reload());
                })
                .fail(xhr => Swal.fire('Error!', xhr.responseJSON?.message || 'Failed', 'error'))
                .always(() => $btn.prop('disabled', false));
        });

        // Reject
        $(document).on('click', '.reject-btn', function() {
            $('#reject_id').val($(this).data('id'));
            $('#rejectForm')[0].reset();
            rejectModal.show();
        });

        $('#rejectForm').on('submit', function(e) {
            e.preventDefault();
            const id = $('#reject_id').val();
            const $btn = $(this).find('button[type="submit"]').prop('disabled', true);

            $.post(`/admin/warehouse-extensions/${id}/reject`, $(this).serialize())
                .done(res => {
                    rejectModal.hide();
                    Swal.fire('Rejected!', res.message || 'Extension rejected.', 'success').then(() => location
                        .reload());
                })
                .fail(xhr => Swal.fire('Error!', xhr.responseJSON?.message || 'Failed', 'error'))
                .always(() => $btn.prop('disabled', false));
        });
    </script>
@endpush