@extends('includes/layout')
@section('main-page-content')
    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card-body">
                <div class="border-bottom py-2 d-flex justify-content-between align-items-center">
                    <div>
                        <div class="h4 pb-0 mb-0">Inspection Plan Settings</div>
                        <small>Inspection Plan Settings list</small>
                    </div>
                    <div class="d-flex justify-content-end align-items-center">
                        @if (in_array('InspectionList Maintain', Session::get('permissions')))
                            <button class="btn btn-primary"
                                onclick="window.location='{{ route('inspection.plan.settings.create') }}'"><span
                                    class="mdi mdi-plus"></span>Add Setting</button>
                        @endif
                    </div>
                </div>
                <div class="mt-3">
                    <div class="table-responsive text-nowrap mt-3 border-bottom">
                        <table class="table">
                            <thead class="table-head-color bg-primary">
                                <tr>
                                    <th>
                                        Checklist
                                    </th>

                                    <th>
                                       Order
                                    </th>
                                    <th>
                                        Table title
                                    </th>
                                    <th>
                                        Action
                                    </th>

                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0 table-body">

                            </tbody>
                        </table>
                    </div>
                    <nav aria-label="Page navigation" class="mt-3 ">
                        <ul class="pagination justify-content-end pages_btn">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="DeleteEmp" tabindex="-1" aria-labelledby="deletePreLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger px-4 py-2">
                    <h5 class="modal-title text-white" id="deletePreLabel">Delete</h5>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this record?<br><br>
                    <b class="text-warning">Warning:</b> This record will no longer be available. Please ensure you
                    genuinely want to delete it before clicking the delete button.
                </div>
                <div class="modal-footer border-top py-2">
                    <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-danger" id="client-id" data-id=""
                        onclick="_delete(this)">Delete</button>
                </div>
            </div>
        </div>
    </div>
@endsection





@section('css-js')
    <script>
        $(document).ready(function() {
            _filter(0);
            _get(0);

        });

        function _filter(filter_on) {

            var collection = document.getElementsByClassName("filter");
            var arr = {};

            for (let i = 0; i < collection.length; i++) {
                arr[collection[i].name] = filter_on == 1 ? collection[i].value : '';
            }

            if (filter_on == 0) {
                $('.filter').val('');
            }

            localStorage.setItem('filter', JSON.stringify(arr));

        }

        function _get(from) {
    $.ajax({
        type: "GET",
        url: `{{ url('api/inspection-plan-settings-get') }}?from=${from}&filter=${localStorage.getItem('filter')}`,
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        success: function(response) {
            var inspection_plan_settings = response.data;
            var html = ``;

            for (var i = 0; i < inspection_plan_settings.length; i++) {
                var id = inspection_plan_settings[i].id; // Use the actual ID here
                var title = inspection_plan_settings[i].title ? inspection_plan_settings[i].title : '';
                var step_order = inspection_plan_settings[i].step_order ? inspection_plan_settings[i].step_order : '';

                var values = inspection_plan_settings[i].values ? inspection_plan_settings[i].values : '';

                title = title.replace(/_/g, ' ');          
                      if (typeof values === 'string') {
                    values = values.split(',').join('<br>').trim();
                }

                html += `
                <tr>
                    <td>${title}</td>  <!-- Display the title -->
                     <td>${step_order}</td>  
                    <td>${values}</td>  
                    <td>
                        <div class="dropdown cursor-pointer d-flex justify-content-center">
                            <div id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
                                <span class="mdi mdi-dots-vertical list_color"></span>
                            </div>
                            <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                @if (in_array('Clients Maintain', Session::get('permissions')))
                                <li><a class="dropdown-item py-1 ps-2" data-id="${id}" onclick="window.location.href='{{ url('inspection-plan-settings-edit/${id}') }}'"><span class="mdi mdi-pencil mdi-20px text-primary"></span> Edit</a></li>
                                <li><a class="dropdown-item py-1 ps-2" data-id="${id}" onclick="_delete_modal(this)"><span class="mdi mdi-trash-can-outline mdi-20px text-danger"></span> Delete</a></li>
                                @endif
                            </ul>
                        </div>
                    </td>
                </tr>`;
            }

            $('.table-body').html(html);

            if (html === ``) {
                $('.table-body').html(
                    `<tr><td colspan="3" class="text-center">No record found</td></tr>`);
            }

            loader(false);
        },
        error: function(response) {
            loader(false);
            if (response.status == 422) {
                var errors = response.responseJSON.data;
                $.each(errors, function(field, messages) {
                    error_msg = messages[0];
                    toastr.error(error_msg);
                });
            } else if (response.status == 500) {
                toastr.error("Something went wrong");
            } else {
                toastr.error(response.responseJSON.message);
            }
        }
    });
}





        function _delete_modal(_this) {
            var id = $(_this).attr('data-id');
            $('#client-id').attr('data-id', id);
            $('#DeleteEmp').modal('show');
        }

        function _delete(_this) {
            var id = $(_this).attr('data-id');
            $.ajax({
                type: "POST",
                url: "{{ url('api/inspection-plan-settings-delete') }}/" + id,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    console.log(response);


                    toastr.success(response.message);
                    window.location.href = "{{ url('/') }}/inspection-plan-settings";
                },
                error: function(error) {
                    console.error("Error:", error);
                    toastr.error("Failed to delete Site");
                }
            });
        }
    </script>






    <style>
        .filter {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;

        }

        .filter-form {
            width: 100%;
            height: 33px;
            outline: none;
            background: white;

        }


        .select-color {
            color: #787878;
            font-weight: 400;
            line-height: 1.47;
            background-size: 9px 5px;
            border: 1px solid #d4d3d5;
            border-radius: 2px;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            padding-left: 5px;
        }

        .list_color:hover {
            color: #15A7F5;
        }

        @media only screen and (min-width: 800px) and (max-width: 1280px) {
            .filter {
                width: 115px;
            }

            .filter-form {
                width: 260px;
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 1024px) {
            .filter {
                width: 115px;
            }

            .filter-form {
                width: 260px;
            }
        }

        @media only screen and (min-width: 320px) and (max-width: 568px) {
            .filter {
                width: 115px;
            }

            .filter-form {
                width: 260px;
            }
        }

        @media only screen and (min-width: 768px) and (max-width: 1366px) {
            .filter {
                width: 115px;
            }

            .filter-form {
                width: 260px;
            }
        }

        @media only screen and (min-width: 900px) and (max-width: 1440px) {
            .filter {
                width: 115px;
            }

            .filter-form {
                width: 260px;
            }
        }
    </style>
@endsection