@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Registration Sessions</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">Create New Session</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('staff.examination.sessions.store') }}" method="POST" aria-labelledby="createSession">
                            @csrf
                            <fieldset>
                                <legend id="createSession" class="sr-only">Create a new examination session</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="examination_period_id">Registration Period</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 }} ({{ $period->year }})</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 Session</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 }} ({{ $period->year }})</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>
    jQuery('body').on('click', '.edit', function () {
                    var session_id = $(this).attr('data-id');
                    $.get('/staff/examination/sessions/' + session_id + '/edit', function (data) {
                        console.log(data)
                        jQuery('#editSid').val(data.sid).change();
                        jQuery('#editYear').val(data.year).change();
                        jQuery('#editPeriod').val(data.examination_period_id).change();
                        if(data.is_active == 1){
                            jQuery('#editActiveSwitch').attr("checked", true);
                        }else{
                            jQuery('#editActiveSwitch').attr("checked", false);
                        }

                        jQuery('#submit').val("update");
                        jQuery('#editForm').attr('action', '/staff/examination/sessions/' + session_id)
                    })
                });
</script>
@endsection