@extends('layouts.master')

@section('title', 'Class Rooms Setup')
@section('content_title', __('Academic.Class Rooms Setup Add'))

@section('content_summary', 'Class Rooms Setup Summury')

@section('main_content')

    <div>
        @if (session('success'))
        <script>
           alert("Data Updated Successfully !!");
        </script>
        @endif
    </div>

    {{-- add form --}}
    <div class="main-card mb-3 card">
        <div class="card-body">
            @include('academic::class_rooms_setup.create')
        </div>
    </div>

    <div class="main-card mb-3 card">
        <div class="card-body">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-0" class="mb-2 me-2 btn btn-shadow-primary btn-primary">
                    {{ __('core.home') }}</a>
                </li>
                <li class="nav-item">
                    <a data-bs-toggle="tab" href="#tab-eg10-1" class="mb-2 me-2 btn btn-shadow-danger btn-danger">
                        {{ __('core.trash') }}
                    </a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="tab-pane active" id="tab-eg10-0" role="tabpanel">
                     @include('academic::class_rooms_setup.partials.home_list')

                </div>
                <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                    @include('academic::class_rooms_setup.partials.trash_list')
                </div>
            </div>
        </div>
    </div>
@endsection


@push('script')
<script>
     $(document).ready(function()
        {
            // Initialize DataTable
            $('#home').DataTable({
                responsive: true
            });
            $('#trash').DataTable({
                responsive: true
            });

            //submit add form
            $('#addSubmit').on('submit', function(e) {
            e.preventDefault(); // Prevent the form from submitting via the browser
            // Gather form data
            var formData = new FormData(this);
            // Send AJAX request
            $.ajax({
                url: $(this).attr('action'), // The route defined in the form's action attribute
                type: $(this).attr('method'), // The form's method attribute (e.g., POST)
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                   //$('#addModal').modal('hide');
                    if(response.success) {
                        toastr.success(response.msg);
                    } else {
                        toastr.error(response.msg);
                    }
                    loadData();
                    $('#addSubmit')[0].reset();
                    clearVisualization();
                },
                error: function(response) {
                    // Handle error response
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'There was an error adding the classroom layout. Please try again.',
                        confirmButtonText: 'OK'
                    });
                }
            });
        });

            //Submit edit form
            function editSubmit() {
                $('#editSubmit').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {
                            if(response.success) {
                            $('#editModal').modal('hide');
                            loadData();
                            toastr.success(response.msg);
                            }else
                            {
                            toastr.error(response.msg);
                            }
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                });
            }
            editSubmit();

            // Toggle status open modal
            var updateUrl = '';
            $(document).on('click', '.update', function(e) {
                e.preventDefault();
                updateUrl = $(this).attr('href');
                $('#confirm-update').data('update-url', updateUrl); // Store update URL
            });

            // Confirm Toggle Update
            $(document).on('click', '#confirm-update', function() {
                updateUrl = $(this).data('update-url'); // Retrieve update URL
                $.ajax({
                    method: 'PUT',
                    url: updateUrl,
                    success: function(response) {
                        if (response.success) {
                            $('#updateModal').modal('hide');
                            loadData();
                            toastr.success(response.msg);
                        } else {
                            alert(response.msg);
                        }
                    },
                    error: function(response) {
                        console.error('Error:', response);
                        alert('An error occurred while updating the status.');
                    }
                });
            });

            // Delete
            var destroyUrl = '';
            $(document).on('click', '.destroy', function(e) {
                e.preventDefault();
                destroyUrl = $(this).attr('href');
                $('#confirm-destroy').data('destroy-url', destroyUrl); // Store destroy URL
            });
            // Confirm destroy modal
            $(document).on('click', '#confirm-destroy', function() {
                destroyUrl = $(this).data('destroy-url'); // Retrieve destroy URL
                $.ajax({
                    method: 'GET',
                    url: destroyUrl,
                    success: function(response) {
                        if(response.success) {
                        $('#destroyModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);
                        } else {
                        toastr.error(response.msg);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });
            // Restore
            var restoreUrl = '';
            $(document).on('click', '.restore', function(e) {
                e.preventDefault();
                restoreUrl = $(this).attr('href');
                $('#confirm-restore').data('restore-url', restoreUrl); // Store restore URL
            });
            // Confirm restore modal
            $(document).on('click', '#confirm-restore', function() {
                restoreUrl = $(this).data('restore-url'); // Retrieve restore URL
                $.ajax({
                    method: 'GET',
                    url: restoreUrl,
                    success: function(response) {
                        if(response.success) {
                        $('#restoreModal').modal('hide');
                        loadData();
                        toastr.success(response.msg);
                        } else {
                        toastr.error(response.msg);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });
            // Delete
            var deleteUrl = '';
            $(document).on('click', '.delete', function(e) {
                e.preventDefault();
                deleteUrl = $(this).attr('href');
                $('#confirm-delete').data('delete-url', deleteUrl); // Store delete URL
            });
            // Confirm delete modal
            $(document).on('click', '#confirm-delete', function() {
                deleteUrl = $(this).data('delete-url'); // Retrieve delete URL
                $.ajax({
                    method: 'GET',
                    url: deleteUrl,
                    success: function(response) {
                        if(response.success) {
                            $('#deleteModal').modal('hide');
                            loadData();
                            toastr.success(response.msg);
                        }
                        else{
                        toastr.error(response.msg);
                        }
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            });

            //load data
            function loadData() {
            $.ajax({
                method: 'GET',
                url: "{{ route('academic.class_rooms_setup.index') }}",
                success: function(response) {
                    // Destroy the existing DataTable instance
                    if ($.fn.DataTable.isDataTable('#home')) {
                        $('#home').DataTable().destroy();
                    }
                    if ($.fn.DataTable.isDataTable('#trash')) {
                        $('#trash').DataTable().destroy();
                    }

                    // Replace the table body with the new data
                    $('#home-data').html(response.homeData);
                    $('#trash-data').html(response.trashData);

                    // Reinitialize the DataTable
                    $('#home').DataTable({
                        responsive: true
                    });
                    $('#trash').DataTable({
                        responsive: true
                    });

                    // visible the layout after refresh
                    document.querySelectorAll('[id^="visualize-"]').forEach(function(container) {
                        var row = parseInt(container.getAttribute('data-row')) || 0;
                        var column = parseInt(container.getAttribute('data-column')) || 0;
                        var seatsPerRow = parseInt(container.getAttribute('data-seats-per-row')) || 0;
                        var seatsPerColumn = parseInt(container.getAttribute('data-seats-per-column')) || 0;
                        var maxCapacity = parseInt(container.getAttribute('data-max-capacity')) || 0;
                        visualize(row, column, seatsPerRow, seatsPerColumn, maxCapacity, container);
                    });
                },
                error: function(response) {
                    console.log(response);
                }
            });
        }
            // Initial load
            loadData();
        });
</script>
@endpush