@extends('layouts.app')

@section('title', 'Outward Gate Passes')

@push('plugin-styles')
<style>
    .select2-container .select2-selection--single{
        height: 42px !important;
    }
    .filter-btn {
        font-size: 14px;
        padding: 14px 12px; 
        line-height: 1;
    }
</style>
<link rel="stylesheet" href="{{ asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.css') }}">
<link rel="stylesheet" href="{{ asset('theme/vendors/flatpickr/flatpickr.min.css') }}">
<link rel="stylesheet" href="{{ asset('theme/vendors/select2/select2.min.css') }}">
@endpush

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Filters -->
            <div class="card mb-3">
                <div class="card-header">
                    <h6 class="card-title mb-0">Filters</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3 align-items-end">
                        <div class="col-md-3">
                            <label class="form-label">Status</label>
                            <select id="filterStatus" class="form-select">
                                <option value="all">All Statuses</option>
                                <option value="draft">Draft</option>
                                <option value="issued">Issued</option>
                                <option value="completed">Completed</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Customer</label>
                            <select id="filterCustomer" class="form-select">
                                <option value="">All Customers</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Date Range</label>
                            <input id="filterDateRange" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD">
                        </div>
                        {{-- <div class="col-md-3">
                            <button type="button" class="btn btn-primary" id="btnApplyFilters">
                                <i class="fas fa-search me-2"></i>Apply Filters
                            </button>
                            <button type="button" class="btn btn-outline-secondary ms-2" id="btnResetFilters">
                                <i class="fas fa-times me-2"></i>Clear Filters
                            </button>
                        </div> --}}

                       <div class="col-md-3 d-flex align-items-end gap-2">

    <button type="button" class="btn btn-primary filter-btn w-100" id="btnApplyFilters">
        <i class="fas fa-search me-1"></i> Apply
    </button>

    <button type="button" class="btn btn-outline-secondary filter-btn w-100" id="btnResetFilters">
        <i class="fas fa-times me-1"></i> Clear
    </button>

</div>

                    </div>
                </div>
            </div>

            <!-- Outward Gate Passes Table -->
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">Outward Gate Passes</h5>
                    <a href="{{ route('outward-gate-passes.create') }}" class="btn btn-primary">
                        <i class="fas fa-plus me-2"></i>Create Gate Pass
                    </a>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table class="table table-hover" id="outwardGatePassesTable">
                            <thead class="table-light">
                                <tr>
                                    <th>Gate Pass #</th>
                                    <th>Customer</th>
                                    <th>Invoice #</th>
                                    <th>Total Items</th>
                                    <th>Vehicle</th>
                                    <th>Driver</th>
                                    <th>Status</th>
                                    <th>Created At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('plugin-scripts')
<script src="{{ asset('theme/vendors/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables.net/dataTables.js') }}"></script>
<script src="{{ asset('theme/vendors/datatables.net-bs5/dataTables.bootstrap5.js') }}"></script>
<script src="{{ asset('theme/vendors/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ asset('theme/vendors/select2/select2.min.js') }}"></script>
<script>
$(document).ready(function() {
    // Initialize date range picker
    flatpickr('#filterDateRange', { mode: 'range', dateFormat: 'Y-m-d' });

    // Initialize select2 for customer filter
    $('#filterCustomer').select2({
        placeholder: 'Select Customer',
        allowClear: true
    });

    var table = $('#outwardGatePassesTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '{{ route("outward-gate-passes.index") }}',
            data: function(d) {
                d._token = $('meta[name="csrf-token"]').attr('content');
                d.status = $('#filterStatus').val();
                d.customer_id = $('#filterCustomer').val();
                const dr = document.getElementById('filterDateRange').value;
                if (dr && dr.includes(' to ')) {
                    const parts = dr.split(' to ');
                    d.date_from = parts[0];
                    d.date_to = parts[1];
                }
            }
        },
        columns: [
            {data: 'gate_pass_number', name: 'gate_pass_number'},
            {data: 'customer_name', name: 'customer_name'},
            {data: 'invoice_number', name: 'invoice_number'},
            {data: 'total_items', name: 'total_items'},
            {data: 'vehicle_no', name: 'vehicle_no'},
            {data: 'driver_name', name: 'driver_name'},
            {data: 'status_badge', name: 'status'},
            {data: 'created_at', name: 'created_at', render: function(data) { return new Date(data).toLocaleDateString(); }},
            {data: 'actions', name: 'actions', orderable: false, searchable: false}
        ],
        order: [[7, 'desc']], // Sort by issued_at desc
        pageLength: 25
    });

    // Filter event handlers
    $('#btnApplyFilters, #filterStatus').on('click change', function(){
        table.draw();
    });

    $('#filterCustomer').on('change', function(){
        table.draw();
    });

    $('#btnResetFilters').on('click', function(){
        $('#filterStatus').val('all');
        $('#filterCustomer').val('').trigger('change');
        document.getElementById('filterDateRange').value = '';
        table.draw();
    });
});
</script>
@endpush
