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

@section('content')
<div id="kt_app_content_container" class="app-container">
    <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">
                    All Bookings
                </a>
            </div>
        </div>

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

            <ul class="nav nav-pills mb-6" id="status-tabs">
                <li class="nav-item">
                    <a class="nav-link active" data-status="all" href="#">All</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="pending" href="#">Pending</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="approved" href="#">Approved</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-status="rejected" href="#">Rejected</a>
                </li>
            </ul>

            <div class="row align-items-end mb-6">
                <div class="col-lg-5">
                    <input type="text" id="search_input" class="form-control" placeholder="Search by customer, booking code, or warehouse...">
                </div>
                <div class="col-lg-7 text-lg-end mt-4 mt-lg-0">
                    <button type="button" id="apply_filters" class="btn btn-primary me-3">
                        Apply Filters
                    </button>
                    <button type="button" id="reset_filters" class="btn btn-secondary">
                        Reset
                    </button>
                </div>
            </div>

            <table class="table align-middle table-row-dashed fs-6 gy-5" id="extensions_table">
                <thead>
                    <tr class="text-start text-muted fw-bold fs-7 text-uppercase">
                        <th class="text-center">#</th>
                        <th>Customer</th>
                        <th>Booking</th>
                        <th>Warehouse</th>
                        <th>Dates</th>
                        <th class="text-center">Days</th>
                        <th class="text-end">Cost</th>
                        <th class="text-center">Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <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"></span> Loading...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <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>

    <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>
</div>
@endsection

@push('scripts')
<script>
let table;
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'));
var baseUrl = "{{ url('/') }}";

$(document).ready(function () {
    table = $('#extensions_table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("admin.warehouse-extensions.data") }}',
            data: function (d) {
                d.custom_search = $('#search_input').val().trim();
                d.status = $('#status-tabs .nav-link.active').data('status');
            }
        },
        columns: [
            { data: 'sr_no', className: 'text-center' },
            { data: 'customer' },
            { data: 'booking' },
            { data: 'warehouse' },
            { data: 'dates' },
            { data: 'days', className: 'text-center' },
            { data: 'cost', className: 'text-end' },
            { data: 'status', className: 'text-center' },
            { data: 'actions', className: 'text-center', orderable: false, searchable: false }
        ],
        language: {
            processing: '<div class="spinner-border text-primary"></div>',
            emptyTable: 'No extension requests found',
            zeroRecords: 'No matching requests found'
        },
        pageLength: 25,
        lengthMenu: [10, 25, 50, 100]
    });

    $('#status-tabs .nav-link').on('click', function (e) {
        e.preventDefault();
        $('#status-tabs .nav-link').removeClass('active');
        $(this).addClass('active');
        table.ajax.reload();
    });

    $('#apply_filters').on('click', function () {
        table.ajax.reload();
    });

    $('#reset_filters').on('click', function () {
        $('#search_input').val('');
        $('#status-tabs .nav-link').removeClass('active');
        $('#status-tabs .nav-link[data-status="all"]').addClass('active');
        table.ajax.reload();
    });

    $('#search_input').on('keyup', function (e) {
        if (e.key === 'Enter') {
            table.ajax.reload();
        }
    });

    $(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(baseUrl+ `/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>'));
    });

    $(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(baseUrl +`/admin/warehouse-extensions/${id}/approve`, $(this).serialize())
            .done(res => {
                approveModal.hide();
                toastr.success(res.message || 'Extension approved successfully!');
                table.ajax.reload();
            })
            .fail(xhr => toastr.error(xhr.responseJSON?.message || 'Approval failed'))
            .always(() => $btn.prop('disabled', false));
    });

    $(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(baseUrl +`/admin/warehouse-extensions/${id}/reject`, $(this).serialize())
            .done(res => {
                rejectModal.hide();
                toastr.success(res.message || 'Extension rejected.');
                table.ajax.reload();
            })
            .fail(xhr => toastr.error(xhr.responseJSON?.message || 'Rejection failed'))
            .always(() => $btn.prop('disabled', false));
    });
});
</script>
@endpush