@extends(getTemplate() . '.panel.layouts.panel_layout')

@push('styles_top')
    <link rel="stylesheet" href="/assets/vendors/daterangepicker/daterangepicker.min.css">
    <link rel="stylesheet" href="/assets/vendors/select2/select2.min.css">
    <style>
        .loading-overlay {
            position: relative;
            top: 0;
            left: 0;
            width: 100%;
            height: 500px;
            background-color: rgba(255, 255, 255, 0);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .spinner {
            width: 50px;
            height: 50px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .dataTables_filter {
            display: none !important;
        }

        .dt-search {
            display: none !important;

        }

        .table th {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        div.dt-container div.dt-layout-row {
            margin:0 !important;

        }
        .dt-layout-row .dt-layout-table {
            margin:0!important;
        }
        div.dt-container .dt-length {
            display: none !important;
        }
    </style>
@endpush

@section('content')
    <section class="mt-5">

        <!-- Overview Section -->
        @include('web.default.panel.organisations.department-training.partials._overview', [
            'totalPackages' => $totalPackages,
            'activePackages' => $activePackages,
            'totalEnrolledStudents' => $totalEnrolledStudents,
        ])
        <section class="mt-5">
            <!-- Buttons for filtering and creating packages -->
            <div class="d-flex justify-content-between mb-5">
                <button class="btn btn-primary" onclick="openFilterModal()">Filter Packages</button>
                <button class="btn btn-success" data-organisation-id="{{ $organisation->id }}" id="openCreatePackageModal">
                    <i class="ki-outline ki-plus fs-2"></i>Create Department Training Package
                </button>
            </div>
        </section>

        <section class="">
            <!-- Department Training Packages Table -->
            @if (!empty($trainingPackages) && $trainingPackages->isNotEmpty())
                <div class="loading-overlay" style="display: none;">
                    <div class="spinner"></div>
                </div>
                <div id="packagesTableContainer" class="card card-flush h-md-100 pt-0">
                    <table id="packagesTable" class="table table-hover table-row-dashed align-middle gs-0 gy-3 my-0">
                        <thead>
                            <tr>
                                <th class="text-center fw-bold">Package Name</th>
                                <th class="text-center fw-bold">Branch</th>
                                <th class="text-center fw-bold">Employees</th>
                                <th class="text-center fw-bold">Completion</th>
                                <th class="text-center fw-bold">Courses</th>
                                <th class="text-center fw-bold">Status</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($trainingPackages as $package)
                                <tr>
                                    {{-- Package Name --}}
                                    <td class="rounded-start text-center text-gray-800">{{ $package->name }}</td>
                                    <td class=" text-center text-gray-800">{{ $package->organisationName }}</td>

                                    {{-- Student Count --}}
                                    <td class="text-center text-gray-800">{{ $package->enrolledStudentsCount }}</td>

                                    {{-- Completion Percentage --}}

                                    <td class="text-center text-gray-800">
                                        @include(
                                            'web.default.panel.organisations.department-training.partials._completion',
                                            ['package' => $package]
                                        )
                                    </td>

                                    {{-- Courses Count --}}
                                    <td class="text-center text-gray-800">{{ $package->webinars_count }}</td>

                                    {{-- Status --}}
                                    <td class="text-center">
                                        @if ($package->status == 'active')
                                            <span class='badge bg-success'>Active</span>
                                        @else
                                            <span class='badge bg-danger'>Disabled</span>
                                        @endif
                                    </td>
                                    <td class="text-start rounded-end">
                                        <div class="dropdown">
                                            <button class="btn btn-sm btn-light dropdown-toggle" type="button"
                                                id="packageActionsDropdown{{ $package->id }}" data-bs-toggle="dropdown"
                                                aria-expanded="false">
                                                <i class="ki-outline ki-setting-2"></i>

                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end"
                                                aria-labelledby="packageActionsDropdown{{ $package->id }}">

                                                <li>
                                                    <a class="dropdown-item showDetailsBtn" href="#"
                                                        data-organisation-id="{{ $organisation->id }}"
                                                        data-package-id="{{ $package->id }}">
                                                        View Details
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item editPackageBtn" href="#"
                                                        data-organisation-id="{{ $organisation->id }}"
                                                        data-package-id="{{ $package->id }}">
                                                        Edit
                                                    </a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item text-danger deletePackageBtn" href="#"
                                                        data-organisation-id="{{ $organisation->id }}"
                                                        data-package-id="{{ $package->id }}">
                                                        Delete
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @else
                <div class="text-center">
                    <img src="/assets/default/img/no_result.png" alt="No Packages" class="img-fluid"
                        style="max-width: 300px;">
                    <h3 class="mt-3">No Department Training Packages</h3>
                    <p>Create your first department training package to get started.</p>
                    <button class="btn btn-primary" id="openCreatePackageModal"> <i
                            class="ki-outline ki-plus fs-2"></i>Create Department Training Package
                    </button>
                </div>
            @endif
        </section>

        {{-- <div class="my-4" id="pagination">
            {{ $trainingPackages->appends(request()->input())->links('vendor.pagination.panel') }}
        </div> --}}

        <!-- Modals will be added here later -->
        <!-- Create Package Modal -->
        <div id="modalContainer"></div>

    @endsection

    @push('scripts_bottom')
        <script src="/assets/default/vendors/moment.min.js"></script>
        <script src="/assets/default//vendors/daterangepicker/daterangepicker.min.js"></script>
        <script src="/assets/default//vendors/select2/select2.min.js"></script>
        <script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>

        {{-- <script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script> --}}
        <script>
            $(document).ready(function() {
                // Handle opening the Create Package modal
                $('#openCreatePackageModal').on('click', function() {
                    // Remove existing modal if it exists
                    $('#createPackageModal').remove();
                    // Fetch the modal content
                    $.get('{{ route('department_training.create_modal') }}', {
                        organisation_id: $(this).data('organisation-id')
                    }, function(data) {
                        $('#modalContainer').html(data);
                        var createPackageModal = new bootstrap.Modal(document.getElementById(
                            'createPackageModal'));
                        createPackageModal.show();
                    }).fail(function() {
                        console.error('Failed to load create package modal.');
                    });
                });

                $(document).on('click', '.editPackageBtn', function() {
                    // Remove existing modal if it exists
                    $('#editPackageModal').remove();

                    // Fetch the modal content
                    $.get('{{ route('department_training.edit_modal') }}', {
                        organisation_id: $(this).data('organisation-id'),
                        package_id: $(this).data('package-id')
                    }, function(data) {
                        $('#modalContainer').html(data);
                        var editPackageModal = new bootstrap.Modal(document.getElementById(
                            'editPackageModal'));
                        editPackageModal.show();
                    }).fail(function() {
                        console.error('Failed to load edit package modal.');
                    });
                });
                $(document).on('click', '.showDetailsBtn', function() {
                    // Remove existing modal if it exists
                    $('.viewDetailsModal').remove();

                    // Fetch the modal content
                    $.get('{{ route('department_training.view_details_modal') }}', {
                        organisation_id: $(this).data('organisation-id'),
                        package_id: $(this).data('package-id')
                    }, function(data) {
                        $('#modalContainer').html(data);
                        var viewDetailsModal = new bootstrap.Modal(document.getElementById(
                            'viewDetailsModal'));
                        viewDetailsModal.show();
                    }).fail(function() {
                        console.error('Failed to load view details modal.');
                    });
                });
                $(document).on('click', '.deletePackageBtn', function() {
                    var organisationId = $(this).data('organisation-id');
                    var packageId = $(this).data('package-id');
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, delete it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            $.ajax({
                                url: '{{ route('department_training.delete_package', '') }}/' +
                                    packageId,
                                type: 'DELETE',
                                data: {
                                    organisation_id: organisationId,
                                    package_id: packageId,
                                    _token: '{{ csrf_token() }}' // Include CSRF token for Laravel
                                },
                                dataType: 'json',
                                success: function(response) {
                                    if (response.success) {
                                        Swal.fire(
                                            'Deleted!',
                                            response.message,
                                            'success'
                                        ).then(() => {
                                            location.reload();
                                        });
                                    } else {
                                        Swal.fire(
                                            'Error!',
                                            response.message,
                                            'error'
                                        );
                                    }
                                },
                                error: function(xhr) {
                                    var errorMessage =
                                        'An error occurred while deleting the package.';
                                    if (xhr.responseJSON && xhr.responseJSON.message) {
                                        errorMessage = xhr.responseJSON.message;
                                    }
                                    Swal.fire(
                                        'Error!',
                                        errorMessage,
                                        'error'
                                    );
                                    console.error('Failed to delete package:', xhr
                                        .responseText);
                                }
                            });
                        }
                    });
                });
                // Initialize DataTable
                var table = $('#packagesTable').DataTable({
                    paging: false,
                    order: [
                        [0, "asc"]
                    ],
                    bInfo: false,
                    "ordering": true,
                    "columnDefs": [{
                            "orderable": false,
                            "targets": 6
                        } // Disable sorting on the actions column
                    ],
                    searching: false

                });
                // Add custom search input
                $('#packagesTable_filter').html(
                    '<input type="text" id="customSearch" class="form-control" placeholder="Search packages">');

                // Custom search functionality
                $('#customSearch').on('keyup', function() {
                    table.search(this.value).draw();
                });
            });
        </script>
    @endpush