@extends('layouts.app')

@section('css')
    <link href="{{ asset('assets/css/parent-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 parent-listing-page">
        <div class="content flex-row-fluid" id="kt_content">
            <div class="parent-listing-shell">

                <div class="parent-page-header">
                    <div class="parent-title-wrap">
                        <h1 class="parent-page-title">
                            Parents
                            <span class="parent-count-badge" id="parent-count-badge">0</span>
                        </h1>
                        <p class="parent-page-subtitle">All linked parent accounts and their associated students.</p>
                    </div>

                    <div class="parent-header-actions">
                        <a href="{{ url('parents/export') }}" class="parent-btn parent-btn-light">
                            <i class="fa-solid fa-file-arrow-down"></i>
                            Export
                        </a>
                        <a href="{{ url('parents/create') }}" class="parent-btn parent-btn-primary">
                            <i class="fa-solid fa-plus"></i>
                            Add Parent
                        </a>
                    </div>
                </div>

                <div class="parent-toolbar">
                    <div class="parent-length-wrap">
                        <span>Show</span>
                        <select id="parent-page-length" class="parent-length-select" aria-label="Entries per page">
                            <option value="10">10</option>
                            <option value="25" selected>25</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        <span>entries</span>
                    </div>

                    <label class="parent-search-field" for="parent-search-input">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <input type="search" id="parent-search-input" class="parent-search-input"
                               placeholder="Search parents, emails, phone numbers...">
                    </label>
                </div>

                <div class="parent-list">
                    <div class="parent-row parent-row-head">
                        <div class="parent-cell parent-cell-id">ID</div>
                        <div class="parent-cell">Father Info</div>
                        <div class="parent-cell">Mother Info</div>
                        <div class="parent-cell">Students</div>
                        <div class="parent-cell parent-cell-action">Action</div>
                    </div>

                    <div class="parent-loading-state is-visible" id="parent-loading-state">
                        Loading parents...
                    </div>
                    <div id="parents-card-grid"></div>
                    <div class="parent-empty-state" id="parent-empty-state">
                        No parents match your search.
                    </div>
                </div>

                <div class="parent-hidden-table">
                    <table class="table" id="kt_table_parents">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Father</th>
                                <th>Mother</th>
                                <th>Students</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
