@extends('admin.layout')

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


<style>
    .dt-search {

        display: none !important;

    }
</style>

@section('content')
    <div>
        <div class="d-flex align-items-center justify-content-between mb-3">



            <h5 class="fw-bold mb-0">

                Vehicle List

            </h5>


            <div class="d-flex gap-2">

                <a href="{{ route('admin.add_stock') }}" class="btn btn-primary">

                    <span>Add vehicles</span>

                </a>

                <a href="{{ route('admin.sold_list') }}" class="btn btn-primary">

                    <span>Sold Vehicles</span>

                </a>

            </div>
        </div>

        <div class="card p-2">



            <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>





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



                    <div class="row g-2">



                        {{-- NAME SEARCH --}}

                        <div class="col-md-4 col-12">



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



                                <div class="search-field">



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



                                    <input type="text" id="nameSearch" placeholder="Name" class="w-100">



                                </div>



                            </div>



                        </div>





                        {{-- MOBILE SEARCH --}}

                        <div class="col-md-4 col-12">



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



                                <div class="search-field">



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



                                    <input type="text" id="mobileSearch" placeholder="Mobile Number" class="w-100">



                                </div>



                            </div>



                        </div>





                        {{-- VEHICLE NAME SEARCH --}}

                        <div class="col-md-4 col-12">



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



                                <div class="search-field">



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



                                    <input type="text" id="vehicleSearch" placeholder="Brand Name" class="w-100">



                                </div>



                            </div>



                        </div>



                    </div>



                </div>





                {{-- RESET BUTTON --}}

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



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



                        <span>Reset</span>



                    </button>



                </div>





                {{-- EXPORT BUTTON --}}

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



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



                        Export



                    </button>



                </div>



            </div>





            {{-- =====================================================

            VEHICLE TABLE

            ====================================================== --}}



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



                <table class="table" id="patientsTable">



                    <thead>



                        <tr>



                            <th>S.No</th>



                            <th>Brand Name</th>



                            <th>Purchase Date</th>



                            <th>Vehicle Details</th>



                            <th>Vehicle Image</th>



                            <th>Kilometers</th>



                            <th>Fuel</th>



                            <th>Name</th>



                            <th>Mobile</th>



                            <th>Purchase Price</th>



                            <th>Selling Price</th>



                            <th>Expenditure</th>



                            <th>Sell Details</th>



                            <th>Action</th>



                        </tr>



                    </thead>



                </table>



            </div>



        </div>



    </div>







    {{-- =========================================================

    ADD EXPENDITURE MODAL

    ========================================================== --}}



    <div class="modal fade" id="addExpenseModal" tabindex="-1" aria-hidden="true">



        <div class="modal-dialog modal-dialog-centered modal-sm">



            <div class="modal-content">





                {{-- MODAL HEADER --}}

                <div class="modal-header">



                    <h5 class="modal-title">



                        <i class="ti tabler-wallet me-2"></i>



                        Add Expenditure



                    </h5>



                    <button type="button" class="btn-close" data-bs-dismiss="modal">

                    </button>



                </div>





                {{-- FORM --}}

                <form id="expenseForm" action="{{ route('admin.store_expenditure') }}" method="POST"
                    enctype="multipart/form-data">



                    @csrf





                    {{-- VEHICLE ID --}}

                    <input type="hidden" name="vehicle_id" id="vehicle_id" value="{{ old('vehicle_id') }}">





                    <div class="modal-body">





                        {{-- =================================================

                        DATE

                        ================================================== --}}



                        <div class="mb-3">



                            <label class="form-label">



                                Date



                                <span class="text-danger">

                                    *

                                </span>



                            </label>





                            <input type="date" class="form-control @error('date') is-invalid @enderror" id="expenseDate"
                                name="date" value="{{ old('date', date('Y-m-d')) }}" max="{{ date('Y-m-d') }}">





                            @error('date')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror



                        </div>







                        {{-- =================================================

                        EXPENDITURE

                        ================================================== --}}



                        <div class="mb-3">



                            <label class="form-label">



                                Expenditure



                                <span class="text-danger">

                                    *

                                </span>



                            </label>





                            <input type="number" class="form-control @error('expenditure') is-invalid @enderror"
                                id="expenseAmount" name="expenditure" min="1" step="0.01"
                                value="{{ old('expenditure') }}" placeholder="Enter amount">





                            @error('expenditure')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror



                        </div>







                        {{-- =================================================

                        DESCRIPTION

                        ================================================== --}}



                        <div class="mb-3">



                            <label class="form-label">



                                Description



                                <small class="text-muted">

                                    (Optional)

                                </small>



                            </label>





                            <textarea class="form-control @error('description') is-invalid @enderror" id="expenseDescription" name="description"
                                rows="3" placeholder="Enter description...">{{ old('description') }}</textarea>





                            @error('description')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror



                        </div>







                        {{-- =================================================

                        RECEIPT

                        ================================================== --}}



                        <div class="mb-3">



                            <label class="form-label">



                                Choose Receipt



                                <small class="text-muted">

                                    (Optional)

                                </small>



                            </label>





                            <input type="file" class="form-control @error('receipt') is-invalid @enderror"
                                id="expenseReceipt" name="receipt" accept="image/*,.pdf">





                            @error('receipt')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror



                        </div>



                    </div>







                    {{-- =================================================

                    MODAL BUTTONS

                    ================================================== --}}



                    <div class="text-center pb-3">



                        <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">



                            Cancel



                        </button>





                        <button type="submit" id="submitExpense" class="btn btn-primary">



                            Submit



                        </button>



                    </div>



                </form>



            </div>



        </div>




    </div>







    {{-- =========================================================

    JQUERY

    ========================================================== --}}



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





    {{-- =========================================================

    DATATABLE

    ========================================================== --}}



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







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





            // =====================================================

            // DATATABLE

            // =====================================================



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



                processing: true,



                serverSide: true,



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



                searching: true,



                lengthChange: false,



                info: true,



                columnDefs: [{

                    targets: '_all',

                    className: 'text-nowrap'

                }],



                columns: [



                    {

                        data: 'DT_RowIndex',

                        name: 'DT_RowIndex',

                        orderable: false,

                        searchable: false

                    },



                    {

                        data: 'brand_name',

                        name: 'brand_name'

                    },



                    {

                        data: 'purchase_date',

                        name: 'purchase_date'

                    },



                    {

                        data: 'vehicle_details',

                        name: 'vehicle_details',

                        className: 'text-center text-nowrap'

                    },



                    {

                        data: 'vehicle_image_display',

                        name: 'vehicle_image',

                        orderable: false,

                        searchable: false

                    },



                    {

                        data: 'kilometers',

                        name: 'kilometers'

                    },



                    {

                        data: 'fuel_type',

                        name: 'fuel_type'

                    },



                    {

                        data: 'name',

                        name: 'name'

                    },



                    {

                        data: 'mobile',

                        name: 'mobile'

                    },



                    {

                        data: 'purchase_price',

                        name: 'purchase_price'

                    },



                    {

                        data: 'selling_price',

                        name: 'selling_price'

                    },



                    {

                        data: 'expenditure',

                        name: 'expenditure',

                        orderable: false,

                        searchable: false

                    },



                    {

                        data: 'sell_details',

                        name: 'sell_details',

                        orderable: false,

                        searchable: false

                    },



                    {

                        data: 'action',

                        name: 'action',

                        orderable: false,

                        searchable: false

                    }



                ]



            });







            // =====================================================

            // SEARCH

            // =====================================================



            $('#nameSearch, #mobileSearch, #vehicleSearch').on('keyup', function() {



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



            });







            // =====================================================

            // PAGE LENGTH

            // =====================================================



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



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



                if (value === 'All') {



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



                } else {



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



                }



            });







            // =====================================================

            // RESET

            // =====================================================



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



                e.preventDefault();



                $('#nameSearch, #mobileSearch, #vehicleSearch').val('');



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



                table.search('')

                    .page.len(10)

                    .draw();



            });







            // =====================================================

            // OPEN ADD EXPENDITURE MODAL

            // =====================================================



            $(document).on('click', '.add-expense-btn', function() {



                let vehicleId = $(this).data('id');



                $('#vehicle_id').val(vehicleId);



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



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



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



                $('.error-text').text('');





                // Reset submit button

                $('#submitExpense')

                    .prop('disabled', false)

                    .data('submitted', false)

                    .html('Submit');



            });







            // =====================================================

            // PREVENT MULTIPLE EXPENSE FORM SUBMISSION

            // =====================================================



            $('#expenseForm').on('submit', function(e) {



                let submitButton = $('#submitExpense');





                // Already submitted

                if (submitButton.data('submitted') === true) {



                    e.preventDefault();



                    return false;



                }





                // Lock submission

                submitButton.data('submitted', true);





                // Disable button

                submitButton.prop('disabled', true);





                // Saving state

                submitButton.html(`

                        <span class="spinner-border spinner-border-sm me-1"

                            role="status"></span>

                        Processing...

                    `);



            });







            // =====================================================

            // EXPORT

            // =====================================================



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



                const button = this;



                button.disabled = true;



                // button.innerHTML = 'Processing...';





                setTimeout(function() {



                    let csv = [];



                    let rows = document.querySelectorAll("table tr");





                    rows.forEach(function(row) {



                        let cols = row.querySelectorAll("th, td");

                        let rowData = [];

                        cols.forEach(function(col) {
                            rowData.push(

                                '"' +

                                col.innerText.replace(/"/g, '""') +

                                '"'
                            );

                        });

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





                    const blob = new Blob(

                        [csv.join("\n")], {

                            type: "text/csv;charset=utf-8;"

                        }

                    );

                    const url = URL.createObjectURL(blob);
                    const link = document.createElement("a");

                    link.href = url;



                    link.download = "vehicle_list.csv";



                    link.click();

                    URL.revokeObjectURL(url);

                    button.disabled = false;

                    button.innerHTML = 'Export';

                }, 500);



            });



        });



        // =====================================================
        // VEHICLE IMAGE CLICK PREVIEW
        // =====================================================

        $(document).on('click', '#patientsTable tbody td:nth-child(5) img', function() {

            let imageSrc = $(this).attr('src');

            if (!imageSrc) {
                return;
            }

            $('#vehiclePreviewImage').attr('src', imageSrc);

            let modalElement = document.getElementById('vehicleImageModal');

            let modal = bootstrap.Modal.getOrCreateInstance(modalElement);

            modal.show();
        });
    </script>










    {{-- =========================================================
    REOPEN EXPENDITURE MODAL AFTER VALIDATION ERROR
    ========================================================= --}}

    @if ($errors->has('date') || $errors->has('expenditure') || $errors->has('description') || $errors->has('receipt'))
        <script>
            $(document).ready(function() {

                $('#addExpenseModal').modal('show');

                $('#submitExpense')
                    .prop('disabled', false)
                    .data('submitted', false)
                    .html('Submit');

            });
        </script>
    @endif






    {{-- =========================================================
    DELETE VEHICLE
    ========================================================= --}}

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

            let deleteId = null;

            // =====================================================
            // CLICK DELETE ICON
            // =====================================================

            $(document).on('click', '.deleteVehicle', function() {

                deleteId = $(this).data('id');

                console.log('Delete Vehicle ID:', deleteId);

                // Set delete form action
                $('#deleteForm').attr(
                    'action',
                    "{{ url('admin/delete_stock') }}/" + deleteId
                );

            });


            // =====================================================
            // CONFIRM DELETE
            // =====================================================

            $('#deleteForm').on('submit', function(e) {

                e.preventDefault();

                if (!deleteId) {

                    alert('Vehicle ID not found.');

                    return false;
                }

                let form = this;

                let button = $('#confirmDelete');

                // Disable button
                button.prop('disabled', true);

                // Loading
                button.html(`
                    <span class="spinner-border spinner-border-sm me-1"
                          role="status"></span>
                    Deleting...
                `);

                // Submit normally
                form.submit();

            });

        });
    </script>

    {{-- =========================================================
    VEHICLE IMAGE PREVIEW MODAL
    ========================================================== --}}
    <div class="modal fade" id="vehicleImageModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered modal-lg">

            <div class="modal-content" style="border-radius:18px; overflow:hidden;">

                <div class="modal-body p-0 text-center position-relative">

                    {{-- CLOSE BUTTON --}}
                    <button type="button"
                        class="position-absolute top-0 end-0 m-3 d-flex align-items-center justify-content-center"
                        data-bs-dismiss="modal" aria-label="Close"
                        style="
                            z-index: 10;
                            background-color: #ffff;
                            color: #000;
                            border: 0;
                            border-radius: 50%;
                            width: 38px;
                            height: 38px;
                            padding: 0;
                        ">
                        <i class="ti tabler-x" style="font-size: 22px;"></i>
                    </button>

                    {{-- VEHICLE IMAGE --}}
                    <img id="vehiclePreviewImage" src="" alt="Vehicle Image"
                        style="
                                 width:100%;
                                 max-height:600px;
                                 object-fit:contain;
                                 display:block;
                                 background:#fff;
                             ">

                </div>

            </div>

        </div>

    </div>
@endsection