@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ asset('css/custom-student-style.css') }}">
    <style>
        tfoot{
            background-color: #36304a;
        }
        
        table.dataTable>thead>tr>th:not(.sorting_disabled){
            padding-right: 30px !important;
        }
    </style>
@endsection

@section('content')
<div class="container-fluid main-container">
    <div class="row justify-content-center">
        <div class="col-md-12">

            <div class="card" id="content">
                <div class="card-header flex justify-between p-3 text-2xl text-blue-700">
                    {{ __('report.students-fees') }}
                </div>

                <div class="card-body">
                    <div class="custom-filter row">
                        <form action="{{ route('filter.students.fees.report') }}" method="post" id="filterForm">
                            @csrf
                            @include('layouts.filter')

                            <div class="row flex justify-center space-x-2 mt-4">
                                <div class="col-4 flex justify-center px-1">
                                    <button type="submit" style="background-color: #36304a;" class="mr-3 px-4 py-2 rounded-2 text-white btn" id="studentFilter" name="filter">
                                        {{__('student.apply-filter') }}
                                    </button>
                                    <a href="{{ route('reports.fees') }}" style="background-color: #36304a;" class="bg-danger btn mr-3 px-4 py-2 rounded-2 text-white" id="studentFilter">
                                        {{__('student.reset') }}
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div id="studentsListTable" class="mt-4">
                        <table class="table" id="studentsTable" style="width: 100%;">
                            <thead>
                                <tr class="table100-head">
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.id') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.name') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.tuition-fees') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.registration-fees') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.discount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.semester') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.payment-amount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        نوع العملة
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.due-amount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.payment-reference') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.created-at') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('report.action') }}
                                    </th>
                                </tr>
                            </thead>
                            <tbody id="studentsList">
                                @if (isset($studentsFees))
                                    @foreach ($studentsFees as $studentFee)
                                        <tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
                                            <th scope="row" class="py-2 text-center font-medium text-gray-900 whitespace-nowrap dark:text-white">
                                                {{ $studentFee->student_id }}
                                            </th>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->student_name }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->study_fees }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->registration_fees }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->discount ?? "0.00" }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->semester ? $studentFee->semester : __('student.not-set') }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->payment_amount }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->payment_currency }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->due_amount ?? "0" }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->payment_reference }}
                                                </div>
                                            </td>
                                            <td class="py-2 text-center">
                                                <div class="text-sm text-gray-900">
                                                    {{ $studentFee->created_at }}
                                                </div>
                                            </td>
                                            <td>
                                                <a href="{{ route('fee.show', $studentFee->student->id ?? -1) }}" type="button" id="showStudentsFees"
                                                    class="p-1 rounded-lg" style="background-color: #36304a; color: white;">
                                                    {{ __('report.show-student-fees') }}
                                                </a>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            </tbody>
                            <tfoot>
                                <tr class="table100-head">
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.id') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.name') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.tuition-fees') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.registration-fees') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.discount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('student.semester') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.payment-amount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        نوع العملة
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.due-amount') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.payment-reference') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('fee.created-at') }}
                                    </th>
                                    <th scope="col" class="py-2 px-2 text-white">
                                        {{ __('report.action') }}
                                    </th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')

<script src="{{ asset('plugins/datatable/js/sum().js') }}"></script>
<script src="{{ asset('plugins/datatable/js/moment.min.js') }}"></script>
<script src="{{ asset('plugins/datatable/js/dateTime.min.js') }}"></script>

<!-- datatable custimzation -->
<script>
    $(document).ready(function () {
        dataTable = $("#studentsTable").DataTable({
            "responsive": false,
            "lengthChange": false,
            "autoWidth": false,
            "searching": true,
            "paging": true,
            "ordering": true,
            "info": false,
            "deferRender": true,
            // "buttons": ["copyHtml5", "csv", "excel", "pdf", "print", "colvis"],

            "oLanguage": {
                "sSearch": "بحث ",
                "sEmptyTable": "لا توجد بيانات متوفرة في الجدول",
            },
        });
        

        $('#min, #max').on('change', function () {
            dataTable.draw();
        });
        // }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    
        $(".section-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $(".program-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $(".academic-year-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $(".semester-option").click(function() {
            dataTable.search( $(this).attr('value') ).draw();
        });

        $('.buttons-print').html('طباعة');
    }); // End of $(document).ready
    
</script>

<script>
    $(document).ready(function () {
        $('#college, #section, #program, #batch, #bank, #admission, #constraint, #paymentCurrency').each( function (){
            $(this).change(function (e) { 
                e.preventDefault();
                
                $('#studentFilter').click();
            });
        });
    });
</script>
@endsection