@extends('staff.layout2')

<link rel="stylesheet" href="{{ asset('assets/css/table_filter.css') }}">

<style>
    .dt-search {
        display: none;
    }
</style>

@section('content')

<div class="card p-2">

    <h5 class="fw-bold mb-2 text-center">
        Vehicle Details
    </h5>


    <div class="row mb-3 align-items-center">

        {{-- Page Length --}}
        <div class="col-auto mb-3">

            <select id="pageLength" class="form-select">

                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="All">All</option>

            </select>

        </div>


        {{-- Search --}}
        <div class="col-lg-7 col-12 mb-3">

            <div class="search-cluster w-100">

                <div class="search-field">

                    <i class="ti tabler-hash"></i>

                    <input
                        type="text"
                        id="sheetSearch"
                        placeholder="Vehicle Number / Model"
                        class="w-100">

                </div>

            </div>

        </div>


        {{-- Reset --}}
        <div class="col-lg-1 col-12 mb-3">

            <button
                class="btn btn-secondary w-100"
                id="resetBtn"
                type="button">

                Reset

            </button>

        </div>


        {{-- Export --}}
        <div class="col-lg-1 col-12 mb-3">

            <button id="exportBtn" class="btn btn-label-secondary w-100">
                Export
            </button>

        </div>

    </div>




    <div class="table-responsive pt-0 pb-2">

        <table
            class="table"
            id="vehicleDetailTable">

            <thead>

                <tr>

                    <th>S.No</th>

                    <th>Purchased Date</th>
                    <th>Purchase Price</th>

                    <th>Vehicle Number</th>

                    <th>Vehicle Model</th>

                    <th>Status</th>

                </tr>

            </thead>

        </table>

    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


<script>
    $(document).ready(function() {



        let table = $('#vehicleDetailTable').DataTable({

            processing: true,

            serverSide: true,

            ajax: "{{ route('vehicle_detail_data') }}",

            searching: true,

            lengthChange: false,

            info: true,


            columnDefs: [

                {
                    targets: '_all',
                    className: 'text-nowrap'
                }

            ],


            columns: [

                /* S.No */

                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },


                /* Purchased Date */

                {
                    data: 'purchase_date',
                    name: 'purchase_date'
                },


                /* Purchase Price */

                {
                    data: 'purchase_price',
                    name: 'purchase_price'
                },


                /* Vehicle Number */

                {
                    data: 'vehicle_no',
                    name: 'vehicle_no'
                },


                /* Vehicle Model */

                {
                    data: 'vehicle_model',
                    name: 'vehicle_model'
                },


                /* Status */

                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                }

            ],


            pageLength: 10,


            order: [

                [1, 'desc']

            ]

        });

        $('#sheetSearch').on('keyup', function() {

            table
                .search($(this).val())
                .draw();

        });

        $('#pageLength').on('change', function() {

            let value = $(this).val();


            if (value === 'All') {

                table
                    .page
                    .len(-1)
                    .draw();

            } else {

                table
                    .page
                    .len(parseInt(value))
                    .draw();

            }

        });


        $('#resetBtn').on('click', function() {

            $('#sheetSearch').val('');

            $('#pageLength').val('10');


            table
                .search('')
                .page
                .len(10)
                .draw();

        });

        document.getElementById('exportBtn').addEventListener('click', function() {

            const table = document.querySelector('table');

            if (!table) {
                alert('Table not found!');
                return;
            }

            let csv = [];

            const rows = table.querySelectorAll('tr');

            rows.forEach(function(row) {

                let rowData = [];

                row.querySelectorAll('th, td').forEach(function(cell) {

                    let text = cell.innerText
                        .replace(/"/g, '""')
                        .replace(/\n/g, ' ')
                        .trim();

                    rowData.push('"' + text + '"');
                });

                csv.push(rowData.join(','));
            });

            const csvFile = new Blob(
                [csv.join('\n')], {
                    type: 'text/csv;charset=utf-8;'
                }
            );

            const downloadLink = document.createElement('a');

            downloadLink.href = URL.createObjectURL(csvFile);
            downloadLink.download = 'vehicle_details.csv';

            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);

        });
    });
</script>

@endsection