@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/daterange/daterange.css')}}">
@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">Vehicle Remarks</li>
    </ol>
    <div class="ms-auto">
        <a href="{{ route('fleet-management.remarks.create') }}" class="btn btn-primary btn-sm">
            <i class="ri-add-line"></i> + Add Remark
        </a>
    </div>
</div>

<div class="app-body">
    @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="ri-checkbox-circle-line me-2"></i> {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="row gx-3">
        <div class="col-12">
            <div class="card">
                <div class="card-header p-2 bg-light border-bottom">
                    <ul class="nav nav-tabs card-header-tabs" id="remarksTabs" role="tablist">
                        <li class="nav-item">
                            <button class="nav-link active fw-bold" id="vehicles-tab" data-bs-toggle="tab" data-bs-target="#vehicles-pane" type="button" role="tab">
                                <i class="ri-truck-line me-1"></i> Vehicle List
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="nav-link fw-bold" id="all-remarks-tab" data-bs-toggle="tab" data-bs-target="#all-remarks-pane" type="button" role="tab">
                                <i class="ri-chat-quote-line me-1"></i> All Remarks History
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="remarksTabsContent">
                        
                        <!-- TAB 1: VEHICLE LIST -->
                        <div class="tab-pane fade show active" id="vehicles-pane" role="tabpanel">
                            <div class="table-responsive">
                                <table id="vehicleRemarksTable" class="table table-bordered table-hover truncate m-0 align-middle w-100">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="60">S.No</th>
                                            <th>Owner Name</th>
                                            <th>Truck Number</th>
                                            <th>Total Remarks</th>
                                            <th width="140" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                        <!-- TAB 2: ALL REMARKS HISTORY -->
                        <div class="tab-pane fade" id="all-remarks-pane" role="tabpanel">
                            <!-- Filters -->
                            <div class="row g-2 mb-3 bg-light p-2 rounded border">
                                <div class="col-md-3">
                                    <label class="form-label small mb-1 fw-bold">Date Range</label>
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="filter_remark_date_range" class="form-control" placeholder="Select Date Range">
                                        <span class="input-group-text"><i class="ri-calendar-line"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label small mb-1 fw-bold">Truck Number</label>
                                    <select id="filter_remark_vehicle_id" class="form-select form-select-sm">
                                        <option value="">All Trucks</option>
                                        @foreach($vehicles as $id => $vNo)
                                            <option value="{{ $id }}">{{ $vNo }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3 d-flex align-items-end gap-1">
                                    <button type="button" class="btn btn-sm btn-primary" onclick="applyRemarksFilter()">
                                        <i class="ri-filter-line"></i> Filter
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="resetRemarksFilter()">
                                        <i class="ri-refresh-line"></i> Reset
                                    </button>
                                </div>
                            </div>

                            <div class="table-responsive">
                                <table id="allRemarksTable" class="table table-bordered table-hover truncate m-0 align-middle w-100" style="font-size: 13px;">
                                    <thead class="table-light">
                                        <tr>
                                            <th width="50">S.No</th>
                                            <th width="110">Date</th>
                                            <th width="140">Truck No.</th>
                                            <th>Remark</th>
                                            <th width="120" class="text-center">Photo / Docs</th>
                                            <th width="120">Added By</th>
                                            <th width="80" class="text-center">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>

                    </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">
                <h6 class="modal-title fw-bold">Remark Attachment Preview</h6>
                <button type="button" class="btn-close" 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/daterange/daterange.js')}}"></script>
<script src="{{asset('theme/assets/vendor/daterange/custom-daterange.js')}}"></script>
<script>
var remarkStartDate = null;
var remarkEndDate = null;
var allRemarksTable = null;

function showPhoto(imgUrl) {
    $('#photoModalImg').attr('src', imgUrl);
    var modal = new bootstrap.Modal(document.getElementById('photoModal'));
    modal.show();
}

$(document).ready(function() {
    // Tab 1: Vehicle remarks summary table
    $('#vehicleRemarksTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('fleet-management.remarks.getVehicleData') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'owner_name', name: 'owner_name'},
            {data: 'vehicle_no', name: 'vehicle_no'},
            {data: 'total_remarks', name: 'total_remarks', orderable: false, searchable: false},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ]
    });

    // Date range picker for All Remarks
    $('#filter_remark_date_range').daterangepicker({
        autoUpdateInput: false,
        locale: {
            cancelLabel: 'Clear',
            format: 'DD-MM-YYYY'
        }
    });

    $('#filter_remark_date_range').on('apply.daterangepicker', function(ev, picker) {
        $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
        remarkStartDate = picker.startDate.format('YYYY-MM-DD');
        remarkEndDate = picker.endDate.format('YYYY-MM-DD');
        applyRemarksFilter();
    });

    $('#filter_remark_date_range').on('cancel.daterangepicker', function(ev, picker) {
        $(this).val('');
        remarkStartDate = null;
        remarkEndDate = null;
        applyRemarksFilter();
    });

    // Tab 2: All remarks table
    allRemarksTable = $('#allRemarksTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('fleet-management.remarks.getData') }}",
            data: function(d) {
                d.vehicle_id = $('#filter_remark_vehicle_id').val();
                d.start_date = remarkStartDate;
                d.end_date = remarkEndDate;
            }
        },
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
            {data: 'date', name: 'date'},
            {data: 'vehicle_no', name: 'vehicles.vehicle_no'},
            {data: 'remark', name: 'remark'},
            {data: 'photo', name: 'photo', orderable: false, searchable: false},
            {data: 'user_name', name: 'user.name'},
            {data: 'action', name: 'action', orderable: false, searchable: false}
        ],
        order: [[1, 'desc']]
    });
});

function applyRemarksFilter() {
    if (allRemarksTable) {
        allRemarksTable.ajax.reload();
    }
}

function resetRemarksFilter() {
    $('#filter_remark_date_range').val('');
    $('#filter_remark_vehicle_id').val('');
    remarkStartDate = null;
    remarkEndDate = null;
    applyRemarksFilter();
}
</script>
@endpush