@extends('layout.app')
@section('title', 'Trip Sheet List')

@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') }}">
@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);">Trip Sheet</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Trip Sheet List</li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1">
                <a href="{{ route('trip-sheet.create') }}" class="btn btn-sm btn-primary">
                    <i class="ri-add-circle-fill"></i> Add Trip Sheet
                </a>
            </div>
        </div>
    </div>

    <div class="app-body">
        <div class="row gx-3">
            <div class="col-sm-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-2">
                <label class="form-label" for="from_date">From Date</label>
                <input type="text" id="from_date" class="form-control datepicker" value="{{ $financial_year_start }}">
            </div>
            <div class="col-sm-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">
                <label class="form-label" for="vehicle_id">Filter by Vehicle</label>
                {!! Form::select('vehicle_id', ['' => '-- Select Vehicle --'] + $vehicles, null, [
                    'class' => 'form-control select2',
                    'id' => 'vehicle_id',
                ]) !!}
            </div>

            <div class="col-sm-2">
                <label class="form-label" for="status">Filter by Status</label>
                {!! Form::select('status', ['' => '-- All --', 'Draft' => 'Draft', 'In Progress' => 'In Progress', 'Completed' => 'Completed'], null, [
                    'class' => 'form-control select2',
                    'id' => 'status',
                ]) !!}
            </div>

            {{-- Summary Cards --}}
            <div class="col-sm-12 mt-3">
                <div class="row gx-3">
                    <div class="col-sm-3">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body py-2 text-center">
                                <small class="text-muted">Total Freight Income</small>
                                <h5 class="mb-0 text-primary" id="summaryIncome">₹ 0.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body py-2 text-center">
                                <small class="text-muted">Total Expenses</small>
                                <h5 class="mb-0 text-danger" id="summaryExpense">₹ 0.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body py-2 text-center">
                                <small class="text-muted">Net Profit/Loss</small>
                                <h5 class="mb-0" id="summaryProfitLoss">₹ 0.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card border-0 shadow-sm">
                            <div class="card-body py-2 text-center">
                                <small class="text-muted">Total Trips</small>
                                <h5 class="mb-0 text-info" id="summaryTrips">0</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Table --}}
            <div class="col-sm-12 mt-2">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th width="50">#</th>
                                        <th>Trip No.</th>
                                        <th>LR No.</th>
                                        <th>Date</th>
                                        <th>Vehicle No</th>
                                        <th>Driver</th>
                                        <th>Route</th>
                                        <th class="text-end">Freight (₹)</th>
                                        <th class="text-end">Expense (₹)</th>
                                        <th class="text-end">Profit/Loss (₹)</th>
                                        <th>Status</th>
                                        <th width="130">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </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/sweetalert/sweet-alert.min.js') }}"></script>
    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(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("{{ $financial_year_start }}", "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'));
                
                $('#datatable').DataTable().draw();
            });

            $('#from_date, #to_date').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD-MM-YYYY'));
                $('#date_period').val('custom');
                $('#datatable').DataTable().draw();
            });

            // Re-draw table on filter change
            $("#from_date, #to_date, #vehicle_id, #status").on('change', function() {
                $('#datatable').DataTable().draw(false);
            });

            // DataTable Initialization
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{ route('trip-sheet.getData') }}',
                    data: function(d) {
                        d.startdate = moment($('#from_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.enddate = moment($('#to_date').val(), "DD-MM-YYYY").format("YYYY-MM-DD");
                        d.vehicle_id = $('#vehicle_id').val();
                        d.status = $('#status').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'id', orderable: false, searchable: false },
                    { data: 'trip_sheet_no', name: 'trip_sheet_no' },
                    { data: 'lr_no', name: 'lr_no' },
                    { data: 'date', name: 'date' },
                    { data: 'vehicle_no', name: 'vehicle_no' },
                    { data: 'driver_name', name: 'driver_name' },
                    { data: 'route', name: 'route', orderable: false },
                    { data: 'freight_amount', name: 'freight_amount', className: 'text-end' },
                    { data: 'total_expense', name: 'total_expense', className: 'text-end' },
                    { data: 'profit_loss', name: 'profit_loss', className: 'text-end' },
                    { data: 'status_badge', name: 'status', orderable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ],
                drawCallback: function() {
                    var api = this.api();
                    var totalIncome = 0, totalExpense = 0;

                    api.column(7, { page: 'current' }).data().each(function(val) {
                        totalIncome += parseFloat(val.replace(/,/g, '')) || 0;
                    });
                    api.column(8, { page: 'current' }).data().each(function(val) {
                        totalExpense += parseFloat(val.replace(/,/g, '')) || 0;
                    });

                    var profitLoss = totalIncome - totalExpense;
                    var trips = api.column(0, { page: 'current' }).data().length;

                    $('#summaryIncome').text('₹ ' + totalIncome.toFixed(2));
                    $('#summaryExpense').text('₹ ' + totalExpense.toFixed(2));
                    $('#summaryTrips').text(trips);

                    if (profitLoss >= 0) {
                        $('#summaryProfitLoss').text('₹ +' + profitLoss.toFixed(2)).removeClass('text-danger').addClass('text-success');
                    } else {
                        $('#summaryProfitLoss').text('₹ ' + profitLoss.toFixed(2)).removeClass('text-success').addClass('text-danger');
                    }
                }
            });
        });

        function deleteIt(id) {
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this data!",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: '#DD6B55',
                confirmButtonText: 'Yes, I am sure!',
                cancelButtonText: "No, cancel it!",
                closeOnConfirm: false,
                closeOnCancel: false,
                cancelButtonClass: 'btn-default btn-md waves-effect',
                confirmButtonClass: 'btn-danger btn-md waves-effect waves-light',
            }, function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: '{{ url('trip-sheet') }}/' + id,
                        type: 'delete',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function() {
                            $("#datatable").DataTable().draw(false);
                        }
                    });
                    swal("Deleted!", "Trip Sheet has been deleted!", "success");
                } else {
                    swal("Cancelled", "Data is safe :)", "error");
                }
            });
        }

        function completeTrip(id) {
            swal({
                title: "Complete Trip?",
                text: "Are you sure you want to mark this trip as completed?",
                type: "info",
                showCancelButton: true,
                confirmButtonColor: '#28a745',
                confirmButtonText: 'Yes, Complete it!',
                cancelButtonText: "Cancel",
                closeOnConfirm: false,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) {
                    $.ajax({
                        url: '{{ url('trip-sheet') }}/' + id + '/complete',
                        type: 'PUT',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            $("#datatable").DataTable().draw(false);
                            swal("Completed!", "Trip Sheet has been marked as completed.", "success");
                        },
                        error: function() {
                            swal("Error", "Something went wrong.", "error");
                        }
                    });
                }
            });
        }
    </script>
@endpush