@extends('layout.app')
@section('title','Vehicle 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">
@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);">Vehicle List</a>
            </li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row align-items-center gap-3">
            @if(tenant_manager()->getVehicleLimit() !== null)
                @php
                    $vLimit = tenant_manager()->getVehicleLimit();
                    $vCount = tenant_manager()->getVehicleCount();
                    $vRemaining = max(0, $vLimit - $vCount);
                    $isFull = $vCount >= $vLimit;
                    $percent = $vLimit > 0 ? min(100, round(($vCount / $vLimit) * 100)) : 0;
                @endphp
                <div class="d-flex align-items-center bg-white px-3 py-1 rounded border shadow-sm">
                    <div class="me-2 text-end">
                        <small class="text-muted d-block" style="font-size: 11px;">{{ is_desktop_mode() ? 'License Limit' : 'Plan Limit' }} ({{ tenant_manager()->getPlanName() }})</small>
                        <strong class="{{ $isFull ? 'text-danger' : 'text-primary' }}">{{ $vCount }} / {{ $vLimit }} Vehicles</strong>
                    </div>
                    <span class="badge {{ $isFull ? 'bg-danger' : ($percent >= 80 ? 'bg-warning text-dark' : 'bg-success') }} px-2 py-1">
                        {{ $isFull ? 'Limit Reached' : $vRemaining . ' Available' }}
                    </span>
                </div>
            @endif

            <div class="d-flex flex-row gap-1 day-sorting">
                @if(!tenant_manager()->canAddVehicle())
                    <button type="button" class="btn btn-sm btn-secondary" onclick="alert('Vehicle limit of {{ tenant_manager()->getVehicleLimit() }} vehicles reached. Please upgrade your {{ is_desktop_mode() ? 'license' : 'plan' }} to add more vehicles.');" title="Vehicle limit reached">
                        <i class="ri-lock-line"></i> Add Vehicle (Limit Reached)
                    </button>
                @elseif(tenant_manager()->isPlanExpired())
                    <button type="button" class="btn btn-sm btn-danger" onclick="alert('Your {{ is_desktop_mode() ? 'license' : 'subscription plan' }} expired on {{ tenant_manager()->getPlanExpiresAt() }}. Please renew to register vehicles.');" title="License Expired">
                        <i class="ri-error-warning-line"></i> {{ is_desktop_mode() ? 'License Expired' : 'Plan Expired' }}
                    </button>
                @else
                    <a href="{{route('vehicle.create')}}" class="btn btn-sm btn-primary">
                        <i class="ri-add-circle-fill"></i> Add Vehicle
                    </a>
                @endif
            </div>
        </div>
    </div>
    <div class="app-body">
        @if(session('error_msg'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="ri-error-warning-line me-1"></i> {{ session('error_msg') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="row gx-3">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <!-- Table starts -->
                        <div class="table-responsive">
                            <table id="datatable" class="table truncate m-0 align-middle">
                                <thead>
                                <tr>
                                    <th>S.no.</th>
                                    <th>Owner Name</th>
                                    <th>Vehicle Type</th>
                                    <th>Vehicle No.</th>
                                    <th>Load Size (MT)</th>
                                    <th>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/vendor/datatables/custom/custom-datatables.js')}}"></script>
    <script src="{{asset('theme/assets/sweetalert/sweet-alert.min.js')}}"></script>
    <script>

        $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            stateSave: true,
            responsive: true,
            ajax: {
                url: '{{route('vehicle.getData') }}',
            },
            columns: [
                {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable: false},
                {data: 'owner_name', name: 'owner_name'},
                {data: 'vehicle_type', name: 'vehicle_type'},
                {data: 'vehicle_no', name: 'vehicle_no'},
                {data: 'load_size', name: 'load_size'},
                {data: 'action', name: 'action', orderable: false, searchable: false},
            ]
        });

        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('vehicle') }}/' + id,
                            type: 'delete',
                            dataType: "JSON",
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function () {
                                $("#datatable").DataTable().draw(false);
                            }
                        });
                        swal("Deleted!", "Data has been deleted!", "success");
                    } else {
                        swal("Cancelled", "Data is safe :)", "error");
                    }

                });
        }
    </script>
@endpush