@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    <div class="row page-wrap">
        <div class="col-md-10 col-md-offset-1">
            <div class="viewTitle">
                <div class="panel-options">
                    <a class="btn btn-info pull-right addViewBtn"
                       href="{{ route('eims_fees_config') }}">
                        <i class="glyphicon glyphicon-plus-sign addIcon" aria-hidden="true"></i>
                        {{ $pageTitle }} List
                    </a>
                </div>
                <h1 class="text-center ls-2 text-white" style="font-family: Antiqua,serif;">
                    Add {{ $pageTitle }}
                </h1>
            </div>
            <div class="panel panel-default">
                <div class="panel-body panelBodyView" style="color: #000000 !important;">
                    {!! Form::open(['id' => 'feesConfigForm','class' => 'form-horizontal', 'autocomplete' => 'off']) !!}
                    <div class="col-sm-12">
                        <div style="background-color: #f8f9fa; border-radius: 8px; padding: 20px">
                            <div class="row">
                                {{-- Program/Medium/Version --}}
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        @php($programLabel = $companyType == 'UNV' ? 'Program' : 'Medium/Version')
                                        {!! Form::label( 'program_id', $programLabel .': <sup class="text-danger">*</sup>',
                                        ['class' => 'control-label text-gray col-sm-4'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-8">
                                            {!! Form::select('program_id', $programs, $value = null, [
                                            'class' => 'form-control',
                                            'id' => 'program_id',
                                            'onchange' => 'getSetSemesterClasses()',
                                            'placeholder' => "Select $programLabel",
                                            ]) !!}
                                            <p id='program_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                {{-- Semester/Class --}}
                                <div class="col-sm-6">
                                    @php($semesterClassLabel = $companyType == 'UNV' ? 'Semester' : 'Class')
                                    <div class="form-group row">
                                        {!! Form::label(
                                        'semester_class_id',
                                        $semesterClassLabel.': <sup class="text-danger">*</sup>',
                                        ['class' => 'control-label text-gray col-sm-4'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-8">
                                            {!! Form::select('semester_class_id', $semesterClass ?? [], $value = null, [
                                            'class' => 'form-control',
                                            'id' => 'semester_class_id',
                                            'placeholder' => $companyType == 'UNV' ? 'Select Semester' : 'Select Class',
                                            ]) !!}
                                            <p id='semester_class_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                @if($companyType !== 'UNV')
                                    {{-- Group --}}
                                    <div class="col-sm-6">
                                        <div class="form-group row">
                                            {!! Form::label(
                                            'semester_class_group_id',
                                            'Group: <sup class="text-danger">*</sup>',
                                            ['class' => 'control-label text-gray col-sm-4'],
                                            false,
                                            ) !!}
                                            <div class="col-sm-8">
                                                {!! Form::select('semester_class_group_id', $semesterClassGroups ?? [], $value = null, [
                                                'class' => 'form-control',
                                                'id' => 'semester_class_group_id',
                                                'placeholder' => 'Select Group',
                                                ]) !!}
                                                <p id='semester_class_group_ide' style="max-height:3px;"></p>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                {{-- Effective Date --}}
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        {!! Form::label('effective_date', 'Effective Date: <sup class="text-danger">*<sup>', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                        <div class="col-sm-8">
                                            {!! Form::text('effective_date', date('d-m-Y', strtotime($branch_campus_active_date)) , [
                                            'id' => 'effective_date',
                                            'class' => 'form-control',
                                            'placeholder' => 'Enter Effective Date',
                                            'readonly' => 'readonly',

                                            ]) !!}
                                            <p id="effective_datee" style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                {{-- Fees config name --}}
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        {!! Form::label('name', 'Fees config name:', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                        <div class="col-sm-8">
                                            {!! Form::text('name', null, [
                                            'id' => 'name',
                                            'class' => 'form-control',
                                            'placeholder' => 'Enter Fees config name/Title',
                                            ]) !!}
                                            <p id="namee" style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <br>
                        <div>
                            @foreach($feesTypes as $feesType)
                                <div class="row">
                                    {!! Form::hidden('fees_type_id[]', $feesType->id) !!}
                                    <div class="col-sm-2"></div>
                                    <div class="col-md-4">
                                        <div class="form-group row">
                                            {!! Form::label("amount_$feesType->id", $feesType->name . ': <sup class="text-danger">*</sup>', [
                                                'class' => 'control-label text-gray col-sm-6',
                                                ], false) !!}
                                            <div class="col-sm-6">
                                                {!! Form::number("amount[$feesType->id]", null, [
                                                'class' => 'form-control amount-input',
                                                'placeholder' => 'Enter amount',
                                                'id' => "amount_$feesType->id",
                                                'step' => '0.01',
                                                'min' => '0',
                                                ]) !!}
                                                <div id="{{"amount_$feesType->id"}}e"
                                                     class="text-danger amount-error"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <div class="form-group row">
                                            <div class="col-sm-12">
                                                @foreach($feesCategories as $feesCategory)
                                                    <div class="form-check inline form-check-inline">
                                                        {!! Form::radio("fees_category_ids[$feesType->id]", $feesCategory->id, $feesCategory->slug == 'one-time', [
                                                        'class' => 'form-check-input fees-category-radio',
                                                        'id' => "fees_category_ids_" . $feesType->id . '_' . $feesCategory->id,
                                                        'data-category' => $feesCategory->name,
                                                        'data-slug' => $feesCategory->slug,
                                                        ]) !!}

                                                        {!! Form::label("fees_category_ids_" . $feesType->id . '_' . $feesCategory->id, $feesCategory->name) !!}
                                                    </div>
                                                @endforeach
                                                <div id="{{"fees_category_ids_$feesType->id"}}e"
                                                     class="text-danger due-date-error"></div>
                                            </div>
                                        </div>
                                    </div>
                                    {{-- Advance month field --}}
                                    <div class="col-sm-4 hidden advance-month-holder">
                                        <div class="form-group col-sm-4">
                                            {!! Form::number("advance_month_fees_number[$feesType->id]", null, [
                                            'id' => "advance_month_fees_number_$feesType->id",
                                            'class' => 'form-control advance-month-input',
                                            'placeholder' => 'Number of Months',
                                            'min' => '0',
                                            'max' => '12',
                                            'step' => '1',
                                            'disabled' => 'disabled',
                                            ]) !!}
                                            <div id="{{"advance_month_fees_number_$feesType->id"}}e"
                                                 class="text-danger advance_month_error"></div>
                                        </div>
                                        <div class="col-sm-8">
                                            <small>How many months do you want to take in advance at the time of
                                                admission?</small>
                                        </div>
                                    </div>


                                </div>
                                <br>
                            @endforeach
                        </div>
                    </div>
                    {!! Form::close() !!}
                    {{-- Submit Button --}}
                    <div class="text-right">

                        <button onclick="submitFeesConfig()" type="button" class="btn btn-info"
                                style="margin-top: 10px">Submit
                        </button>

                        <a href="{{ route('eims_fees_config') }}" class="btn btn-danger"
                           style="margin-top: 10px">Cancel</a>

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

    <script>
        'use strict';
        const companyType = "{{ $companyType }}";

        const changeFinePercentageAmountUi = (fineType) => {
            const label = $('.fine-percentage-amount-label');
            const input = $('.fine-percentage-amount-input');
            label.html(fineType === 'fixed' ? 'Fine (Fixed):' : fineType === 'percentage' ? 'Fine (Percentage):' : 'Fine:');
            input.val('').attr('readonly', fineType === 'none');
        };

        const getSetSemesterClasses = () => {
            const programId = $('#program_id').val();
            const semesterClassIdField = $('#semester_class_id').html('<option selected value="">Select {{$semesterClassLabel}}</option>');

            if (programId) {
                $.post('{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}', {program_id: programId},
                    (response) => {
                        $.each(response.semesterClassListByProgramChange || [], (index, result) => {
                            semesterClassIdField.append(`<option value="${result.id}">${result.name}</option>`);
                        });
                    }, 'json'
                );
            } else {
                semesterClassIdField.empty();
            }
        };

        const setErrorsText = (errors) => {
            $.each(errors, (key, value) => {
                if (key.includes('.')) {
                    // id and key slice from .
                    const id = key.slice(key.indexOf('.') + 1);
                    key = key.slice(0, key.indexOf('.'));
                    $($(`#${key}_${id}e`)).empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                } else {
                    $('#' + key + 'e').empty().show().append('<span class="errormsg" style="color:red;">' + value + '</span>');
                }
            });
        };

        const submitFeesConfig = () => {
            $.ajax({
                type: 'post',
                url: '{{ route('eims_fees_config_store') }}',
                data: $('#feesConfigForm').serialize(),
                dataType: 'json',
                beforeSend: () => $('.errormsg').hide(),
                success: (response) => {
                    Swal.fire({
                        icon: response.responseStatus,
                        title: response.responseTitle,
                        text: response.responseText,
                        showConfirmButton: false,
                        timer: 1500
                    });
                    if (response.responseStatus === 'success') {
                        setTimeout(() => window.location.href = "{{ route('eims_fees_config') }}", 1000);
                    }
                },
                error: (response) => {
                    const {responseStatus, responseTitle, responseText, errors} = response.responseJSON;
                    Swal.fire({icon: responseStatus, title: responseTitle, text: responseText});
                    if (errors) setErrorsText(errors);
                }
            });
        };

        $(document).ready(function () {
            const effectiveDateField = $('#effective_date');
            const dueDateInputFields = $('.due-date-input');

            effectiveDateField.datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0",
                minDate: 0 // Prevents selection of previous dates
            });

            dueDateInputFields.datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:+0",
                minDate: 0 // Prevents selection of previous dates
            });


            getSetSemesterClasses();


            /**
             * Event handler for clicking on a fees category radio button.
             * This function manages the visibility and state of the advance month input field
             * based on the selected fees category.
             */
            $(document).on('click', '.fees-category-radio', function () {
                const feesCategoryId = $(this).attr('name').split('[')[1].split(']')[0];
                const feesCategorySlug = $(this).data('slug');

                const advanceMonthHolder = $(this).parent().parent().parent().parent().parent().find('.advance-month-holder');
                const advanceMonthInputField = advanceMonthHolder.find('.advance-month-input');
                const allFeesCategoryRadioButtons = $('.fees-category-radio');

                if (feesCategorySlug === 'monthly') {
                    advanceMonthHolder.removeClass('hidden');
                    advanceMonthInputField.removeAttr('disabled');

                    allFeesCategoryRadioButtons.filter(`[data-slug="monthly"]:not([name*="[${feesCategoryId}]"])`).attr('disabled', 'disabled');
                } else {
                    advanceMonthHolder.addClass('hidden');
                    advanceMonthInputField.attr('disabled', 'disabled');
                    if (!allFeesCategoryRadioButtons.filter('[data-slug="monthly"]:checked').length) {
                        allFeesCategoryRadioButtons.filter('[data-slug="monthly"]').removeAttr('disabled');
                    }
                }

                if (feesCategorySlug === 'exam') {
                    allFeesCategoryRadioButtons.filter(`[data-slug="exam"]:not([name*="[${feesCategoryId}]"])`).attr('disabled', 'disabled');
                } else {
                    if (!allFeesCategoryRadioButtons.filter('[data-slug="exam"]:checked').length) {
                        allFeesCategoryRadioButtons.filter('[data-slug="exam"]').removeAttr('disabled');
                    }
                }
            });
        });
    </script>
@endsection