@extends('layout.app')
@section('title', 'Vehicle Remarks')

@push('header_script')
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/datatables/buttons/dataTables.bs5-custom.css') }}">
    <link rel="stylesheet" href="{{ asset('theme/assets/sweetalert/sweet-alert.css') }}" type="text/css">
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
    <style>
        table.table-bordered th, 
        table.table-bordered td {
            border: 1px solid #e2e8f0 !important;
            vertical-align: middle;
        }
        table.table-bordered thead th {
            background-color: #f8fafc !important;
            font-weight: 600;
            border-bottom: 2px solid #cbd5e1 !important;
        }
    </style>
@endpush

@section('content')
<div class="app-hero-header d-flex align-items-center">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);">Fleet Management</a></li>
        <li class="breadcrumb-item active" aria-current="page">Multiple Remark List</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('vehicle-remarks.create') }}" class="btn btn-primary btn-sm">
            <i class="ri-add-line"></i> + Add Remark
        </a>
    </div>
</div>

<div class="app-body">
    <div class="row gx-3">
        <!-- Top Filter Bar matching Freight Entry -->
        <div class="col-sm-3 col-md-2">
            <label class="form-label" for="date_period">Period</label>
            <select id="date_period" class="form-select">
                <option value="all" selected>All</option>
                <option value="today">Today</option>
                <option value="yesterday">Yesterday</option>
                <option value="last_7">Last 7 Days</option>
                <option value="last_30">Last 30 Days</option>
                <option value="this_month">This Month</option>
                <option value="last_month">Last Month</option>
                <option value="custom">Custom Range</option>
            </select>
        </div>
        <div class="col-sm-3 col-md-2">
            <label class="form-label" for="from_date">From Date</label>
            <input type="text" id="from_date" class="form-control datepicker" value="01-04-{{ date('m') < 4 ? date('Y') - 1 : date('Y') }}">
        </div>
        <div class="col-sm-3 col-md-2">
            <label class="form-label" for="to_date">To Date</label>
            <input type="text" id="to_date" class="form-control datepicker" value="{{ date('d-m-Y') }}">
        </div>
        <div class="col-sm-3 col-md-3">
            <label class="form-label" for="filter_vehicle_id">Filter by Vehicle No.</label>
            <select id="filter_vehicle_id" class="form-select select2">
                <option value="">--All Vehicles--</option>
                @foreach($vehicles as $id => $vNo)
                    <option value="{{ $id }}">{{ $vNo }}</option>
                @endforeach
            </select>
        </div>

        <div class="col-sm-12 mt-3">
            <ul class="nav nav-tabs" id="remarksTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active fw-bold" id="tab-vehicle-list" data-bs-toggle="tab" data-bs-target="#pane-vehicle-list" type="button" role="tab">
                        <i class="ri-truck-line me-1"></i> 1. Vehicle List
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link fw-bold" id="tab-all-remarks" data-bs-toggle="tab" data-bs-target="#pane-all-remarks" type="button" role="tab">
                        <i class="ri-chat-quote-line me-1"></i> 2. All Remarks History
                    </button>
                </li>
            </ul>

            <div class="tab-content bg-white border border-top-0 p-3" id="remarksTabsContent">
                
                <!-- TAB 1: VEHICLE LIST -->
                <div class="tab-pane fade show active" id="pane-vehicle-list" role="tabpanel">
                    <div class="table-responsive">
                        <table id="datatable" class="table table-bordered table-striped truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th width="70" class="text-center">S.No</th>
                                    <th>Owner Name</th>
                                    <th>Truck Number</th>
                                    <th width="150" class="text-center">Total Remarks</th>
                                    <th width="150" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

                <!-- TAB 2: ALL REMARKS HISTORY -->
                <div class="tab-pane fade" id="pane-all-remarks" role="tabpanel">
                    <div class="table-responsive">
                        <table id="allRemarksTable" class="table table-bordered table-striped truncate m-0 align-middle w-100">
                            <thead>
                                <tr>
                                    <th width="60" class="text-center">S.no.</th>
                                    <th width="130" class="text-center">Date</th>
                                    <th width="160">Truck No.</th>
                                    <th>Remark</th>
                                    <th width="140">Added By</th>
                                    <th width="140" class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>

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

<!-- Lightbox Modal for Photos -->
<div class="modal fade" id="photoModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header py-2 bg-primary text-white">
                <h6 class="modal-title fw-bold text-white">Attachment Preview</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center p-2">
                <img id="photoModalImg" src="" class="img-fluid rounded" style="max-height: 75vh; object-fit: contain;">
            </div>
        </div>
    </div>
</div>
@endsection

