@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Registration statistics</x-page.header>

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('staff.examination.register.report.statistics') }}" method="get" aria-labelledby="createSession">
                            <fieldset>
                                <legend id="createSession" class="sr-only">Search courses</legend>
                                <div class="form-group">
                                    <label for="period">Period</label>
                                    <select name="period" class="form-control select2-show-search" id="period" required>
                                        <option value="0" disabled selected>Select</option>
                                        @foreach ($periods as $item)
                                            <option value="{{ $item->id }}">
                                                {{ $item->start_date . ' / ' . $item->end_date }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label for="educationSystem">Education System</label>
                                    <select name="educationSystem" class="form-control select2-show-search" id="educationSystem" required>
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary mx-auto d-block">Search</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
                @if (request()->educationSystem)
                <div class="card">
                    <div class="card-body">

                        <div class="table-responsive">
                            <table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                <thead class="text-center">
                                    <tr>
                                        <th>#</th>
                                        <th>Board</th>
                                        <th>Exam Fee</th>
                                        <th>School Fee</th>
                                        <th>Total Fee</th>
                                    </tr>
                                </thead>
                                <tbody class="text-center">
                                    @php
                                        $totalFees = 0;
                                        $examFees = 0;
                                        $schoolFees = 0;
                                    @endphp

                                    @foreach($invoices as $key => $invoice)
                                        @php
                                            $totalFees += $invoice->total_fee;
                                            $examFees += $invoice->exam_fee;
                                            $schoolFees += $invoice->school_fee;
                                        @endphp
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $invoice->bname }}</td>
                                            <td>{{ $invoice->exam_fee }} EGP</td>
                                            <td>{{ $invoice->school_fee }} EGP</td>
                                            <td>{{ $invoice->total_fee }} EGP</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="">
                                    <tr class="text-center text-light bg-secondary">
                                        <td class="border-0"><b>Total</b></td>
                                        <td class="border-0"></td>
                                        <td class="border-0"><b class="ms-5">Exam fees: {{ $examFees }} EGP</b></td>
                                        <td class="border-0"><b class="ms-5">School fees: {{ $schoolFees }} EGP</b></td>
                                        <td class="border-0"><b class="ms-5">Total fees: {{ $totalFees }} EGP</b></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@section('admin-js')

<script>
    $(document).ready(function () {
        $('#period').on('change', function () {
            // get courses
            $('#educationSystem').empty();
            $('#educationSystem').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('getExaminationEducationSystemsFromPeriod') }}",
                type: 'GET',
                data: {
                    period: $(this).val()
                },
                success: function (data) {
                    $('#educationSystem').empty();
                    $.each(data, function (id, value) {
                        $('#educationSystem').append('<option value="' + value.esid + '">' + value.esname + '</option>');
                    });
                }
            });
        });

    })
</script>
@endsection