@extends('layouts.admin')

@section('content')
<!--App-Content-->
<div class="app-content my-3 my-md-5">
    <div class="side-app">
        <x-page.header>Course Offerings</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">Add New Course Offering</h3>
                    </div>

                    <div class="card-body">
                        <form method="POST" action="{{route('courseofferings.post')}}" class="form-horizontal">
                            @csrf
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Academic Year Session <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select id="acys" name="acysid" class="form-control select2-show-search"
                                            required>
                                            <option value="0" disabled selected>Select</option>
                                            @foreach ($academicYearSessions as $item)
                                            <option value="{{$item->acysid}}" data-sid={{ $item->sid }}> {{ $item->acyname }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Teaching Team <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">

                                        <select name="ttid" class="form-control select2-show-search" required>
                                            @foreach ($teachingTeams as $item)

                                            <option value="{{$item->ttid}}">{{$item->ttname}}</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="form-control select2-show-search"
                                            required>

                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3 mt-3">
                                        <label class="form-label">Active <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9 mt-3">
                                        <label class="form-swich">
                                        <input type="checkbox" name="is_active" class="form-switch-input" >
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            {{-- <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3 mt-3">
                                        <label class="form-label">Free <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9 mt-3">
                                        <label class="form-swich">
                                        <input type="checkbox" name="is_free" class="form-switch-input" >
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description"></span>
                                        </label>
                                    </div>
                                </div>
                            </div> --}}
                            <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Allow Enrollment <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <label class="form-swich">
                                        <input type="checkbox" name="allow_enrollment" class="form-switch-input" >
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description"></span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group py-2">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Add Label <i
                                                class="text-danger"></i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-1 mt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="1"
                                                        name="has_label" id="has_label">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="text" name="label"
                                                    id="label" disabled class="form-control"
                                                    placeholder="Private" required>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            {{-- <div class="form-group py-2">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">By Month <i
                                                class="text-danger"></i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-1 mt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="1"
                                                        name="by_month" id="by_month">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <input type="number" step=".01" min="0" name="fee_course_per_month"
                                                    id="month_fees" disabled class="form-control"
                                                    placeholder="1000" required>
                                                    <span class="text-muted">*This is just for display, and will not be used at all</span>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div> --}}
                            <input type="hidden" name="currency" value="2">
                            {{-- <div class="form-group ">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Currency <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-5">
                                        <select name="currency" id="currency" class="form-control select2-show-search" required>
                                            <option value="1">AED</option>
                                            <option value="2">EGP</option>
                                        </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)/Lesson <i
                                                class="text-danger">(required)</i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            <div class="col-md-1 mt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="1"
                                                        name="feesPerLessonCheck" id="feesPerLessonCheck">
                                                    <label class="form-check-label" for="feesPerLessonCheck">

                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" step=".01" min="0" name="teacher_fee_per_lesson"
                                                    id="teacher_fee_per_lesson" disabled class="form-control"
                                                    placeholder="Teacher" 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="site_fee_per_lesson" id="site_fee_per_lesson"
                                                    disabled class="form-control" placeholder="Eshra7ly" required>
                                            </div>
                                            <div class="col-md-1 mt-2">
                                                <b class="mt-2 text-success">=</b>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" id="fee_per_lesson_total_view" disabled
                                                    class="form-control" placeholder="Total">
                                                <input type="hidden" name="fee_per_lesson_total"
                                                    id="fee_per_lesson_total" class="form-control" placeholder="Total" >
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="form-group pt-3 pb-3" id="is_priced_checkbox_section">
                                <div class="row">
                                    <div class="col-md-3 mt-3">
                                        <label class="form-label">
                                            Priced
                                            <i class="mdi mdi-information-outline leading-loose" data-bs-html="true" data-bs-toggle="tooltip" data-bs-placement="top" title="" data-bs-original-title=
                                            "
                                            By activating this checkbox, you are forced to insert the course price in EGP and in AED
                                            "></i>
                                        </label>
                                    </div>
                                    <div class="col-md-9 mt-3">
                                        <label class="form-swich">
                                        <input type="checkbox" name="is_priced" class="form-switch-input" id="is_priced_checkbox">
                                        <span class="form-switch-indicator"></span>
                                        <span class="form-switch-description"></span>
                                        </label>
                                    </div>
                                </div>
                            </div> --}}

                            <div class="form-group pt-3 pb-3" id="create_price_container">
                                <input type="hidden" name="annual" value="1">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Course Price<i class="text-danger"></i>(required)</label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">
                                            {{-- <div class="col-md-1 mt-2">
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" value="2"
                                                        name="feesPerCourseCheck" id="feesPerCourseCheck">
                                                    <label class="form-check-label" for="feesPerCourseCheck">

                                                    </label>
                                                </div>
                                            </div> --}}
                                            {{-- <div class="col-md-3">
                                                <input type="number" id="teacher_fee_per_course"
                                                    name="teacher_fee_per_course" step=".01" min="0" disabled class="form-control"
                                                    placeholder="Teacher">
                                            </div>
                                            <div class="col-md-1 mt-2">
                                                <b>+</b>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" step=".01" min="0" id="site_fee_per_course" name="site_fee_per_course"
                                                    disabled class="form-control" placeholder="Eshra7ly">
                                            </div>
                                            <div class="col-md-1 mt-2">
                                                <b class="mt-2 text-success">=</b>
                                            </div> --}}
                                            <div class="col">
                                                {{-- <input type="text" id="fee_per_course_total_view" disabled
                                                    class="form-control" placeholder="Total"> --}}

                                                <input type="number" id="fee_per_course_total"
                                                    name="fee_per_course_total" step=".01" min="1"  class="form-control"
                                                    placeholder="1000 EGP">
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>

                            {{-- <div class="form-group pt-3 pb-3 d-none" id="course_fees_egp">
                                <div class="row">
                                    <div class="col-md-3">
                                        <label class="form-label mt-2">Fee(s)/Course EGP <i class="text-danger"></i></label>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="row">

                                            <div class="col-md-4">
                                                <input type="number" id="teacher_fee_per_course_egp"
                                                    name="teacher_fee_per_course_egp" value="{{ old('teacher_fee_per_course_egp') }}" step=".01" min="0"  class="form-control egp-input-field"
                                                    placeholder="Teacher">
                                            </div>
                                            <div class="col-md-1 mt-2">
                                                <b>+</b>
                                            </div>
                                            <div class="col-md-3">
                                                <input type="number" step=".01" min="0" id="site_fee_per_course_egp" name="site_fee_per_course_egp"
                                                     class="form-control egp-input-field"  value="{{ old('site_fee_per_course_egp') }}" placeholder="Eshra7ly">
                                            </div>
                                            <div class="col-md-1 mt-2">
                                                <b class="mt-2 text-success">=</b>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="text" id="fee_per_course_total_egp_view" disabled
                                                    class="form-control" placeholder="Total"  value="{{ old('fee_per_course_total_egp') }}">

                                                <input type="hidden" id="fee_per_course_total_egp"
                                                    name="fee_per_course_total_egp"  value="{{ old('fee_per_course_total_egp') }}" class="form-control"
                                                    placeholder="Total">
                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div> --}}

                            <div class="form-group mb-0 row justify-content-end">
                                <div class="col-md-3">
                                    <button type="submit" class="btn btn-primary waves-effect waves-light">Add New
                                        Course Offering</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
