@extends('layouts.app')
@section('content')
    @php
        use App\Helpers\RouteHelper;
    @endphp

    @include(RouteHelper::getSidebarView())


    <main id="" class="side_user">
        <!-- Hero -->
        <div class="bg-body-light px-4">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill h3 my-2">
                        Inventory<small
                            class="d-block d-sm-inline-block mt-2 mt-sm-0 font-size-base font-w400 text-muted"></small>
                    </h1>
                    <nav class="flex-sm-00-auto ml-sm-3" aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-alt">
                            <li class="breadcrumb-item">Inventory</li>
                            <li class="breadcrumb-item" aria-current="page">
                                <a style="color:black" href="">List</a>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <div class="content px-4">
            <div class="block block-rounded">
                <div class="block-content ">
                    @can('list-inventory')
                        <form id="filter-form">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="customer_id">Customer</label>
                                    <select name="customer_id" id="customer_id" required class="form-control">
                                        <option value="">Select Customer</option>
                                        @foreach ($customers as $customer)
                                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="customer_user_id">Customer User</label>
                                    <select name="customer_user_id" id="customer_user_id" required class="form-control">
                                        <option value="">Select Customer User</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="project_id">Project</label>
                                    <select name="project_id" id="project_id" required class="form-control">
                                        <option value="">Select Project</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label for="is_verified">Verified</label>
                                    <select name="is_verified" id="is_verified" required class="form-control">
                                        <option value="">Select Status</option>
                                        <option value="1">Verified</option>
                                        <option value="0">Not Verified</option>
                                        <option value="3">Both</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <button type="submit" id="filter-button" class="btn btn-primary">Filter</button>
                                    <button type="button" id="reset-button" class="btn btn-secondary">Reset</button>
                                </div>
                            </div>

                            <div class="row mt-3">
                                <div class="col-md-12">
                                    <div id="record-count" class="mt-2"></div>
                                </div>
                            </div>
                        </form>
                    @endcan


                </div>

                <div class="content px-4">

                    <div class="block block-rounded">
                        <div class="block-content ">
                            <div class="d-flex justify-content-end">
                                <div class="loader" id="loader" style="display: none;">
                                    <div class="external-shadow">
                                        <div class="central">
                                            <div class="intern"></div>
                                        </div>
                                    </div>
                                </div>
                                {{-- <button class="btn btn-info btn-sm" data-toggle="modal" data-target="#addmodal">Add</button> --}}
                            </div>
                        </div>


                        <div class="block-content block-content-full mt-5">
                            <!-- DataTables init on table by adding .js-dataTable-full class, functionality is initialized in js/pages/be_tables_datatables.min.js which was auto compiled from _js/pages/be_tables_datatables.js -->

                            <div class="row">
                                <div class="col-sm-12">
                                    @can('list-inventory')
                                        <div class="table-responsive my-3">
                                            {{ $dataTable->table(['class' => 'table', 'id' => 'inventory-table']) }}
                                        </div>
                                    @endcan

                                </div>
                            </div>
                        </div>
                    </div>
                </div>

    </main>
