@extends('layouts.app')

@section('css')
    <link href="{{ asset('assets/css/student-listing.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
    @include('layouts.toolbar')

    <div id="kt_content_container" class="d-flex flex-column-fluid align-items-start container-xxl student-listing-page">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="student-listing-shell">
                <div class="student-page-header">
                    <div class="student-title-wrap">
                        <span class="student-title-icon">
                            <i class="fa-solid fa-user-group"></i>
                        </span>
                        <div>
                            <h1 class="student-page-title">Students</h1>
                            <p class="student-page-subtitle">All students linked to this parent account</p>
                        </div>
                    </div>

                    @if(session('role') == 'PARENT')
                        <a href="{{ url('parents/students/'.encryptedId(auth()->user()->parent_id).'/create') }}" class="student-add-btn">
                            <i class="fa-solid fa-plus"></i>
                            Add student
                        </a>
                    @else
                        <a href="{{ url('parents/students/'.encryptedId($parentID).'/create') }}" class="student-add-btn">
                            <i class="fa-solid fa-plus"></i>
                            Add student
                        </a>
                    @endif
                </div>

                <div class="student-loading-state is-visible" id="student-loading-state">
                    Loading students...
                </div>
                <div class="student-card-grid" id="students-card-grid"></div>
                <div class="student-empty-state" id="student-empty-state">
                    No students found for this parent.
                </div>

                <div class="student-hidden-table">
                    <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_students">
                        <thead>
                        <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                            <th>ID</th>
                            <th>Student Name</th>
                            <th>Father Info</th>
                            <th>Mother Info</th>
                            <th>Grade</th>
                            <th>Enrollment Status</th>
                            <th>Deposit Status</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-600"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- get summer enrollment summary --}}
    <div class="summer-enrollment-summary-data"></div>
@endsection

