@extends('layouts.master')

@section('title', 'Group Optional Subject')
@section('content_title', __('Academic.Group Optional Subject'))

@section('content_summary', 'Group Optional Subject')

@section('content_taskbar')
    <li class="nav-item">
        <a href="{{ route('academic.group-optional-subjects.create') }}" class="nav-link" id="add" data-bs-toggle="modal"
            data-bs-target="#addModal">
            <i class="nav-link-icon pe-7s-plus"></i>
            <span>{{ __('Add Group Optional Subject') }}</span>
        </a>
    </li>
@endsection

@section('main_content')
    <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::group-optional-subjects.partials.home')

                </div>
                <div class="tab-pane" id="tab-eg10-1" role="tabpanel">
                    <h5>Trash Section is Not Available for this Feature</h5>
                </div>
            </div>
        </div>
    </div>
@endsection


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

             // Open add form
            $(document).on('click', '#add', function(e) {
                e.preventDefault();
                $.ajax({
                    method: 'GET',
                    url: $(this).attr('href'),
                    success: function(response) {
                        $("#addModal .modal-body").html(response);
                        addSubmit(); // Reinitialize addSubmit for new content
                    },
                    error: function(response) {
                        $("#addModal .modal-body").html(
                        'Something Wrong, Please Try Again Later.');
                    }
                });
            });
            // Submit add form
            function addSubmit() {
                $('#addSubmit').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        method: 'POST',
                        url: $(this).attr('action'),
                        data: $(this).serialize(),
                        success: function(response) {
                            $('#addModal').modal('hide');
                            if(response.success) {
                                toastr.success(response.msg);
                            } else {
                                toastr.error(response.msg);
                            }
                            loadData();
                        },
                        error: function(response) {
                            console.log(response);
                        }
                    });
                });
            }
            // Load data
            function loadData() {
                $.ajax({
                    method: 'GET',
                    url: "{{ route('academic.group-optional-subjects.index') }}",
                    success: function(response) {
                        // Destroy the existing DataTable instance
                        if ($.fn.DataTable.isDataTable('#home')) {
                            $('#home').DataTable().destroy();
                        }
                        // Replace the table body with the new data
                        $('#home-data').html(response.homeData);
                        // Reinitialize the DataTable
                        $('#home').DataTable({
                            responsive: true
                        });
                    },
                    error: function(response) {
                        console.log(response);
                    }
                });
            }
            // Initial load
            loadData();
        });
    </script>
@endpush