@endsection
@section('script')
    {{ $dataTable->scripts() }}
    <script>
        // $(document).ready(function() {

        //     $('#customer_id').change(function() {
        //         var customerId = $(this).val();

        //         if (customerId) {
        //             $.ajax({
        //                 url: '/get-customer-users/' + customerId,
        //                 type: 'GET',
        //                 dataType: 'json',
        //                 success: function(data) {

        //                     $('#customer_user_id').empty();
        //                     $('#customer_user_id').append(
        //                         '<option value="">Select a Customer User</option>');
        //                     $.each(data, function(key, value) {
        //                         $('#customer_user_id').append('<option value="' +
        //                             value.id + '">' + value.name + '</option>');
        //                     });
        //                 },
        //                 error: function(jqXHR, textStatus, errorThrown) {

        //                 }
        //             });
        //         } else {
        //             $('#customer_user_id').empty();
        //             $('#customer_user_id').append('<option value="">Select a Customer User</option>');
        //         }
        //     });

        //     $('#customer_user_id').change(function() {
        //         var customerUserId = $(this).val();

        //         if (customerUserId) {
        //             $.ajax({
        //                 url: '/get-customer-user-projects/' + customerUserId,
        //                 type: 'GET',
        //                 dataType: 'json',
        //                 success: function(data) {

        //                     $('#project_id').empty();
        //                     $('#project_id').append(
        //                         '<option value="">Select a Project</option>');
        //                     $.each(data, function(key, value) {
        //                         $('#project_id').append('<option value="' +
        //                             value.id + '">' + value.name + '</option>');
        //                     });
        //                 },
        //                 error: function(jqXHR, textStatus, errorThrown) {

        //                 }
        //             });
        //         } else {
        //             $('#project_id').empty();
        //             $('#project_id').append('<option value="">Select a Project</option>');
        //         }
        //     });

        //     if ($('#inventory-table').length) {
        //         var table = $('#inventory-table').DataTable();

        //         // Function to reload DataTable with filter values
        //         function reloadTable() {
        //             table.ajax.reload();
        //         }

        //         // Attach event listener to filter dropdowns
        //         $('#project_id, #customer_id, #customer_user_id, #is_verified').change(function() {
        //             reloadTable();
        //         });

        //         table.on('preXhr.dt', function(e, settings, data) {
        //             data.project_id = $('#project_id').val();
        //             data.customer_id = $('#customer_id').val();
        //             data.customer_user_id = $('#customer_user_id').val();
        //             data.is_verified = $('#is_verified').val();
        //         });
        //     } else {
        //         alert('#inventory-table not found');
        //     }
        // });

        $(document).ready(function() {

            $('#customer_id').change(function() {
                var customerId = $(this).val();

                if (customerId) {
                    $.ajax({
                        url: '/get-customer-users/' + customerId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#customer_user_id').empty();
                            $('#customer_user_id').append(
                                '<option value="">Select a Customer User</option>');
                            $.each(data, function(key, value) {
                                $('#customer_user_id').append('<option value="' + value
                                    .id + '">' + value.name + '</option>');
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            // Handle errors
                        }
                    });
                } else {
                    $('#customer_user_id').empty();
                    $('#customer_user_id').append('<option value="">Select a Customer User</option>');
                }
            });

            $('#customer_user_id').change(function() {
                var customerUserId = $(this).val();

                if (customerUserId) {
                    $.ajax({
                        url: '/get-customer-user-projects/' + customerUserId,
                        type: 'GET',
                        dataType: 'json',
                        success: function(data) {
                            $('#project_id').empty();
                            $('#project_id').append(
                                '<option value="">Select a Project</option>');
                            $.each(data, function(key, value) {
                                $('#project_id').append('<option value="' + value.id +
                                    '">' + value.name + '</option>');
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            // Handle errors
                        }
                    });
                } else {
                    $('#project_id').empty();
                    $('#project_id').append('<option value="">Select a Project</option>');
                }
            });

            if ($('#inventory-table').length) {
                var table = $('#inventory-table').DataTable();

                // Function to reload DataTable with filter values
                function reloadTable() {
                    table.ajax.reload();
                }

                // Attach event listener to form submission
                $('#filter-form').submit(function(e) {
                    e.preventDefault();
                    reloadTable();
                });

                table.on('preXhr.dt', function(e, settings, data) {
                    data.project_id = $('#project_id').val();
                    data.customer_id = $('#customer_id').val();
                    data.customer_user_id = $('#customer_user_id').val();
                    data.is_verified = $('#is_verified').val();
                });

                table.on('draw', function() {
                    var info = table.page.info();
                    $('#record-count').html('Total Records: ' + info.recordsTotal);
                });

                // Optional: Attach event listener to reset button to reset filters and reload table
                $('#reset-button').click(function() {
                    $('#filter-form')[0].reset();
                    reloadTable();
                });
            } else {
                alert('#inventory-table not found');
            }
        });
    </script>
@endsection