@extends('backend.template')

@section('content')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0">Add Options</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Dashboards</a></li>
                        <li class="breadcrumb-item active">Add Options</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <div class="col-lg-3 col-md-4">

            <form action="{{ route('options.store') }}" id="storeCustomForm" method="POST">
                @csrf
                <div class="card">

                    <div class="card-body">
                        <div class="form-group">
                            {{ createCustomSelect('tbl_students', 'name', 'student_id', '', 'Student Name', 'students_id', 'form-control select2', 'status<>-1') }}
                        </div>
                        <div class="form-group">
                            {{ createCustomSelect('tbl_programs', 'title', 'program_id', '', 'Program', 'programs_id', 'form-control select2', 'status<>-1') }}
                        </div>
                        <div class="form-group">
                            {{ createText('advices', 'advice', 'Advice') }}
                        </div>
                        <div class="form-group">
                            {{ createText('descriptions', 'description', 'Description') }}
                        </div>
                        <button type="button" id="btn-add-item" class="btn btn-success btn-add-item">
                            <i class="fas fa-plus"></i> Add More
                        </button>
                    </div>


                    <div class="card-footer">
                        <div class="col-md-12">
                            <button type="button" id="btn-submit" class="btn btn-primary btn-store">Submit</button>
                            <a href="{{ route('options.index') }}" class="btn btn-danger btn-cancel">Cancel</a>

                        </div>
                    </div>
                    <input type="hidden" name="programsData" id="programsData[]" value="-1">
                    <input type="hidden" name="advicesData" id="advicesData[]" value="-1">
                    <input type="hidden" name="descriptionsData" id="descriptionsData[]" value="-1">


            </form>
        </div>

    </div>
    <div class="col-lg-9 col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Added Options</h5>
            </div>
            <div class="card-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>S.N.</th>
                            <th>Programs</th>
                            <th>Advice</th>
                            <th>Description</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="addedItemTableBody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    </div>

    w

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var addButton = document.getElementById('btn-add-item');
            var studentsId = document.querySelector('input[name="students_id"]');
            var addedItemTableBody = document.querySelector('#addedItemTableBody');
            var programsSelect = document.querySelector('select[name="programs_id"]');

            var advicesInput = document.querySelector('input[name="advices"]');
            var descriptionsInput = document.querySelector('input[name="descriptions"]');
            var submitButton = document.getElementById('btn-submit');
            // Add hidden fields for JavaScript arrays
            var programsDataField = document.getElementById('programsData[]');
            var advicesDataField = document.getElementById('advicesData[]');
            var descriptionsDataField = document.getElementById('descriptionsData[]');


            var programsData = [];
            var advicesData = [];
            var descriptionsData = [];


            addButton.addEventListener('click', function() {
                var programsId = programsSelect.value;
                var programsTitle = programsSelect.options[programsSelect.selectedIndex].text || "N/A";
                var advice = advicesInput.value || "N/A";
                var description = descriptionsInput.value || "N/A";

                programsData.push(programsId);
                advicesData.push(advice);
                descriptionsData.push(description);

                var newRow = document.createElement('tr');

                var serialNumber = addedItemTableBody.querySelectorAll('tr').length + 1;
                var serialCell = document.createElement('td');
                serialCell.textContent = serialNumber;
                newRow.appendChild(serialCell);

                var programsCell = document.createElement('td');
                programsCell.textContent = programsTitle;
                newRow.appendChild(programsCell);

                var adviceCell = document.createElement('td');
                adviceCell.textContent = advice;
                newRow.appendChild(adviceCell);

                var descriptionCell = document.createElement('td');
                descriptionCell.textContent = description;
                newRow.appendChild(descriptionCell);

                var deleteButton = document.createElement('a');
                deleteButton.innerHTML = '<i class="ri-delete-bin-fill align-bottom text-muted"></i>';
                deleteButton.className = 'text-danger d-inline-block remove-item-btn';
                var deleteCell = document.createElement('td');
                deleteCell.appendChild(deleteButton);
                newRow.appendChild(deleteCell);

                deleteButton.addEventListener('click', function() {
                    addedItemTableBody.removeChild(newRow);

                    var index = programsData.indexOf(programsId);
                    if (index !== -1) {
                        programsData.splice(index, 1);
                        advicesData.splice(index, 1);
                        descriptionsData.splice(index, 1);
                    }
                    programsDataField.value = JSON.stringify(programsData);
                    advicesDataField.value = JSON.stringify(advicesData);
                    descriptionsDataField.value = JSON.stringify(descriptionsData);

                }, );



                addedItemTableBody.appendChild(newRow);

                advicesInput.value = '';
                descriptionsInput.value = '';

                addedItemTableBody.appendChild(newRow);

                programsDataField.value = JSON.stringify(programsData);
                advicesDataField.value = JSON.stringify(advicesData);
                descriptionsDataField.value = JSON.stringify(descriptionsData);


            });

            submitButton.addEventListener('click', function() {
                var formData = new FormData();

                // Append each array to the formData
                programsData.forEach(function(program) {
                    formData.append('programs[]', program);
                });
                advicesData.forEach(function(advice) {
                    formData.append('advices[]', advice);
                });
                descriptionsData.forEach(function(description) {
                    formData.append('descriptions[]', description);
                });

                // Append the CSRF token if needed
                formData.append('_token', '{{ csrf_token() }}');

                // Make an AJAX POST request to the server
                fetch("{{ route('options.store') }}", {
                        method: 'POST',
                        body: formData,
                    })
                    .then(response => response.json())
                    .then(responseData => {
                        if (responseData.status === true) {
                            alert(responseData.message);
                        } else {
                            alert('Error: ' + responseData.message);
                        }
                    })
                    .catch(error => {
                        console.error(error);
                    });

                // Prevent the form submission
                storeCustomForm.submit();
            });


        });
    </script>
@endsection