</div>
</div>
@endsection
@section('admin-js')
<script>
    $(document).ready(function () {
        // Education system and boards dependent select in create form
        $('#acys').on('change', function () {
            var $course = $('#course');
            var selectedSid = $(this).find('option:selected').data('sid');
            // Make an AJAX call to fetch details for the selected session
            $.ajax({
                url: '{{ route("getEducationSystemBySession") }}',  // Replace with your API endpoint
                type: 'GET',
                data: {
                    sid: selectedSid
                },
                success: function(response) {
                    // Check if the response contains is_annual
                    if (response.is_annual) {
                        // If false, hide the price input field
                        $('#create_price_container').hide();
                    } else {
                        // If true, show the price input field
                        $('#create_price_container').show();
                    }
                },
                error: function(error) {
                    console.log("Error fetching session data:", error);
                }
            });

            // get courses
            $('#course').empty();
            $('#course').append(`<option value="0" disabled selected>Processing...</option>`);
            $.ajax({
                url: "{{ route('getCourse') }}",
                type: 'GET',
                data: {
                    acysid: $(this).val()
                },
                success: function (data) {
                    $('#course').empty();
                    $('#course').append(
                        `<option value="0" disabled selected>Select Course*</option>`);
                    $.each(data, function (id, value) {
                        $course.append('<option value="' + value.cid + '">' + value.cname + ' ( ' + value.level.lname + ' )' +
                            '</option>');
                    });
                }
            });
        });

    })

</script>

{{-- Show label on checkbox --}}
<script>
    $('#has_label').on('change', function () {
        if(this.checked) {
           $('#label').attr('disabled',false)
        }else{
            $('#label').attr('disabled',true)
        }
    })

    $('#by_month').on('change', function () {
        if(this.checked) {
           $('#month_fees').attr('disabled',false)
        }else{
            $('#month_fees').attr('disabled',true)
        }
    })

</script>


{{-- on select currency and is priced--}}
<script>
    $('#currency').on('change', function () {
        if($(this).val() == '2') {
           $('#is_priced_checkbox_section').addClass('d-none')
           $('#course_fees_egp').addClass('d-none')
           $('#is_priced_checkbox').prop( "checked", false )
           $("#teacher_fee_per_course_egp").val('')
           $("#site_fee_per_course_egp").val('')
           $("#fee_per_course_total_egp_view").val('')
        }else{
            $('#is_priced_checkbox_section').removeClass('d-none')
        }
    })


    $('#is_priced_checkbox').on('change', function () {
        if($(this).is(':checked')) {
           $('#course_fees_egp').removeClass('d-none')
        }else{
            $('#course_fees_egp').addClass('d-none')
            $("#teacher_fee_per_course_egp").val('')
            $("#site_fee_per_course_egp").val('')
            $("#fee_per_course_total_egp_view").val('')
        }
    })

</script>

{{-- fill the egp prices --}}
<script>
    $(document).ready(function() {
      $(".egp-input-field").on("input", function() {
        var input1 = parseFloat($("#teacher_fee_per_course_egp").val());
        var input2 = parseFloat($("#site_fee_per_course_egp").val());
        var sum = input1 + input2;
        $("#fee_per_course_total_egp_view").val(sum);
        $("#fee_per_course_total_egp").val(sum);
      });
    });
</script>

@endsection