@extends('layouts.admin')

    <title>{{ config('app.name', 'Laravel') }} | Admin | PassOut Student</title>

    @include('datepicker')

    <style>
        .edit:hover {
            color: #fff !important;
            background-color: blue !important;
            border-color: #696cff !important;
            border-radius: 5px !important;
        }

        .delete:hover {
            color: #fff !important;
            background-color: #E3242B !important;
            border-color: #E3242B !important;
            border-radius: 5px !important;
        }

        .dtbl_dropdown .dataTables_length {
            width: 65px;
        }

        .dtbl_dropdown .dataTables_length label {
            width: 100%;
        }

        .content {
            /* display: flex; */
            flex-wrap: wrap;
        }

        table.dataTable thead .sorting_asc {
            background-image: none !important;
        }

        table.dataTable thead .sorting {
            background-image: none !important;
        }

        .tbl_type_th {
            min-width: 80px;
        }

        .tble_actions_th {
            min-width: 200px
        }

        .tbl_link_th {
            min-width: 100px;
        }

        .tbl_crt_th {
            min-width: 150px;
        }
    </style>

    <style>
        /* Popup container */
        .popup {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1100;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Popup content */
        .popup-content {
            background-color: #fefefe;
            margin: 5% 20%;
            padding: 20px;
            border: 1px solid #888;
            width: auto;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        /* Close button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            margin-top: -30px;
            margin-right: -18px;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* The Modal (background) */
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            padding-top: 100px;
            /* Location of the box */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>

    @section('main-content')

        
        <div class="{{ Session::has('success') ? '' : 'd-none' }} hide_msg_class"
            style="position: absolute; top:15%; margin-left:1%;">
            <div id="alert">
                @if (Session::has('success'))
                    <div class="alert {{ Session::get('success') == 'Link deleted successfully.' ? 'alert-danger' : 'alert-success' }}"
                        role="alert">
                        {{ Session::get('success') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
            </div>
        </div>
        <div class="content-wrapper">
            <!-- Content -->
            <div class="container-xxl container-p-y row">
                <div class="col-6">
                    <h4 class="fw-bold py-3 mb-4">
                        <span class="text-muted fw-light">Records </span>
                    </h4>
                </div>

                @php
                    $yearRange = session('year_range'); // Example: "2023-2024"
                    $currentDate = now();
                    [$startYear, $endYear] = explode('-', $yearRange);

                    $startDate = \Carbon\Carbon::create($startYear, 4, 1, 0, 0, 0); // April 1st
                    $endDate = \Carbon\Carbon::create($endYear, 3, 31, 23, 59, 59); // March 31st
                @endphp

                <!-- Basic Bootstrap Table -->
                <div class="card pb-3 ms-3 w-100">
                    <h5 class="mt-3 ps-3">PassOut Student List</h5>
                    <div class="table-responsive">
                        <table class="table table-bordered text-nowrap" id="services">
                            <thead>
                                <tr>
                                    <th class="ps-1">S.No</th>
                                    <th class="ps-1 tbl_link_th">First Name</th>
                                    <th class="ps-1">Last Name</th>
                                    <th class="ps-1 tbl_type_th">Class Name</th>
                                    <th class="ps-1">Joining Date</th>
                                    <th class="ps-1">PassOut Date</th>
                                    <th class="ps-1">Re-joining Date</th>
                                    <th class="ps-1 tbl_crt_th">Action</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                @if (isset($students) && count($students) > 0)
                                    @foreach ($students as $key => $student)
                                        <tr id="row_{{ $student->id }}">
                                            <td class="ps-1">{{ $key + 1 }}</td>
                                            <td class="ps-3">{{ $student->first_name ?? 'N/A' }}</td>
                                            <td class="ps-1">{{ $student->last_name ?? 'N/A' }}</td>
                                            <td class="ps-1">{{ $student->last_class_name ?? 'N/A' }}</td>
                                            <td class="ps-1">{{ $student->joining_date ?? 'N/A' }}</td>
                                            <td class="ps-1">{{ $student->passout_date ?? 'N/A' }}</td>
                                            <td class="ps-1">{{ $student->rejoining_date ?? 'N/A' }}</td>
                                            <td>
                                                <div class="dropdown text-center">
                                                    <button type="button" class="btn p-0 dropdown-toggle hide-arrow"
                                                        data-bs-toggle="dropdown">
                                                        <i class="bx bx-dots-vertical-rounded"></i>
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item rejoin-btn" href="javascript:void(0)"
                                                            data-uuid="{{ $student->student_id }}"
                                                            data-last-class="{{ $student->last_class_name }}">
                                                            <i class="bx bx-edit-alt me-1"></i>Re-joining
                                                        </a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="8" class="text-center">No Records Found</td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Modal -->
                <div id="myModal" class="modal" style="padding-top: 50px;">
                    <div class="modal-content" style="width: 40%;">
                        <span class="close" onclick="closePopup1()">&times;</span>
                        <span id="textToToggle"></span>
                    </div>
                </div>

                <!-- Re-Join Modal -->
                <div class="modal fade" id="rejoinModal" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Re-Join Student</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" id="close"></button>
                            </div>
                            <div class="modal-body">
                                <input type="hidden" id="student_uuid">

                                <div class="mb-3">
                                    <label>Select New Class</label>
                                    <select id="new_class" class="form-control">
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label>Select Session</label>
                                    <select class="form-control" id="session_select" name="session">
                                        <option value="">Select Session</option>
                                        @foreach ($sessions as $session)
                                            @if ($session)
                                                <option value="{{ $session }}">{{ $session }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                                <div class="modal-footer">
                                    <button class="btn btn-primary" id="saveRejoin">Re-Join</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!-- / Content -->
        </div>

        <script>
            function closePopup1() {
                document.getElementById('myModal').style.display = 'none';
            }

            // Example function to open modal (you can modify as needed)
            function openPopup(content) {
                document.getElementById('textToToggle').innerHTML = content;
                document.getElementById('myModal').style.display = 'block';
            }
        </script>
        <script>
            $('#rejoinModal').on('hidden.bs.modal', function() {
                $('#student_uuid').val('');
                $('#new_class').empty().append('<option value="">Select Class</option>');
                $('#session_select').empty().append('<option value="">Select Session</option>');
                $('#rejoin_error').text('');
            });
        </script>
        <script>
            $(document).on('click', '.rejoin-btn', function() {
                let uuid = $(this).data('uuid');
                let lastClass = $(this).data('last-class');
                $('#student_uuid').val(uuid);
                $('#rejoinModal').modal('show');

                $.ajax({
                    url: "/get-upper-classes",
                    type: "GET",
                    data: {
                        uuid: uuid,
                        last_class: lastClass
                    },
                    success: function(res) {
                        $('#new_class').html(res.options);
                    }
                });
            });
        </script>

        <script>
            $(document).on('click', '#saveRejoin', function() {

                let uuid = $('#student_uuid').val();
                let newClass = $('#new_class').val();
                let session = $('#session_select').val();
                $('#rejoin_error').text('');
                if (!newClass) {
                    $('#rejoin_error').text('Please select a class');
                    return;
                }
                if (!session) {
                    $('#rejoin_error').text('Please select a session');
                    return;
                }
                $.ajax({
                    url: "/rejoin-student",
                    type: "POST",
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        uuid: uuid,
                        class: newClass,
                        session: session
                    },
                    beforeSend: function() {
                        $('#saveRejoin').text('Processing...').prop('disabled', true);
                    },
                    success: function(response) {
                        alert('Student re-joined successfully');
                        $('#rejoinModal').modal('hide');
                        location.reload();
                    },
                    error: function(xhr) {
                        alert(xhr.responseJSON?.message || 'Something went wrong');
                    },
                    complete: function() {
                        $('#saveRejoin').text('Re-Join').prop('disabled', false);
                    }
                });

            });
        </script>
    @endsection