@extends('layouts.admin')

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

        @include('admin.errors.form-errors')
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Search for Invoice</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('staff.examination.invoices.show_first_time') }}" method="POST">
                            @csrf
                            <fieldset>
                                <legend id="createSession" class="sr-only">Search for invoice</legend>

                                {{-- <div class="form-group">
                                    <label for="sid">Session</label>
                                    <select name="sid" class="form-control select2-show-search" id="sid" required aria-label="Select session">
                                        <option value="0" selected disabled>Select</option>
                                        @foreach ($sessions as $item)
                                            <option value="{{ $item->sid }}">
                                                {{ $item->esname . '-' . $item->bname . '-' . $item->sname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                <div class="form-group">
                                    <label for="student" class=" mt-3 mb-sm-1"> Student: <i
                                            class="text-danger">(required)</i></label>
                                    <select class="form-control select2-show-search" id="student" required name="student">
                                        <option value="0" disabled selected>Search with userID or email</option>
                                    </select>
                                </div>

                                {{-- <div class="form-group">
                                    <label for="examination_period_id">Registration Period: <i
                                        class="text-danger">(required)</i></label>
                                    <select name="examination_period_id" class="form-control select2-show-search" required aria-label="Select examination period">
                                        @foreach($periods as $period)
                                            <option value="{{ $period->id }}">{{ $period->start_date }} - {{ $period->end_date }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                {{-- <div class="form-group">
                                    <label for="createYear">Year <i class="text-danger">(required)</i></label>
                                    <select name="year" id="createYear" class="form-control select2-show-search" required aria-label="Select year">
                                        @foreach(range(date('Y') - 1, date('Y') + 1) as $y)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                        @endforeach
                                    </select>
                                </div> --}}

                                <!-- Toggle for Active Status -->
                                {{-- <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Active <i class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <label class="form-switch">
                                                <input type="checkbox" name="is_active" class="form-switch-input" aria-label="Toggle active status">
                                                <span class="form-switch-indicator"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div> --}}

                                <button type="submit" class="btn btn-primary">Create Examination Invoice</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Sessions List -->
            {{-- <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Sessions List</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="data-table-example table table-striped table-bordered table-vcenter text-nowrap">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th>Session Name</th>
                                        <th>Registration Period</th>
                                        <th>Year</th>
                                        <th>Active</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($examinationSessions as $key => $session)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $session->name }}</td>
                                            <td>{{ $session->start_date . ' - ' . $session->end_date }}</td>
                                            <td>{{ $session->year }}</td>
                                            <td>{{ $session->is_active ? 'Yes' : 'No' }}</td>
                                            <td>
                                                <button data-bs-toggle="modal" data-bs-target="#editModal" data-id="{{ $session->id }}"
                                                    data-name="{{ $session->name }}" data-esid="{{ $session->esid }}"
                                                    data-bid="{{ $session->bid }}" data-sid="{{ $session->sid }}"
                                                    data-examination_period_id="{{ $session->examination_period_id }}"
                                                    data-active="{{ $session->is_active }}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    aria-label="Edit session {{ $session->name }}">
                                                    <i class="fa fa-edit fs-16"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div> --}}
        </div>

        <!-- Edit Modal (outside the loop) -->
        {{-- <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editSession" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <form method="POST" id="editForm">
                    @csrf
                    @method('PUT')
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="editSession">Edit Examination Session</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <fieldset>
                                <legend class="sr-only">Edit Examination Session Details</legend>

                                <div class="form-group">
                                    <label for="editSid">Session</label>
                                    <select name="sid" class="form-control select2-show-search" id="editSid" required aria-label="Select session">
                                        <option value="0" selected disabled>Select</option>
                                        @foreach ($sessions as $item)
                                            <option value="{{ $item->sid }}">
                                                {{ $item->esname . '-' . $item->bname . '-' . $item->sname }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="examination_period_id">Registration Period</label>
                                    <select name="examination_period_id" class="form-control select2-show-search" id="editPeriod" required aria-label="Select examination period">
                                        @foreach($periods as $period)
                                            <option value="{{ $period->id }}">{{ $period->start_date }} - {{ $period->end_date }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group">
                                    <label for="editYear">Year <i class="text-danger">(required)</i></label>
                                    <select name="year" id="editYear" class="form-control select2-show-search" required aria-label="Select year">
                                        @foreach(range(date('Y') - 1, date('Y') + 1) as $y)
                                            <option value="{{ $y }}">{{ $y }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Toggle for Active Status -->
                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Active <i class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <label class="form-switch">
                                                <input type="checkbox" name="is_active" class="form-switch-input" id="editActiveSwitch" aria-label="Toggle active status">
                                                <span class="form-switch-indicator"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Save Changes</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div> --}}
    </div>
</div>
@endsection

@section('admin-js')
<script>
    $('#student').on('select2:select', function (e) {
            var selectedData = e.params.data;
            var esid = selectedData.esid;

            var $course = $('#course');
            $('#course').empty();
            $('#course').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('educationSystemFilter') }}",
                type: 'GET',
                data: {
                    esid: esid
                },
                success: function(data) {
                    $('#course').empty();
                    $('#course').append(
                        `<option value="0" disabled selected>Select Course*</option>`);
                    // offered course
                    $.each(data.course, function(id, value) {
                        value.teaching_team.coaching_teachers.map((teacher)=>{
                                    $course.append('<option value="' + value.coffid + '">' +
                                    (value.has_label ? '( '+value.label+' ) ' : '') +  value.course.cname + ' ( '+ value.course.level.lshort_name+' ) '
                                    +'_ '+ teacher.first_name+' '+ teacher.middle_name+' '+ teacher.last_name
                                    +'_ '+value.academic_year_session.sessions.sname+'_'+value.academic_year_session.year
                                    +'</option>');
                                })
                    });
                }
            });
        });
  </script>
@endsection