@extends(getTemplate() . '.panel.layouts.panel_layout')
@section('title', $data['pageTitle'] . ' | ' . $generalSettings['site_name'])

@push('styles_top')
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> --}}
    {{-- <link href="https://cdn.jsdelivr.net/npm/halfmoon@2.0.2/css/halfmoon.min.css" rel="stylesheet" integrity="sha256-RjeFzczeuZHCyS+Gvz+kleETzBF/o84ZRHukze/yv6o=" crossorigin="anonymous"> --}}
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> --}}
    {{-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> --}}

    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css">
    <link href="/assets/css/tree.css" rel="stylesheet" />
@endpush
@section('content')
    <section>

        {{-- <h2 class="section-title">Manage Organisation Structure</h2> --}}



        <!-- Add New Child Organisation Modal -->
        <div class="modal fade" id="addChildOrganModal" tabindex="-1" aria-labelledby="addChildOrganModalLabel"
            aria-inert="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0">
                        <h5 class="modal-title fs-4" id="addChildOrganModalLabel">
                            {{ trans('panel.add_child_organisation') }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body pt-0">
                        <form action="" method="POST" id="addChildOrgForm">
                            @csrf

                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label class="input-label">{{ trans('public.name') }}</label>
                                        <input type="text" name="organ_name"
                                            class="form-control @error('organ_name') is-invalid @enderror"
                                            placeholder="{{ trans('public.name') }}" />
                                        @error('organ_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label class="input-label">Address</label>
                                        <input type="text" name="address" class="form-control" placeholder="Address" />

                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label class="input-label">{{ trans('auth.email') }}</label>
                                        <input type="email" name="email"
                                            class="form-control @error('email') is-invalid @enderror"
                                            placeholder="{{ trans('auth.email') }}" />
                                        @error('email')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12 col-md-6">
                                    <div class="form-group">
                                        <label class="input-label">Confirm Email</label>
                                        <input type="email" name="email_confirmation"
                                            class="form-control @error('email') is-invalid @enderror"
                                            placeholder="Confirm Email " />
                                        @error('email')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>



                            <div class="mt-4 d-flex justify-content-end">
                                <button type="button" class="btn btn-secondary me-2"
                                    data-bs-dismiss="modal">{{ trans('public.cancel') }}</button>
                                <button type="submit" class="btn btn-primary">{{ trans('public.add') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- List Managers Modal -->
        <div class="modal fade" id="managersModal" tabindex="-1" role="dialog" aria-labelledby="managersModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content" id="managersModalContent">
                    <!-- Modal content will be loaded here via AJAX -->
                </div>
            </div>
        </div>
        <!-- Edit Child Organisation Modal -->
        <div class="modal fade" id="editChildOrganModal" tabindex="-1" aria-labelledby="editChildOrganModalLabel"
            aria-inert="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0">
                        <h5 class="modal-title fs-4" id="editChildOrganModalLabel">Edit Branch</h5>
                    </div>
                    <div class="modal-body pt-0">
                        <form id="editChildOrganForm" method="POST">
                            @csrf
                            @method('PUT')
                            <input type="hidden" name="child_org_id" id="childOrgId">
                            <div class="mb-3">
                                <label for="editOrganName" class="form-label">{{ trans('public.name') }}</label>
                                <input type="text" name="organ_name" id="editOrganName" class="form-control" required>
                            </div>
                            <div class="mb-3">
                                <label for="editStudentLimit"
                                    class="form-label">{{ trans('public.student_limit') }}</label>
                                <input type="number" name="student_limit" id="editStudentLimit" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label for="editStatus" class="form-label">{{ trans('public.status') }}</label>
                                <select name="status" id="editStatus" class="form-select" required>
                                    <option value="active">{{ trans('public.active') }}</option>
                                    <option value="inactive">{{ trans('public.inactive') }}</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="editDescription" class="form-label">{{ trans('public.description') }}</label>
                                <textarea name="description" id="editDescription" class="form-control" rows="4"></textarea>
                            </div>
                            <div class="mt-4 d-flex justify-content-end">
                                <button type="button" class="btn btn-secondary me-2" onclick="closeEditModal()">
                                    {{ trans('public.cancel') }}
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    {{ trans('public.save_changes') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div id="organisation-tree" class="tree d-none d-xl-flex justify-content-center"></div>
    <div class="container ">
        <div class="row h-100">
        <div class="d-flex justify-content-center align-items-center d-xl-none">
            <div class="d-flex flex-column align-items-center justify-content-center text-center p-3">
                <i class="fas fa-desktop fa-3x mb-3"></i>
                <h4>Optimal Viewing Experience</h4>
                <p>This page is optimized for desktop viewing. For the best experience and full functionality, please access
                    it
                    from a device with a larger screen.</p>
                </p>
            </div>
        </div>
        </div>
    </div>
@endsection

@push('scripts_bottom')
    <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
    {{-- <script src="/assets/default/js/panel/tree.js"></script> --}}
    @include('web.default.panel.organisations.js.tree')
    <script>
        $(document).ready(function() {
            if ($.fn.DataTable) {
                $('#childOrganisationsTable').DataTable();
            } else {
                console.error('DataTables is not loaded');
            }


            $('#addChildOrgForm').submit(function(e) {
                e.preventDefault();
                var formData = $(this).serialize();
                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#addChildOrganModal').modal('hide');
                        Swal.fire({
                            title: 'Success',
                            text: 'Child organization added successfully',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false,
                            position: 'center',
                            toast: true
                        });
                        setTimeout(function() {
                            initializeTree();
                        }, 100);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error adding child organization:", status, error);
                        let errorMessage =
                            'An error occurred while adding the child organization. Please try again.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            title: 'Error',
                            text: errorMessage,
                            icon: 'error',
                            timer: 2000,
                            showConfirmButton: false,
                            position: 'center',
                            toast: true
                        });
                    }
                });
            });
            $('#editChildOrganForm').submit(function(e) {
                e.preventDefault();
                var childOrgId = $('#childOrgId').val();
                var formData = $(this).serialize();
                $.ajax({
                    url: "{{ route('organisation_update_child', '') }}/" + childOrgId,
                    method: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        $('#editChildOrganModal').modal('hide');
                        Swal.fire({
                            title: 'Success',
                            text: 'Child organization updated successfully',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false,
                            position: 'top-right',
                            toast: true
                        });
                        setTimeout(function() {
                            initializeTree();
                        }, 100);
                    },
                    error: function(xhr, status, error) {
                        console.error("Error updating child organization:", status, error);
                        Swal.fire({
                            title: 'Error',
                            text: 'An error occurred while updating the child organization. Please try again.',
                            icon: 'error',
                            timer: 2000,
                            showConfirmButton: false,
                            position: 'top-right',
                            toast: true
                        });
                    }
                });
            });



        });
    </script>
@endpush