@extends('admin.layouts.main-layout')


@section('title', $title)

@section('content')
    <!-- Content wrapper -->
    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <form action="{{ route('manage.why.choose.content', ['assignment' => $assignmentId]) }}" method="POST"
                enctype="multipart/form-data">
                @csrf
                <!-- Hoverable Table rows -->
                <h5 class="card-header">Add/Update Assignment Why Choose Us Content<span class="float-end"><a href="{{ route('manage.assignments') }}"
                            class="btn btn-icon rounded-pill btn-outline-secondary float-end"><i class='bx bx-left-arrow-alt'
                                style="font-size: 1.7rem;"></i></a></span></h5>
                <div class="row">
                    <div class="col-12">
                        @if (session('success'))
                            <div class="alert alert-success alert-dismissible" role="alert">
                                {{ session('success') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @elseif (session('error'))
                            <div class="alert alert-danger alert-dismissible" role="alert">
                                {{ session('error') }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <div class="row">
                            <div class="col-12">
                                <div class="card mb-3">
                                    <h5 class="card-header">Why Choose our Assignment Management</h5>
                                    <div class="card-body">
                                        <div class="col-12 mb-3">
                                            <label for="why_choose_headline" class="col-form-label">Why Choose
                                                Headline</label>
                                            <input type="text" class="form-control" id="why_choose_headline"
                                                name="why_choose_headline"
                                                value="{{ $whyChooseHeadline ?? old('why_choose_headline') }}"
                                                placeholder="Enter Headline" />
                                            @error('why_choose_headline')
                                                <div class="text-danger">{{ $message }}</div>
                                            @enderror
                                        </div>
                                        <div id="assignment-why-choose"></div>
                                        <span class="float-end"><button type="button" id="add-why-choose-row"
                                                class="btn rounded-pill btn-icon btn-primary float-end"
                                                style="font-size: 1.7em;">+</button></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="demo-inline-spacing">
                            <input type="submit" value="Update Content" class="btn btn-primary" />
                            <a href="{{ route('manage.assignments') }}" class="btn btn-outline-secondary">Back</a>
                        </div>
                    </div>
                </div>
                <!--/ Hoverable Table rows -->
            </form>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let whyChoose = 1;

            // Function to add a new row
            function addWhyChooseRow(item = {}) {

                // Create the first row (Section Headline)
                const row1 = document.createElement('div');
                row1.className = 'row mb-3';

                // Hidden input for ID
                const idInput = document.createElement('input');
                idInput.type = 'hidden';
                idInput.name = 'choose_ids[]';
                idInput.value = item.choose_id || '';
                row1.appendChild(idInput);

                // Input for Section Headline
                const col1 = document.createElement('div');
                col1.className = 'col-sm-11';

                const input1 = document.createElement('input');
                input1.type = 'text';
                input1.className = 'form-control';
                input1.id = `whyChooseContent-${whyChoose}`;
                input1.name = 'choose_contents[]';
                input1.placeholder = 'Enter Content';
                input1.value = item.choose_content || '';
                input1.required = true;

                // Prevent removal of the required attribute
                Object.defineProperty(input1, 'required', {
                    configurable: false,
                    writable: false,
                    value: true,
                });

                // Input for Section Headline
                const col2 = document.createElement('div');
                col2.className = 'col-sm-1';

                // Button div
                const buttonsDiv = document.createElement('div');
                buttonsDiv.classList.add('float-end');

                // Remove Button
                const removeButton = document.createElement('button');
                removeButton.type = 'button';
                removeButton.classList.add('btn', 'btn-danger', 'btn-icon', 'rounded-pill');
                removeButton.innerHTML = `<i class="bx bx-trash"></i>`;
                removeButton.onclick = function() {
                    if (item && item.choose_id) {
                        $.ajax({
                            url: "{{ route('delete.why.choose') }}",
                            method: "POST",
                            data: {
                                'choose': item.choose_id,
                                '_token': '{{ csrf_token() }}'
                            },
                            success: function(res) {
                                row1.remove();
                            }
                        });
                    } else {
                        row1.remove();
                    }
                };
                buttonsDiv.appendChild(removeButton);

                // Append input to column and label + column to row
                col1.appendChild(input1);
                col2.appendChild(buttonsDiv);
                row1.appendChild(col1);
                row1.appendChild(col2);

                // Append the new row to the form
                document.getElementById('assignment-why-choose').appendChild(row1);

                whyChoose++;
            }


            // Fetch data from the server (get_sub_section_data.php) and add rows
            fetch("{{ route('get.why.choose.content', $assignmentId) }}")
                .then(response => response.json())
                .then(data => {
                    data.forEach(item => {
                        addWhyChooseRow(item);
                    });
                });

            // Event listener to add a new blank row when "Add Row" button is clicked
            document.getElementById('add-why-choose-row').addEventListener('click', () => {
                addWhyChooseRow();
            });
        });
    </script>

@endsection