@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Registration Courses</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 Course</h3>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('staff.examination.courses.store') }}" method="POST" aria-labelledby="createSession">
                            @csrf
                            <fieldset>
                                <legend id="createSession" class="sr-only">Create a new examination session</legend>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Sessions: <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="session" class=" examination_session form-control select2-show-search" id="examination_session_create" required>
                                                <option value="0" selected disabled>Select</option>
                                                @foreach ($sessions as $item)
                                                    <option value="{{ $item->id }}" >
                                                        {{ $item->name }} ({{ $item->start_date }} - {{ $item->end_date }})
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Course(s) <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">

                                            <select name="cid" id="course" class=" course form-control select2-show-search"
                                                required>

                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group pt-3 pb-3">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Fee(s) <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="number" step=".01" min="0" name="exam_fee"
                                                        id="exam_fee" class="form-control fee-input-field"
                                                        placeholder="Exam" required>
                                                </div>
                                                <div class="col-md-1 mt-2">
                                                    <b>+</b>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="number" step=".01" min="0" name="school_fee" id="school_fee"
                                                        class="form-control fee-input-field" placeholder="School" required>
                                                </div>
                                                <div class="col-md-1 mt-2">
                                                    <b class="mt-2 text-success">=</b>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="text" id="total_fee_view" disabled
                                                        class="form-control" placeholder="Total">
                                                    <input type="hidden" name="total_fee"
                                                        id="total_fee" class="form-control" placeholder="Total" >
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </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 Course</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Courses List -->
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('staff.examination.courses.index') }}" method="get" aria-labelledby="createSession">
                            <fieldset>
                                <legend id="createSession" class="sr-only">Search courses</legend>
                                <div class="form-group">
                                    <label for="sid">Session</label>
                                    <select name="session" class="form-control select2-show-search" id="session" required aria-label="Select session">
                                        <option value="0" selected disabled>Select</option>
                                        @foreach ($sessions as $item)
                                            <option value="{{ $item->id }}">
                                                {{ $item->name }} ({{ $item->start_date }} - {{ $item->end_date }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                                <button type="submit" class="btn btn-primary mx-auto d-block">Search</button>
                            </fieldset>
                        </form>
                    </div>
                </div>
                @if (request()->session)
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Courses 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>Course Name</th>
                                        <th>Registration Period</th>
                                        <th>Exam Fee</th>
                                        <th>School Fee</th>
                                        <th>Total Fee</th>
                                        <th>Active</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($examinationCourses as $key => $course)
                                        <tr>
                                            <td>{{ ++$key }}</td>
                                            <td>{{ $course->name.'_'.$course->cname.' ('.$course->lshort_name.')' }}</td>
                                            <td>{{ $course->start_date . ' - ' . $course->end_date }}</td>
                                            <td>{{ $course->exam_fee }}</td>
                                            <td>{{ $course->school_fee }}</td>
                                            <td>{{ $course->total_fee }}</td>
                                            <td>{{ $course->is_active ? 'Yes' : 'No' }}</td>
                                            <td>
                                                <button data-bs-toggle="modal" data-bs-target="#editModal" data-id="{{ $course->id }}"
                                                    class="modal-effect btn btn-outline-light btn-sm waves-effect waves-light edit"
                                                    >
                                                    <i class="fa fa-edit fs-16"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                @endif
            </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 modal-lg" 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 Course</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 id="createSession" class="sr-only">Create a new examination session</legend>

                                <div class="form-group">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Sessions: <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <select name="session" class="examination_session form-control select2-show-search" id="examination_session_update" required>
                                                <option value="0" selected disabled>Select</option>
                                                @foreach ($sessions as $item)
                                                    <option value="{{ $item->id }}" >
                                                        {{ $item->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group ">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Course <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">

                                            <select name="cid" id="course_update" class="course form-control select2-show-search"
                                                required>

                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group pt-3 pb-3">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="form-label mt-2">Fee(s) <i
                                                    class="text-danger">(required)</i></label>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <input type="number" step=".01" min="0" name="exam_fee"
                                                        id="exam_fee_update" class="form-control fee-input-field-update"
                                                        placeholder="Exam" required>
                                                </div>
                                                <div class="col-md-1 mt-2">
                                                    <b>+</b>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="number" step=".01" min="0" name="school_fee" id="school_fee_update"
                                                        class="form-control fee-input-field-update" placeholder="School" required>
                                                </div>
                                                <div class="col-md-1 mt-2">
                                                    <b class="mt-2 text-success">=</b>
                                                </div>
                                                <div class="col-md-3">
                                                    <input type="text" id="total_fee_view_update" disabled
                                                        class="form-control" placeholder="Total">
                                                    <input type="hidden" name="total_fee"
                                                        id="total_fee_update" class="form-control" placeholder="Total" >
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </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" id="editActivation" class="form-switch-input" 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" id="update_btn" disabled>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>
    $(document).ready(function () {
        // Education system and boards dependent select in create form
        $('.examination_session').on('change', function () {
            // get courses
            $('.course').empty();
            $('.course').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('getCourseByExaminationSession') }}",
                type: 'GET',
                data: {
                    id: $(this).val()
                },
                success: function (data) {
                    $('.course').empty();
                    $('#update_btn').attr('disabled',false)
                    $.each(data, function (id, value) {
                        $('.course').append('<option value="' + value.cid + '">' + value.cname + ' ( ' + value.level.lname + ' )' +
                            '</option>');
                    });
                }
            });
        });

    })
</script>
{{-- on click edit --}}
<script>
    jQuery('body').on('click', '.edit', function () {
        var course_id = $(this).attr('data-id');
        $.get('/staff/examination/courses/' + course_id + '/edit', function (data) {
            jQuery('#examination_session_update').val(data.examination_session_id).change();
            jQuery('#course_update').val(data.cid).change();
            jQuery('#exam_fee_update').val(data.exam_fee).val();
            jQuery('#school_fee_update').val(data.school_fee).val();
            jQuery('#total_fee_update').val(data.total_fee).val();
            jQuery('#total_fee_view_update').val(data.total_fee).val();
            if(data.is_active == 1){
                jQuery('#editActivation').attr("checked", true);
            }else{
                jQuery('#editActivation').attr("checked", false);
            }
            jQuery('#submit').val("update");
            jQuery('#editForm').attr('action', '/staff/examination/courses/' + course_id)
        })
    });
</script>
 {{-- fill fees --}}
<script>
    $(document).ready(function() {
        $(".fee-input-field").on("input", function() {
            var input1 = parseFloat($("#exam_fee").val());
            var input2 = parseFloat($("#school_fee").val());
            var sum = input1 + input2;
            $("#total_fee_view").val(sum);
            $("#total_fee").val(sum);
        });

        $(".fee-input-field-update").on("input", function() {
            var input1 = parseFloat($("#exam_fee_update").val());
            var input2 = parseFloat($("#school_fee_update").val());
            var sum = input1 + input2;
            $("#total_fee_view_update").val(sum);
            $("#total_fee_update").val(sum);
        });
    });
</script>
@endsection