@endsection

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

    $(function() {
        datatable();

        $('#parent-search-input').on('input', function() {
            clearTimeout(parentSearchTimer);
            var value = $(this).val();

            parentSearchTimer = setTimeout(function() {
                if (parentsTable) {
                    parentsTable.search(value).draw();
                }
            }, 300);
        });

        $('#parent-page-length').on('change', function() {
            if (parentsTable) {
                parentsTable.page.len(parseInt($(this).val(), 10)).draw();
            }
        });

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

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

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

        parentsTable = $('#kt_table_parents').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ url('parents/list') }}",
                dataSrc: function(json) {
                    $('#parent-count-badge').text(json.recordsTotal || 0);
                    return json.data || [];
                }
            },
            order: [[0, 'asc']],
            pageLength: 25,
            lengthChange: false,
            dom: 'rt<"parent-list-footer"ip>',
            columns: [
                {data: 'ID', name: 'ID'},
                {data: 'father_status', name: 'father_status', orderable: false},
                {data: 'mother_status', name: 'mother_status', orderable: false},
                {data: 'students_data', name: 'students_data', orderable: false, searchable: false, render: function() { return ''; }},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            drawCallback: function() {
                var api = this.api();
                renderParentRows(api.rows({ page: 'current' }).data().toArray());
                $('#parent-loading-state').removeClass('is-visible');
                $('.dropdown-toggle').dropdown();
            }
        });
    }

    function renderParentRows(rows) {
        if (!rows.length) {
            $('#parents-card-grid').empty();
            $('#parent-empty-state').addClass('is-visible');
            return;
        }

        $('#parent-empty-state').removeClass('is-visible');
        $('#parents-card-grid').html(rows.map(function(row) {
            return buildParentRow(row);
        }).join(''));
    }

    function buildParentRow(row) {
        var id = normalizeText(row.ID || row.id);
        var paddedId = (id.length === 1) ? ('0' + id) : id;

        return '' +
            '<div class="parent-row">' +
                '<div class="parent-cell parent-cell-id" data-label="ID">' + escapeHtml(paddedId) + '</div>' +
                '<div class="parent-cell" data-label="Father Info">' +
                    buildPersonBlock(row.father_full_name, row.father_email, row.father_mobile_number, row.father_status, row.father_user_id, 'is-blue') +
                '</div>' +
                '<div class="parent-cell" data-label="Mother Info">' +
                    buildPersonBlock(row.mother_full_name, row.mother_email, row.mother_mobile_number, row.mother_status, row.mother_user_id, 'is-pink') +
                '</div>' +
                '<div class="parent-cell" data-label="Students">' +
                    buildStudentsBlock(row.students_data) +
                '</div>' +
                '<div class="parent-cell parent-cell-action" data-label="Action">' + (row.action || '') + '</div>' +
            '</div>';
    }

    function buildPersonBlock(name, email, phone, status, userId, avatarClass) {
        var cleanName = normalizeText(name);
        if (!cleanName) {
            return '<span class="parent-empty-text">Not added</span>';
        }

        var cleanEmail = normalizeText(email);
        var cleanPhone = normalizeText(phone);

        var contact = '';
        if (cleanEmail) {
            contact += '<span class="parent-contact"><i class="fa-regular fa-envelope"></i>' +
                escapeHtml(cleanEmail.toLowerCase()) + '</span>';
        }
        if (cleanPhone) {
            contact += '<span class="parent-contact"><i class="fa-solid fa-phone"></i>' +
                escapeHtml(cleanPhone) + '</span>';
        }

        return '' +
            '<div class="parent-person">' +
                '<span class="parent-avatar ' + avatarClass + '">' + escapeHtml(getInitials(cleanName)) + '</span>' +
                '<div class="parent-person-body">' +
                    '<span class="parent-person-name">' + escapeHtml(toTitleCase(cleanName)) + '</span>' +
                    contact +
                    '<div class="parent-person-foot">' +
                        buildStatusBadge(status) +
                        buildLoginLink(userId) +
                    '</div>' +
                '</div>' +
            '</div>';
    }

    function buildStatusBadge(status) {
        var clean = normalizeText(status);
        if (!clean) {
            return '';
        }

        var upper = clean.toUpperCase();
        var cls = (upper === 'ACTIVE') ? 'is-active' : 'is-inactive';

        return '<span class="parent-status ' + cls + '">' +
            '<span class="parent-status-dot"></span>' + escapeHtml(upper) + '</span>';
    }

    function buildLoginLink(userId) {
        var cleanId = normalizeText(userId);
        if (!cleanId) {
            return '';
        }

        return '<a href="javascript:void(0)" class="parent-login-link switch-user" data-id="' +
            escapeHtml(cleanId) + '"><i class="fa-solid fa-arrow-up-right-from-square"></i>Log in as user</a>';
    }

    function buildStudentsBlock(students) {
        if (!students || !students.length) {
            return '<span class="parent-empty-text">No students linked</span>';
        }

        return '<div class="parent-students">' + students.map(function(student, idx) {
            var name = normalizeText(student.name) || 'Unnamed';
            var grade = normalizeText(student.grade);
            var avatarClass = parentAvatarPalette[idx % parentAvatarPalette.length];
            var gradeBadge = grade ? '<span class="parent-grade">' + escapeHtml(grade) + '</span>' : '';

            return '<div class="parent-student">' +
                '<span class="parent-student-avatar ' + avatarClass + '">' + escapeHtml(getInitials(name)) + '</span>' +
                '<span class="parent-student-name">' + escapeHtml(name) + '</span>' +
                gradeBadge +
                '</div>';
        }).join('') + '</div>';
    }

    function getInitials(value) {
        var parts = String(value || '').trim().split(/\s+/);
        var initials = parts.slice(0, 2).map(function(part) {
            return part.charAt(0);
        }).join('');

        return initials.toUpperCase() || 'P';
    }

    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 logInUserAccount(id) {
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            type: 'POST',
            url: "{{ url('switch-user') }}",
            data: {
                _token: CSRF_TOKEN,
                loginAs: "parent",
                program: "{{ session('program') }}",
                enrollment_year: "{{ session('enrollment_year') }}",
                parentID: id,
                adminID: "{{ auth()->user()->id }}"
            },

            success: function (data) {
                if (data.success) {
                    toastr.success(data.success);
                    if (data.role == "PARENT") {
                        setTimeout(function () {
                            window.location.href = data.redirect;
                        }, 1500);
                    } else {
                        setTimeout(function () {
                            window.location.href = "{{ url('dashboard') }}";
                        }, 1500);
                    }
                } else if (data.failure) {
                    let htmlError = '';
                    $.each(data.failure, function(index, value) {
                        htmlError += value;
                    });

                    toastr.error(htmlError);
                    setTimeout(function () {
                        window.location.href = "{{ url('login') }}";
                    }, 4000);
                }
            }
        });
    }
</script>
@endsection