@extends('admin.layouts.master')

@section('title') Starter Page @endsection
@section('css')

    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css')}}" />
    <link rel="stylesheet" href="{{asset('backend/assets/vendor/libs/select2/select2.css')}}" />

@endsection
@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">

        <div class="row">
            <!-- User Sidebar -->
            <div class="col-xl-4 col-lg-5 col-md-5 order-1 order-md-0">
                <!-- User Card -->
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="user-avatar-section">
                            <div class="d-flex align-items-center flex-column">
                                <a href="#" data-bs-target="#updateAvatar" data-bs-toggle="modal"><i class="ti ti-edit-circle"></i></a>
                                <img
                                        class="img-fluid rounded mb-3 pt-1 mt-4 border"
                                        src="{{$student->avatar??asset('backend/assets/img/logo.webp')}}"
                                        height="100"
                                        width="100"
                                        id="studentAvatar"
                                        alt="User avatar" />

                                <div class="user-info text-center">
                                    <h4 class="mb-2">#{{$student->id}} - {{$student->name}}</h4>

                                </div>
                            </div>
                        </div>
                        <div class="d-flex justify-content-around flex-wrap mt-3 pt-3 pb-4 border-bottom">
                            <div class="d-flex align-items-start me-4 mt-3 gap-2">
                                <span class="badge bg-label-primary p-2 rounded"><i class="ti ti-checkbox ti-sm"></i></span>
                                <div>
                                    <p class="mb-0 fw-medium"> {!!  \App\Helpers\StudentHelper::statuses($currentEnrollment->status??'new')!!}</p>
                                    <small>2024-2025</small>
                                </div>
                            </div>
                            <div class="d-flex align-items-start mt-3 gap-2">
                                <span class="badge bg-label-primary p-2 rounded"><i class="ti ti-alert-circle ti-sm"></i></span>
                                <div>
                                    <p class="mb-0 fw-medium">0</p>
                                    <small>عدد ساعات الغياب</small>
                                </div>
                            </div>
                        </div>
                        <p class="mt-4 small text-uppercase text-muted">بيانات</p>
                        <div class="info-container">
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <span class="fw-medium me-1">{{__('students.Guardian Name')}}:</span>
                                    <span>{{$student->guardian_name}}</span>
                                </li>
                                <li class="mb-2 pt-1">
                                    <span class="fw-medium me-1">رقم الهاتف:</span>
                                    <span>{{$student->father_phone}}</span> |
                                    <span>{{$student->mother_phone}}</span>
                                </li>
                                <li class="mb-2 pt-1">
                                    <span class="fw-medium me-1">الايميل:</span>
                                    <span>{{$student->father_email}}</span> |
                                    <span>{{$student->mother_email}}</span>
                                </li>
                            </ul>

                        </div>
                    </div>
                </div>
                <!-- /User Card -->

            </div>
            <!--/ User Sidebar -->
            <!-- User Content -->
            <div class="col-xl-8 col-lg-7 col-md-7 order-0 order-md-1">
                <!-- User Pills -->
                <ul class="nav nav-pills flex-column flex-md-row mb-4">
                    <li class="nav-item">
                        <a class="nav-link @if($type=='details') active @endif" href="{{route('admin.students.show',['student'=>$student->id,'type'=>'details'])}}"
                        ><i class="ti ti-user-check ti-xs me-1"></i>تفاصيل التلميذ</a
                        >
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @if($type=='enrollements') active @endif" href="{{route('admin.students.show',['student'=>$student->id,'type'=>'enrollements'])}}"
                        ><i class="ti ti-user-check ti-xs me-1"></i>تفاصيل الترسيم</a
                        >
                    </li>

                    <li class="nav-item">
                        <a class="nav-link @if($type=='fees') active @endif" href="{{route('admin.students.show',['student'=>$student->id,'type'=>'fees'])}}"
                        ><i class="ti ti-currency-dollar ti-xs me-1"></i> الرسوم</a
                        >
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @if($type=='parents') active @endif" href="{{route('admin.students.show',['student'=>$student->id,'type'=>'parents'])}}"
                        ><i class="ti ti-currency-dollar ti-xs me-1"></i>حسابات الاولياء</a
                        >
                    </li>
{{--                    <li class="nav-item">--}}
{{--                        <a class="nav-link" href="app-user-view-notifications.html"--}}
{{--                        ><i class="ti ti-bell ti-xs me-1"></i>الانذارات</a--}}
{{--                        >--}}
{{--                    </li>--}}
{{--                    <li class="nav-item">--}}
{{--                        <a class="nav-link" href="app-user-view-notifications.html"--}}
{{--                        ><i class="ti ti-bell ti-xs me-1"></i>الرسائل</a--}}
{{--                        >--}}
{{--                    </li>--}}
{{--                    <li class="nav-item">--}}
{{--                        <a class="nav-link" href="app-user-view-connections.html"--}}
{{--                        ><i class="ti ti-link ti-xs me-1"></i>Connections</a--}}
{{--                        >--}}
{{--                    </li>--}}
                </ul>
                <!--/ User Pills -->
                @if($type=='details')
                    @include('admin.components.tabs.students.details',compact('student'))
                @elseif($type=='enrollements')
                    @include('admin.components.tabs.students.enrollements',compact('student'))
                @elseif($type=='fees')
                    @include('admin.components.tabs.students.fees',compact('student'))
                @elseif($type=='parents')
                    @include('admin.components.tabs.students.parents',compact('student'))
                @endif
            </div>
            <!--/ User Content -->



        </div>

        <!-- Modal -->
        <!-- Edit User Modal -->
        <div class="modal fade" id="enrollStudentModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-edit-user">
                <div class="modal-content p-3 p-md-5">
                    <div class="modal-body">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <div class="text-center mb-4">
                            <h3 class="mb-2">ترسيم تلميذ جديد</h3>
                            <p class="text-muted">اختر المستوى الدراسي و القسم</p>
                        </div>
                        <form method="POST" action="{{ route('admin.students.addEnrollment', $student->id) }}" class="form-block" id="enrollmentForm">
                        @csrf
                            <div class="row">

                                <div class="col-md-6">
                                    <!-- School year -->
                                    <div class="mb-3">
                                        <label for="school_year_id" class="form-label">{{__('school_years.school_year')}}</label>
                                        <select name="school_year_id" class="form-control" required>

                                            @foreach ($schoolYears->where('status','1') as $year)
                                                <option value="{{ $year->id }}">{{ $year->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <!-- Level selection -->
                                    <div class="mb-3">
                                        <label for="level_id" class="form-label">{{__('levels.level')}}</label>
                                        <select name="level_id" class="form-control select2" id="level_id" required>
                                            <option value="">-- اختر --</option>
                                            @foreach ($levels as $level)
                                                <option value="{{ $level->id }}">{{ $level->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <!-- School year -->
                                    <div class="mb-3">
                                        <label for="section_id" class="form-label">{{__('school_years.school_year')}}</label>
                                        <select name="section_id" class="form-control select2" id="section_id" required>

                                            @foreach ($sections as $section)
                                                <option value="{{ $section->id }}" data-level="{{ $section->level_id }}">{{ $section->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>




                            <!-- Dynamic Fees -->
                            <div id="feesContainer">
                                <!-- JS will inject fee rows here -->
                            </div>

                            <button type="submit" class="btn btn-primary">{{__('general.actions.submit')}}</button>
                        </form>

                    </div>
                </div>
            </div>
        </div>
        <!--/ Edit User Modal -->

        <!-- Add New Credit Card Modal -->
        <div class="modal fade" id="upgradePlanModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
                <div class="modal-content p-3 p-md-5">
                    <div class="modal-body">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <div class="text-center mb-4">
                            <h3 class="mb-2">{{ __('general.actions.add').' '.__('general.media') }}</h3>
                        </div>
                        <form id="uploadFilesForm" class="row g-3" onsubmit="return false" enctype="multipart/form-data">
                            @csrf
                            <div id="fileUploadContainer" class="col-12">
                                <label class="form-label">Upload Files & Description</label>
                                <div class="file-upload-item row g-3 mb-3">
                                    <div class="col-md-6">
                                        <input type="file" class="form-control" name="uploadedFiles[0][]" multiple>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" name="fileDescriptions[0]" placeholder="{{__('general.fields.description')}}">
                                    </div>
                                </div>
                            </div>

                            <div class="col-12">
                                <button type="button" class="btn btn-secondary" id="addAnotherFile">{{ __('general.actions.add').' '.__('general.media') }}</button>
                            </div>

                            <div class="progress mb-3" style="height: 20px; display: none;" id="uploadProgressWrapper">
                                <div class="progress-bar" id="uploadProgressBar" role="progressbar" style="width: 0%">0%</div>
                            </div>

                            <button type="submit" class="btn btn-primary">{{ __('general.actions.submit')}}</button>
                        </form>

                    </div>


                </div>
            </div>
        </div>
        <!--/ Add New Credit Card Modal -->


        <!-- update Avatar Card Modal -->
        <div class="modal fade" id="updateAvatar" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-simple modal-upgrade-plan">
                <div class="modal-content p-3 p-md-5">
                    <div class="modal-body">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        <div class="text-center mb-4">
                            <h3 class="mb-2">{{ __('general.actions.edit').' '.__('students.student') }}</h3>
                        </div>
                        <form id="updateAvatarForm" class="row g-3" onsubmit="return false" enctype="multipart/form-data">
                            @csrf

                                <label class="form-label">{{__('students.student avatar')}}</label>
                                <div class="file-upload-item row g-3 mb-3">
                                    <div class="col-md-12">
                                        <input type="file" class="form-control" name="avatar" multiple>
                                    </div>

                                </div>




                            <div class="progress mb-3" style="height: 20px; display: none;" id="uploadAvatarProgressWrapper">
                                <div class="progress-bar" id="uploadAvatarProgressBar" role="progressbar" style="width: 0%">0%</div>
                            </div>

                            <button type="submit" class="btn btn-primary">{{ __('general.actions.submit')}}</button>
                        </form>

                    </div>


                </div>
            </div>
        </div>
        <!--/ update Avatar Card Modal -->

        <!-- /Modal -->
    </div>

    
@endsection
@section('script')
    <script src="{{asset('backend/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js')}}"></script>
    <script src="{{asset('backend/assets/vendor/libs/select2/select2.js')}}"></script>
    <script>
        function calculateTotal() {
            let total = 0;

            $('input[name$="[amount]"]').each(function () {
                const row = $(this).closest('tr');
                const amount = parseFloat($(this).val()) || 0;
                const discountPercent = parseFloat(row.find('input[name$="[discount]"]').val()) || 0;
                const discountValue = (amount * discountPercent) / 100;
                total += (amount - discountValue);
            });

            $('#totalAmount').text(total.toFixed(2));
        }

        $('#level_id').on('change', function () {
            const levelId = $(this).val();

            if (!levelId) return;

            $.ajax({
                url: `/admin/fees/by-level/${levelId}`,
                method: 'GET',
                success: function (data) {
                    let html = '<h5>{{__('fees.fees')}}</h5><table class="table">';

                    data.forEach(fee => {
                        html += `
                    <tr class="mb-3">
                        <td>
                            ${fee.name}
                            <small class="text-muted">(${fee.type === 'one_time' ? '{{__('fees.one_time')}}' : '{{__('fees.recurring')}}'})</small>
                        </td>
                        <td class="position-relative">
                            <label>المبلغ</label>
                            <input type="hidden" name="fees[${fee.id}][fee_id]" value="${fee.id}">
                            <input type="number" step="0.01" name="fees[${fee.id}][amount]" class="form-control amount" value="${fee.amount}" required readonly>
                        </td>
                        <td class="position-relative">
                            <label>التخفيض %</label>
                            <input type="number" step="0.01" name="fees[${fee.id}][discount]" class="form-control discount" value="0" min="0" required>
                            <button type="button" class="btn btn-danger btn-sm position-absolute top-0 end-0 remove-fee"><i class="ti ti-trash"></i></button>
                        </td>
                    </tr>
                `;
                    });

                    html += `</table><h5>المجموع: <span id="totalAmount">0.00</span> </h5>`;
                    $('#feesContainer').html(html);
                    calculateTotal();
                },
                error: function (xhr) {
                    alert('Failed to load fees. Please try again.');
                    console.error(xhr.responseText);
                }
            });
        });

        // Recalculate total when discount is changed
        $(document).on('input', '.discount', function () {
            calculateTotal();
        });

        // Optionally handle fee removal
        $(document).on('click', '.remove-fee', function () {
            $(this).closest('tr').remove();
            calculateTotal();
        });
    </script>
    <script>
        $('#updateAvatarForm').on('submit', function (e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            // Show the progress bar
            $('#uploadAvatarProgressWrapper').show();
            $('#uploadAvatarProgressBar').css('width', '0%').text('0%');

            $.ajax({
                xhr: function () {
                    let xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            $('#uploadAvatarProgressBar').css('width', percent + '%').text(percent + '%');
                        }
                    }, false);
                    return xhr;
                },
                url: "{{ route('admin.students.updateAvatar',$student->id) }}", // Replace with your route
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#uploadAvatarProgressBar').css('width', '100%').text('Upload Complete');
                    setTimeout(() => $('#uploadAvatarProgressWrapper').hide(), 1000);
                    form.reset();
                    $('#updateAvatar').modal("hide"); // replace with actual ID
                    $('#studentAvatar').attr('src',response.url); // replace with actual ID
                },
                error: function (xhr) {
                    alert('Upload failed. Please try again.');
                    $('#uploadAvatarProgressWrapper').hide();
                }
            });
        });
    </script>
    <script>
        $('#uploadFilesForm').on('submit', function (e) {
            e.preventDefault();

            let form = this;
            let formData = new FormData(form);

            // Show the progress bar
            $('#uploadProgressWrapper').show();
            $('#uploadProgressBar').css('width', '0%').text('0%');

            $.ajax({
                xhr: function () {
                    let xhr = new window.XMLHttpRequest();
                    xhr.upload.addEventListener('progress', function (e) {
                        if (e.lengthComputable) {
                            let percent = Math.round((e.loaded / e.total) * 100);
                            $('#uploadProgressBar').css('width', percent + '%').text(percent + '%');
                        }
                    }, false);
                    return xhr;
                },
                url: "{{ route('admin.students.addMedia',$student->id) }}", // Replace with your route
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (response) {
                    $('#uploadProgressBar').css('width', '100%').text('Upload Complete');
                    setTimeout(() => $('#uploadProgressWrapper').hide(), 1000);

                    // Reset form
                    form.reset();
                    $('#fileUploadContainer').html(`
                    <div class="file-upload-item row g-3 mb-3">
                        <div class="col-md-6">
                            <input type="file" class="form-control" name="uploadedFiles[0][]" multiple>
                        </div>
                        <div class="col-md-6">
                            <textarea class="form-control" name="fileDescriptions[0]" rows="2" placeholder="Description for these files"></textarea>
                        </div>
                    </div>
                `);

                    // Reset counter
                    fileGroupIndex = 1;

                    // Redraw DataTable
                    $('#studentMedia').DataTable().ajax.reload(null, false); // replace with actual ID
                },
                error: function (xhr) {
                    alert('Upload failed. Please try again.');
                    $('#uploadProgressWrapper').hide();
                }
            });
        });
    </script>

    <script>
        let fileGroupIndex = 1;

        document.getElementById('addAnotherFile').addEventListener('click', function () {
            const container = document.getElementById('fileUploadContainer');
            const newItem = document.createElement('div');
            newItem.classList.add('file-upload-item', 'row', 'g-3', 'mb-3');
            newItem.innerHTML = `
                                    <div class="col-md-6">
                                        <input type="file" class="form-control" name="uploadedFiles[${fileGroupIndex}][]" multiple>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" class="form-control" name="fileDescriptions[${fileGroupIndex}]" placeholder="{{__('general.fields.description')}}">
                                    </div>
                                    <div class="col-12 text-end">
                                        <button type="button" class="btn btn-danger btn-sm remove-file-item">{{__('general.actions.delete')}}</button>
                                    </div>
                                `;
            container.appendChild(newItem);

            newItem.querySelector('.remove-file-item').addEventListener('click', function () {
                newItem.remove();
            });

            fileGroupIndex++;
        });
    </script>
    <!-- Lightbox2 CSS & JS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script>
    <script>
        $(document).ready(function () {
            let studentMediaTable = $('#studentMedia').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("admin.students.getMedia", $student->id) }}',
                columns: [
                    { data: 'url', name: 'url' },
                    { data: 'description', name: 'description' },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
        });
    </script>

    <script>

        $(document).ready(function () {
            let studentPaymentTable = $('#payments-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: `{{route('admin.students.getPayments',$student->id)}}`,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'amount', name: 'amount' },
                    { data: 'payment_date', name: 'payment_date' },
                    { data: 'payment_method', name: 'payment_method' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });
            let studentFeesTable = $('#studentFees').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.students.getFees', $student->id) }}",
                    type: 'GET'
                },
                columns: [
                    { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
                    { data: 'fee', name: 'fee.name' },
                    { data: 'amount', name: 'amount' },
                    { data: 'discount', name: 'discount' },
                    { data: 'final_amount', name: 'final_amount' },
                    { data: 'due_date', name: 'due_date' },
                    { data: 'total_payment', name: 'total_payment' },
                    { data: 'status', name: 'status', orderable: false, searchable: false },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });


            // Select All checkbox
            $('#select-all').on('click', function () {
                $('.fee-checkbox').prop('checked', this.checked);
            });

            // Handle payment for selected
            $('#storePaymentForm').on('submit', function (e) {
                e.preventDefault();
                let selectedFees = [];
                $('.fee-checkbox:checked').each(function () {
                    selectedFees.push($(this).val());
                });

                if (selectedFees.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'No Fees Selected',
                        text: 'Please select at least one fee.',
                        confirmButtonText: 'OK',
                        customClass: {
                            confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                        },
                    });
                    return;
                }

                $.ajax({
                    url: '{{ route("admin.students.storePayment", $student->id) }}',
                    method: 'POST',
                    data: {
                        student_id: '{{ $student->id }}',
                        amount: $('#amount').val(),
                        payment_date: $('#payment_date').val(),
                        payment_method: $('#payment_method').val(),
                        fees: selectedFees,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Payment Successful',
                            text: response.message,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                            },
                        });
                        studentFeesTable.page('next').draw('page');
                        studentPaymentTable.page('next').draw('page');
                    },
                    error: function (xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: xhr.responseJSON.message || 'An error occurred.',
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'btn btn-primary me-3 waves-effect waves-light',
                            },
                        });
                    }
                });
            });
        });
    </script>
    <script>
        $('.select2').select2({dropdownParent: $('#enrollStudentModal')});
        $('.select2').css('width','100%');
        $(document).on('change','#level_id',function(){
            var level_id=$('#level_id').val();
            $("#section_id").val("");
            $("#section_id").select2({
                dropdownParent: $('#enrollStudentModal'),
                templateResult: function(option, container) {
                    if ($(option.element).attr("data-level") != level_id){
                        $(container).css("display","none");
                    }
                    return option.text;
                }
            });
            $('.select2').css('width','100%');
        });
    </script>


@endsection