@extends('includes/layout')
@section('main-page-content')
    <style>
        .document {
            border-radius: 10px;
            border: 1px solid #B6BBC4;
            padding: 5px 10px 5px 5px;
        }

        .input-group-text.btn:hover {
            background-color: #337ab7;
            color: #fff;
            border-color: #2e6da4;
        }

        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        /* Firefox */
        input[type=number] {
            -moz-appearance: textfield;
        }

        .form-group {
            margin-bottom: 1rem;
        }

        label {
            font-weight: bold;
        }

        .col-md-4,
        .col-md-8 {
            display: flex;
            flex-direction: column;
        }

        .form-select,
        .form-control {
            width: 100%;
            padding: 0.5rem;
            font-size: 1rem;
        }

        .border-top {
            border-top: 1px solid #ddd;
        }

        .container-xxl {
            padding: 2rem;
        }

        .card {
            padding: 1rem;
        }
    </style>

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="border-bottom p-3">
                <div class="h4 pb-0 mb-0">Add New Checklist</div>

            </div>

            <div class="row g-0">
                <div class="col-12 col-md-9 row mt-4">
                    <form class="col-12 row mt-4" id="inspectionPlanSettingForm" enctype="multipart/form-data">
                        @csrf
                        <div class="row  py-2">
                            <div class="col-lg-6 col-sm-12 mb-2 ">
                                <label>Checklist<span class="text-danger">*</span></label>
                                <input type="text" class="form-control step_name">

                            </div>
                            <div class="col-lg-6 col-sm-12 mb-2 ">
                                <label>Step Order (eg:123)<span class="text-danger">*</span></label>
                                <input type="number" class="form-control step_order">

                            </div>
                            <div class="pt-1 signature-handover-wrapper">
                                <div class="row inspection-plan-settings-row">
                                    <div class="col-lg-8 col-sm-12 mb-3">
                                    <h5 for="client_fname" class="text-dark">Table </h5>

                                        <label>Title </label>
                                        <input type="text" class="form-control table_title" name="table_title[]"
                                            required>
                                    </div>
                                    <div class="col-lg-4 col-sm-6 mb-3 d-flex align-items-end">
                                        <button type="button"
                                            class="btn btn-danger btn-sm delete-row-button">Delete</button>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-end mt-2">
                                <span class="mt-2">Update/Add More</span>
                                <button class="border-none bg-transparent add-more-btn" type="button"
                                    onclick="addMoreRow();">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="43" height="43"
                                        viewBox="0 0 43 43" fill="none">
                                        <g filter="url(#filter0_d_2182_1189)">
                                            <rect x="4" y="2" width="35" height="35" rx="4" fill="#019FF3">
                                            </rect>
                                        </g>
                                        <path
                                            d="M30.221 9H13.4026C12.0757 9 11 10.0757 11 11.4026V28.221C11 29.5479 12.0757 30.6236 13.4026 30.6236H30.221C31.5479 30.6236 32.6236 29.5479 32.6236 28.221V11.4026C32.6236 10.0757 31.5479 9 30.221 9Z"
                                            stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        </path>
                                        <path d="M21.8125 15.0078V24.6183" stroke="white" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M17.0068 19.8105H26.6173" stroke="white" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </button>
                            </div>

                            <div class="col-12 border-top p-3 d-flex justify-content-end">
                                <button type="button" class="btn btn-secondary me-2"
                                    onclick="window.location='{{ url('/') }}/inspection-plan-settings'">Cancel</button>
                                <button type="button" onclick="saveInspectionPlanSettings(event)"
                                    class="btn btn-primary waves-effect">Save</button>
                            </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('main-page-content')

@section('css-js')

    <script>
        function saveInspectionPlanSettings(event) {
            event.preventDefault(); // Prevent default form submission

            // Create FormData object from the form
            const formData = new FormData(document.getElementById('inspectionPlanSettingForm'));

            // Append checklist value
            const step_name = document.getElementsByClassName('step_name')[0].value;
            formData.set('step_name', step_name);
            // step number
            const step_order = document.getElementsByClassName('step_order')[0].value;
            formData.set('step_order', step_order);

            // step_order
            // Collect unique table_title values
            const tableTitles = new Set();
            $('.inspection-plan-settings-row').each(function() {
                var table_title = $(this).find('.table_title').val().trim();
                if (table_title) {
                    tableTitles.add(table_title);
                }
            });

            // Clear existing table_title values in FormData
            formData.delete('table_title[]');

            // Add unique table_title values to FormData
            tableTitles.forEach(title => {
                formData.append("table_title[]", title);
            });

            // Send AJAX request
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: 'POST',
                url: "{{ url('/api/inspection-plan-settings-store') }}",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    toastr.success(response.message);
                    window.location.href = "{{ url('/') }}/inspection-plan-settings";
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        // Handle validation errors
                        toastr.error(xhr.responseJSON.message || 'Validation error occurred.');
                    } else if (xhr.status === 500) {
                        // Handle server error
                        toastr.error("Something went wrong");
                    } else {
                        // Handle other errors
                        toastr.error(xhr.responseJSON.message || 'An error occurred');
                    }
                }
            });
        }

        // Function to add more rows
        function addMoreRow(table_title = '') {
            var newRow = `
        <div class="row inspection-plan-settings-row">
            <div class="col-lg-8 col-sm-6 mb-3">
                <label>Title</label>
                <input type="text" class="form-control table_title" name="table_title[]" value="${table_title}">
            </div>
            <div class="col-lg-4 col-sm-6 mb-3 d-flex align-items-end">
                <button type="button" class="btn btn-danger btn-sm delete-row-button">Delete</button>
            </div>
        </div>`;

            // Append the new row
            $('.signature-handover-wrapper').append(newRow);

            // Add event listener for the delete button
            $('.delete-row-button').last().on('click', function() {
                // Check if this is not the first row before removing
                if ($('.inspection-plan-settings-row').length > 1) {
                    $(this).closest('.inspection-plan-settings-row').remove();
                } else {
                    alert('You cannot delete the first row.');
                }
            });
        }
    </script>



    <style>
        @media only screen and(max - width: 280 px) {
            .input - form {
                width: 225 px;
            }
        }

        @media only screen and(min - width: 281 px) and(max - width: 320 px) {
            .input - form {
                width: 264 px;
            }
        }

        @media only screen and(min - width: 321 px) and(max - width: 360 px) {
            .input - form {
                width: 305 px;
            }
        }

        @media only screen and(min - width: 361 px) and(max - width: 375 px) {
            .input - form {
                width: 318 px;
            }
        }

        @media only screen and(min - width: 376 px) and(max - width: 390 px) {
            .input - form {
                width: 336 px;
            }
        }

        @media only screen and(min - width: 391 px) and(max - width: 414 px) {
            .input - form {
                width: 358 px;
            }
        }

        @media only screen and(min - width: 415 px) and(max - width: 430 px) {
            .input - form {
                width: 372 px;
            }
        }

        @media only screen and(min - width: 431 px) and(max - width: 540 px) {
            .input - form {
                width: 483 px;
            }
        }

    < /style>@endsection