@push('footer_script')
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/datatables/custom/custom-datatables.js') }}"></script>
<script src="{{ asset('theme/assets/sweetalert/sweet-alert.min.js') }}"></script>
<script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
<script>
function showPhoto(imgUrl) {
    if (!imgUrl) return;
    if (imgUrl.toLowerCase().endsWith('.pdf')) {
        window.open(imgUrl, '_blank');
    } else {
        $('#photoModalImg').attr('src', imgUrl);
        var modal = new bootstrap.Modal(document.getElementById('photoModal'));
        modal.show();
    }
}

function getCommonFilters() {
    return {
        startdate: moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD"),
        enddate: moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD"),
        vehicle_id: $('#filter_vehicle_id').val()
    };
}

function initAllRemarksTable() {
    $('#allRemarksTable').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        responsive: true,
        ajax: {
            url: "{{ route('vehicle-remarks.getData') }}",
            data: function(d) {
                Object.assign(d, getCommonFilters());
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center', searchable: false},
            {data: 'date', name: 'date', className: 'text-center'},
            {data: 'vehicle_no', name: 'vehicle_no'},
            {data: 'remark', name: 'remark'},
            {data: 'user_name', name: 'user_name'},
            {data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false}
        ],
        order: [[1, 'desc']]
    });
}

$(document).ready(function() {
    $('#from_date, #to_date').daterangepicker({
        singleDatePicker: true,
        autoUpdateInput: true,
        locale: { format: 'DD-MM-YYYY' }
    });

    $('#date_period').on('change', function() {
        var val = $(this).val();
        var start, end;

        switch (val) {
            case 'today':
                start = moment();
                end = moment();
                break;
            case 'yesterday':
                start = moment().subtract(1, 'days');
                end = moment().subtract(1, 'days');
                break;
            case 'last_7':
                start = moment().subtract(6, 'days');
                end = moment();
                break;
            case 'last_30':
                start = moment().subtract(29, 'days');
                end = moment();
                break;
            case 'this_month':
                start = moment().startOf('month');
                end = moment().endOf('month');
                break;
            case 'last_month':
                start = moment().subtract(1, 'month').startOf('month');
                end = moment().subtract(1, 'month').endOf('month');
                break;
            case 'all':
                start = moment("01-04-2026", "DD-MM-YYYY");
                end = moment();
                break;
            default:
                return;
        }

        $('#from_date').data('daterangepicker').setStartDate(start);
        $('#from_date').data('daterangepicker').setEndDate(start);
        $('#from_date').val(start.format('DD-MM-YYYY'));

        $('#to_date').data('daterangepicker').setStartDate(end);
        $('#to_date').data('daterangepicker').setEndDate(end);
        $('#to_date').val(end.format('DD-MM-YYYY'));

        reloadAllTables();
    });

    $('#from_date, #to_date, #filter_vehicle_id').on('apply.daterangepicker change', function() {
        reloadAllTables();
    });

    // Tab Event Listeners matching Freight Entry pattern
    $('button[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        let target = $(e.target).attr("data-bs-target");
        
        if (target === "#pane-all-remarks") {
            if (!$.fn.DataTable.isDataTable('#allRemarksTable')) {
                initAllRemarksTable();
            } else {
                $('#allRemarksTable').DataTable().columns.adjust().draw(false);
            }
        } else if (target === "#pane-vehicle-list") {
            $('#datatable').DataTable().columns.adjust().draw(false);
        }
    });

    // Initialize Main Vehicle DataTable
    $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        responsive: true,
        ajax: "{{ route('vehicle-remarks.getVehicleData') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', className: 'text-center', searchable: false},
            {data: 'owner_name', name: 'owner_name'},
            {data: 'vehicle_no', name: 'vehicle_no'},
            {data: 'total_remarks', name: 'total_remarks', className: 'text-center', orderable: false, searchable: false},
            {data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false}
        ]
    });
});

function reloadAllTables() {
    if ($.fn.DataTable.isDataTable('#datatable')) {
        $('#datatable').DataTable().ajax.reload();
    }
    if ($.fn.DataTable.isDataTable('#allRemarksTable')) {
        $('#allRemarksTable').DataTable().ajax.reload();
    }
}

function deleteRemark(id) {
    swal({
        title: "Are you sure?",
        text: "You want to delete this remark record?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        closeOnConfirm: false
    }, function() {
        $.ajax({
            url: '{{ url("vehicle-remarks") }}/' + id,
            type: 'DELETE',
            data: { _token: "{{ csrf_token() }}" },
            success: function() {
                reloadAllTables();
                swal("Deleted!", "Remark has been deleted.", "success");
            },
            error: function() {
                swal("Error!", "Could not delete this remark.", "error");
            }
        });
    });
}
</script>
@endpush