@extends('layout.app')

@section('title', 'Vehicle Component Lifespan')

@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/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 Maintenance</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Vehicle Component Lifespan</li>
        </ol>
        <div class="ms-auto d-flex gap-2">
            <a href="{{ route('vms.lifespan.brandReport') }}" class="btn btn-info btn-sm">
                <i class="ri-bar-chart-box-line"></i> Performance Report
            </a>
            <a href="{{ route('vms.lifespan.create') }}" class="btn btn-primary btn-sm">
                <i class="ri-add-circle-line"></i> Add New
            </a>
        </div>
    </div>

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

        <div class="row gx-3 mb-3">
            {{-- Filters --}}
            <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-3">
                <label class="form-label" for="product_id">Filter by Product</label>
                {!! Form::select('product_id', ['' => '-- Select Product --'] + $products, null, [
                    'class' => 'form-control select2',
                    'id' => 'product_id',
                ]) !!}
            </div>
            <div class="col-sm-3">
                <label class="form-label" for="status_filter">Filter by Status</label>
                <select id="status_filter" class="form-control select2">
                    <option value="">-- All Status --</option>
                    <option value="active">Active</option>
                    <option value="removed">Removed</option>
                </select>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="table-responsive">
                    <table id="datatable" class="table table-bordered align-middle m-0">
                        <thead class="table-light text-center font-size-12">
                            <tr>
                                <th width="40">#</th>
                                <th>Vehicle No</th>
                                <th>Product</th>
                                <th>Brand</th>
                                <th>Position</th>
                                <th>New Unique No</th>
                                <th>Old Unique No</th>
                                <th>Fitted Date</th>
                                <th>Fitted KM</th>
                                <th>Removed Date</th>
                                <th>Removed KM</th>
                                <th>Lifespan Days</th>
                                <th>Lifespan KM</th>
                                <th>Reusable</th>
                                <th>Status</th>
                                <th width="80">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </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>
        $(document).ready(function() {
            // Re-draw table on filter change
            $("#vehicle_id, #product_id, #status_filter").on('change', function() {
                $('#datatable').DataTable().draw(false);
            });

            // DataTable Initialization
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                stateSave: true,
                responsive: true,
                ajax: {
                    url: '{{ route('vms.lifespan.getData') }}',
                    data: function(d) {
                        d.vehicle_id = $('#vehicle_id').val();
                        d.product_id = $('#product_id').val();
                        d.status = $('#status_filter').val();
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'id', orderable: false, searchable: false, className: 'text-center' },
                    { data: 'vehicle_no', name: 'vehicle.vehicle_no' },
                    { data: 'product_name', name: 'product.product_name' },
                    { data: 'brand_name', name: 'brand.brand_name' },
                    { data: 'position', name: 'position' },
                    { data: 'new_unique_no', name: 'new_unique_no' },
                    { data: 'old_unique_no', name: 'old_unique_no' },
                    { data: 'fitted_date', name: 'fitted_date', className: 'text-center' },
                    { data: 'fitted_km', name: 'fitted_km', className: 'text-end' },
                    { data: 'removed_date', name: 'removed_date', className: 'text-center' },
                    { data: 'removed_km', name: 'removed_km', className: 'text-end' },
                    { data: 'days_used', name: 'lifespan_days', className: 'text-center' },
                    { data: 'km_used', name: 'lifespan_km', className: 'text-center' },
                    { data: 'reusable_badge', name: 'is_reusable', className: 'text-center' },
                    { data: 'status_badge', name: 'status', className: 'text-center' },
                    { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center' }
                ]
            });
        });

        function deleteIt(id) {
            swal({
                title: "Are you sure?",
                text: "You will not be able to recover this record!",
                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('vms/lifespan') }}/' + id,
                        type: 'delete',
                        dataType: "JSON",
                        data: {
                            "_token": "{{ csrf_token() }}"
                        },
                        success: function(response) {
                            if(response.success){
                                $("#datatable").DataTable().draw(false);
                                swal("Deleted!", response.message, "success");
                            } else {
                                swal("Error", response.message, "error");
                            }
                        }
                    });
                } else {
                    swal("Cancelled", "Data is safe :)", "error");
                }
            });
        }
    </script>
@endpush