@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Students List</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    } 
    #overlay_name{
        position: absolute; top: 493px; left: 50%; transform: translateX(-50%); font-weight: bold; font-size: 18px; color: black; white-space: nowrap;
    }
    #overlay_id{
        position: absolute; top: 515px; left: 50%; transform: translateX(-50%); font-weight: bold; font-size: 18px; color: black; white-space: nowrap;
    }
    #student_photo{
     position: absolute;
       top: 290px;
       left: 50%;
       transform: translateX(-50%);
       width: 280px;
       height: 290px;
       object-fit: cover;
       border: 2px solid #fff;
       box-shadow: 0 0 3px rgba(0,0,0,0.3);
    }
</style>
@section('subcontent')
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Students List</h2>
    </div>

    <div class="grid grid-cols-12 gap-6 mt-5">
        <div class="intro-y col-span-12 flex flex-wrap sm:flex-nowrap items-center mt-2">
            <div class="flex flex-col sm:flex-row items-center">

                <select class="form-select mt-2 sm:mr-2" aria-label="Default select example" id="programType">
                    <option value="">All Students</option>
                    @foreach ($programs as $program )
                        <option value="{{ $program->id }}">{{ $program->title }}</option>
                    @endforeach
                </select>
            </div>

            <div class="dropdown">
                <button class="dropdown-toggle btn px-2 box" aria-expanded="false" data-tw-toggle="dropdown">
                    <span class="w-5 h-5 flex items-center justify-center">
                        <i class="w-4 h-4" data-lucide="printer"></i>
                    </span>
                </button>

                <div class="dropdown-menu w-40">
                    <ul class="dropdown-content">
                        <li>
                            <a href="" class="dropdown-item">
                                <i data-lucide="printer" class="w-4 h-4 mr-2"></i> Print
                            </a>
                        </li>
                        <li>
                            <a href="" class="dropdown-item">
                                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export to Excel
                            </a>
                        </li>
                        <li>
                            <a href="" class="dropdown-item">
                                <i data-lucide="file-text" class="w-4 h-4 mr-2"></i> Export to PDF
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="hidden md:block mx-auto text-slate-500"></div>

        </div>
    <button class="dropdown-toggle btn btn-danger w-40" id="deleteAllSelectedRecord" aria-expanded="false"
    data-tw-toggle="dropdown">Delete All Selected</button>
        <!-- BEGIN: Data List -->
        <div class="intro-y col-span-12 overflow-auto lg:overflow-visible">
            <table class="table table-report -mt-2 table-responsive student_datatable">
                <thead>
                    <tr>
                        <th><input id="select_all_ids" name="all" class="form-check-input" type="checkbox" value=""></th>
                        <th class="whitespace-nowrap">ID</th>
                        <th class="whitespace-nowrap">Full Name</th>
                        <th class="whitespace-nowrap">Father Name</th>
                        <th class="whitespace-nowrap">Private Phone</th>
                        <th class="whitespace-nowrap">Family Phone</th>
                        <th class="whitespace-nowrap">Actions</th>
                    </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
        <!-- END: Data List -->
    </div>

    @include('../pages/student/show')
    @include('../pages/student/delete')

@endsection
@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script>
function setExpiresText() {
    const now = new Date();
    const year = now.getFullYear();

    const monthName = "December"; 
    const lastDay = 31; 

    const expiresHtml = `
        Expires<br>
        ${monthName}<br>
        ${lastDay}, ${year}`;

    document.getElementById('expires_text').innerHTML = expiresHtml;
}
setExpiresText();

        $(function () {
            var table = $('.student_datatable').DataTable({
                method: 'GET',
                processing: true,
                serverSide: true,
                ajax: {
                url: "{{ url('/student') }}",
                    data: function (d) {
                        d.programType = $('#programType').val();
                    }
                },
                columns: [
                    {data: '#', name: '#'},
                    {data: 'id', name: 'id'},
                    {data: 'name', name: 'name'},
                    {data: 'father_name', name: 'father_name'},
                    {data: 'private_phone', name: 'private_phone'},
                    {data: 'family_phone', name: 'family_phone'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });

            $("#programType").change(function(){
                 table.draw();
            });
        });

        $(document).ready(function() {
            $('#select_all_ids').click(function() {
                $('.form-check-input').prop('checked', $(this).prop('checked'));
            });
            $('#deleteAllSelectedRecord').click(function(e) {
                e.preventDefault();
                var all_ids = [];
                $('input:checkbox[name=ids]:checked').each(function(){
                    all_ids.push($(this).val());
                });

                $.ajax({
                method: "get",
                url: "{{ url('/student/selected/') }}",
                data: {
                    ids: all_ids,
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                   $.each(all_ids, function(key,val){
                        $('#student_ids'+val).remove();
                   });

                }
            });

            });
        });

        function deleteStudent(id){
            $('#studentId').val(id);
        }

        function getStudentInfo(e) {
            $.ajax({
                method: 'GET',
                url: "{{ url('/student/info') }}",
                data: {
                    student_id: e,
                },
                success: function(response) {
                    console.log(response);
                    let student = response[2];
                    $('#overlay_name').text(student.name || '');
                    $('#overlay_id').text(response[3] || '');
                    jQuery('#example-tab-2').html(response[0]);
                    jQuery('#example-tab-1').html(response[1]);
                    jQuery('#student_id').html(response[2].id);
                    jQuery('#st_id').val(response[2].id);
                    jQuery('#student_name').html(response[2].id);
                    jQuery('#student_fname').html(response[2].father_name);
                    document.getElementById('student_photo').src = response[5];
                    $('#qrcode_container').empty();

                    new QRCode(document.getElementById('qrcode_container'), {
                        text: response[4], 
                        width: 80,
                        height: 80,
                        colorDark: "#000000",
                        colorLight: "#ffffff",
                        correctLevel: QRCode.CorrectLevel.H
                    });

                }
            });
        }
            $('#download_btn').on('click', function() {
                 const card = document.getElementById('id_card_print');

                html2canvas(card, {
                    scale: 3,
                    useCORS: true,
                    allowTaint: true,
                    backgroundColor: null,
                }).then(canvas => {
                    const image = canvas.toDataURL('image/png');

                    const link = document.createElement('a');
                    link.href = image;
                    link.download = 'student_card.png';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                });
            });
    </script>
@endsection