@section('js')
    <script type="text/javascript">
        var studentsTable = null;
        var studentAvatarPalette = ['is-blue', 'is-pink', 'is-purple', 'is-green'];

        $(function() {
            datatable();

            $(document).on('click', '.trash', function(e) {
                e.preventDefault();
                deleteConfirmation($(this).attr('data-id'));
            });

            $(document).on('click', '.enrollment-summery', function(e) {
                e.preventDefault();
                getEnrollmentSummary($(this).attr('data-id'));
            });
        });

        function datatable() {
            if ($.fn.DataTable.isDataTable('#kt_table_students')) {
                $('#kt_table_students').DataTable().destroy();
                $('#kt_table_students tbody').empty();
            }

            $('#student-loading-state').addClass('is-visible');

            studentsTable = $('#kt_table_students').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ url('parents/students/'.encryptedId($parentID).'/list') }}",
                order: [[0, 'asc']],
                pageLength: 12,
                lengthChange: false,
                dom: 'rt<"student-list-footer"ip>',
                columns: [
                    {data: 'ID', name: 'ID'},
                    {data: 'name', name: 'name'},
                    {data: 'father_info', name: 'father_info'},
                    {data: 'mother_info', name: 'mother_info'},
                    {data: 'grade', name: 'grade'},
                    {data: 'enrollment_status', name: 'enrollment_status'},
                    {data: 'deposit_status', name: 'deposit_status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ],
                drawCallback: function() {
                    var api = this.api();
                    renderStudentCards(api.rows({ page: 'current' }).data().toArray());
                    $('#student-loading-state').removeClass('is-visible');
                }
            });
        }

        function renderStudentCards(rows) {
            if (!rows.length) {
                $('#students-card-grid').empty();
                $('#student-empty-state').addClass('is-visible');
                return;
            }

            $('#student-empty-state').removeClass('is-visible');
            $('#students-card-grid').html(rows.map(function(row, index) {
                return buildStudentCard(row, index);
            }).join(''));
        }

        function buildStudentCard(row, index) {
            var id = normalizeText(row.id || row.ID);
            var name = toTitleCase(normalizeText(row.first_name) + ' ' + normalizeText(row.last_name)) || 'Unnamed student';
            var grade = tableValueText(row.grade);
            var enrollmentStatus = tableValueText(row.enrollment_status);
            var firstInitial = name.charAt(0).toUpperCase() || 'S';
            var avatarClass = studentAvatarPalette[index % studentAvatarPalette.length];

            var depositNode = tableValueNode(row.deposit_status);
            var depositLink = depositNode.querySelector('a');
            var depositHref = depositLink ? depositLink.getAttribute('href') : '';
            var depositText = normalizeText(depositNode.textContent || depositNode.innerText);

            var actionHtml = tableValueNode(row.action).innerHTML;

            var isPending = enrollmentStatus.toLowerCase().indexOf('pending') !== -1;
            var metaText = 'Student ID #' + id;
            if (grade && grade !== '-' && !isPending) {
                metaText += ' · Grade ' + grade;
            }

            return '' +
                '<article class="student-card">' +
                    '<div class="student-card-main">' +
                        '<div class="student-card-top">' +
                            '<div class="student-identity">' +
                                '<span class="student-avatar ' + avatarClass + '">' + escapeHtml(firstInitial) + '</span>' +
                                '<div>' +
                                    '<h2 class="student-name">' + escapeHtml(name) + '</h2>' +
                                    '<p class="student-meta">' + escapeHtml(metaText) + '</p>' +
                                '</div>' +
                            '</div>' +
                            buildStatusPill(enrollmentStatus) +
                        '</div>' +
                        '<div class="student-pill-row">' +
                            buildDepositPill(depositText, depositHref) +
                        '</div>' +
                        '<div class="student-contact-list">' +
                            buildContactRow('Father', row.father_full_name, row.father_email, row.father_mobile_number, 'is-father') +
                            buildContactRow('Mother', row.mother_full_name, row.mother_email, row.mother_mobile_number, 'is-mother') +
                        '</div>' +
                    '</div>' +
                    '<div class="student-card-actions">' + actionHtml + '</div>' +
                '</article>';
        }

        function buildStatusPill(status) {
            var clean = normalizeText(status);
            if (!clean || clean === '-') {
                return '';
            }

            var pillClass = clean.toLowerCase().indexOf('complet') !== -1 ? 'is-success' : 'is-muted';
            return '<span class="student-pill ' + pillClass + '">' + escapeHtml(toTitleCase(clean)) + '</span>';
        }

        function buildDepositPill(status, href) {
            var clean = normalizeText(status);
            if (!clean) {
                return '';
            }

            var isDue = clean.toLowerCase().indexOf('due') !== -1;
            var pillClass = isDue ? 'is-danger' : 'is-success';
            var icon = isDue ? 'fa-circle-exclamation' : 'fa-circle-check';
            var inner = '<i class="fa-solid ' + icon + '"></i>' + escapeHtml(toTitleCase(clean));

            if (href) {
                return '<a href="' + escapeHtml(href) + '" class="student-pill ' + pillClass + ' is-clickable" ' +
                    'title="Payments & Refund">' + inner + '</a>';
            }

            return '<span class="student-pill ' + pillClass + '">' + inner + '</span>';
        }

        function buildContactRow(label, name, email, phone, styleClass) {
            var cleanName = normalizeText(name);
            var cleanEmail = normalizeText(email);
            var cleanPhone = normalizeText(phone);
            var displayName = label + ': ' + (cleanName || 'Not added');

            var meta = '';
            if (cleanEmail) {
                meta += '<span class="student-contact-meta">' +
                    '<span class="student-contact-tag is-email"><i class="fa-regular fa-envelope"></i>Email</span>' +
                    '<span class="student-contact-val">' + escapeHtml(cleanEmail) + '</span>' +
                    '</span>';
            }
            if (cleanPhone) {
                meta += '<span class="student-contact-meta">' +
                    '<span class="student-contact-tag is-phone"><i class="fa-solid fa-phone"></i>Mobile</span>' +
                    '<span class="student-contact-val">' + escapeHtml(cleanPhone) + '</span>' +
                    '</span>';
            }
            if (!meta) {
                meta = '<span class="student-contact-meta">' +
                    '<span class="student-contact-val is-empty">No contact details</span>' +
                    '</span>';
            }

            return '' +
                '<div class="student-contact-row">' +
                    '<span class="student-contact-initial ' + styleClass + '">' + escapeHtml(label.charAt(0)) + '</span>' +
                    '<span class="student-contact-text">' +
                        '<span class="student-contact-name">' + escapeHtml(displayName) + '</span>' +
                        meta +
                    '</span>' +
                '</div>';
        }

        function tableValueNode(html) {
            var container = document.createElement('div');
            container.innerHTML = String(html === null || html === undefined ? '' : html);
            return container.querySelector('.table_value') || container;
        }

        function tableValueText(html) {
            var node = tableValueNode(html);
            return (node.textContent || node.innerText || '').replace(/\s+/g, ' ').trim();
        }

        function normalizeText(value) {
            if (value === null || value === undefined) {
                return '';
            }

            var element = document.createElement('div');
            element.innerHTML = String(value);

            return (element.textContent || element.innerText || '').replace(/\s+/g, ' ').trim();
        }

        function escapeHtml(value) {
            return $('<div/>').text(value === null || value === undefined ? '' : value).html();
        }

        function toTitleCase(value) {
            return normalizeText(value).toLowerCase().replace(/\b\w/g, function(letter) {
                return letter.toUpperCase();
            });
        }

        function deleteConfirmation(id){
            Swal.fire({
                icon: 'warning',
                title: 'Are you sure you want to delete this record?',
                showDenyButton: false,
                showCancelButton: true,
                confirmButtonText: 'Yes'

            }).then(function(result) {
                if (result.isConfirmed) {
                    var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: 'POST',
                        url: "{{ url('parents/students/delete') }}",
                        data: {
                            _token: CSRF_TOKEN,
                            studentID: id
                        },
                        success: function (results) {
                            if (results.status == 'Success') {
                                swal("Done!", results.status, "success");
                                datatable();
                            } else {
                                swal("Error!", results.status, "error");
                            }
                        }
                    });
                } else {
                    return false;
                }
            });
        }

        function getEnrollmentSummary(studentId) {
            var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
            $.ajax({
                type: 'POST',
                url: "{{ url('student/enrollmant-summery') }}",
                data: {
                    _token: CSRF_TOKEN,
                    modal: 'yes',
                    studentId: studentId
                },
                success: function (data) {
                    $(".summer-enrollment-summary-data").html(data);
                    $('.getEnrollmentSummary').modal('show');
                }
            });
        }
    </script>
@endsection