@php use App\Models\eims\settings\academic\ContentType; @endphp
@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')

    @include('successMsg')

    <div class="row page-wrap">
        <div class="col-md-10 col-md-offset-1">
            <div class="viewTitle">
                <div class="panel-heading" style="padding-bottom:0; ">
                    <div class="panel-options" style="margin-bottom: 1%">
                        <a class="btn btn-info pull-right addViewBtn"
                           href="{{ route('eims_fees_fine_config') }}">
                            <i class="glyphicon glyphicon-list addIcon" aria-hidden="true"></i>
                            {{ $pageTitle }} List
                        </a>
                    </div>
                    <div class="panel-title">Add {{ $pageTitle }}</div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-body panelBodyView" style="color: #000000 !important;">
                    {!! Form::open(['id' => 'feesFineConfigForm','class' => 'form-horizontal']) !!}
                    <div class="col-md-12">
                        <div style="background-color: #f8f9fa; border-radius: 8px; padding: 20px">
                            <div class="row">
                                @if($companyType === 'UNV')
                                    {{-- Faculty --}}
                                    <div class="col-sm-6">
                                        <div class="form-group row">
                                            {!! Form::label('faculty_id', 'Faculty: <sup class="text-danger">*</sup>', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                            <div class="col-sm-8">
                                                {!! Form::select('faculty_id', $faculties, null, [
                                                    'class' => 'form-control custom-select2',
                                                    'id' => 'faculty_id',
                                                    'placeholder' => 'Select Faculty',
                                                    'required',
                                                    'autocomplete' => 'off']) !!}
                                                <div id="faculty_ide" class="text-danger"></div>
                                            </div>
                                        </div>
                                    </div>

                                    {{-- Department --}}
                                    <div class="col-sm-6">
                                        <div class="form-group row">
                                            {!! Form::label('department_id', 'Department: <sup class="text-danger">*</sup>', [
                                                'class' => 'control-label text-gray col-sm-4',
                                                ], false) !!}
                                            <div class="col-sm-8">
                                                {!! Form::select('department_id', $departments, null, [
                                                    'class' => 'form-control custom-select2',
                                                    'id' => 'department_id',
                                                    'placeholder' => 'Select Department',
                                                    'required',
                                                    'autocomplete' => 'off']) !!}
                                                <div id="department_ide" class="text-danger"></div>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                {{-- Program/Medium/Version --}}
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        @php($programMediumLabel = $companyType == 'UNV' ? 'Program' : 'Medium/Version')
                                        {!! Form::label( 'program_medium_id', $programMediumLabel .': <sup class="text-danger">*</sup>',
                                        ['class' => 'control-label text-gray col-sm-4'],
                                        false,
                                        ) !!}
                                        <div class="col-sm-8">
                                            {!! Form::select('program_medium_id', $programs, $value = null, [
                                            'class' => 'form-control custom-select2',
                                            'id' => 'program_medium_id',
                                            'placeholder' => "Select $programMediumLabel",
                                            'autocomplete' => 'off',
                                            ]) !!}
                                            <p id='program_medium_ide' style="max-height:3px;"></p>
                                        </div>
                                    </div>
                                </div>
                                {{-- session_id --}}
                                <div class="col-md-6">
                                    <div class="form-group row">
                                        {!! Form::label('session_id', 'Session: <sup class="text-danger">*</sup>', [
                                            'class' => 'control-label text-gray col-sm-4',
                                            ], false) !!}
                                        <div class="col-sm-8">
                                            {!! Form::select('session_id', $sessions, null, [
                                                'class' => 'form-control custom-select2',
                                                'id' => 'session_id',
                                                'placeholder' => 'Select Session',
                                                'required',
                                                'autocomplete' => 'off'
                                                ]) !!}
                                            <div id="session_ide" class="text-danger"></div>
                                        </div>
                                    </div>
                                </div>

                                {{-- 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', $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 Fine config name --}}
                                <div class="col-sm-6">
                                    <div class="form-group row">
                                        {!! Form::label('name', 'Fees fine 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 fine config name/Title',
                                            'required',
                                            ]) !!}
                                            <p id="namee" style="max-height:3px;" class="text-danger"></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <br>
                        <div class="row">
                            <div class="col-md-10 col-md-offset-1">
                                @foreach($feesCategories as $feesCategory)
                                    <div class="row">
                                        {!! Form::hidden('fees_category_id[]', $feesCategory->id) !!}
                                        <div class="col-md-1">
                                            <div class="form-group ">
                                                <div class="control-label text-gray">
                                                    {{$feesCategory->name}}
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-11" id="{{$feesCategory->slug}}">
                                            <div class="row" data-fees-category-id="{{ $feesCategory->id }}">
                                                <div
                                                    class="col-md-2 control-label category-name text-gray">
                                                </div>
                                                <div class="col-md-10 fees-fine-holder">
                                                    {{-- Regular --}}
                                                    <div class="form-group row">
                                                        {!! Form::label("regular_date_$feesCategory->id", 'Regular Fees date', [
                                                            'class' => 'control-label text-gray col-md-2 regular-date-label',
                                                            ], false) !!}
                                                        <div class="col-md-6">
                                                            {!! Form::text("regular_date[$feesCategory->id]", null , [
                                                            'class' => 'form-control regular-date',
                                                            'data-fees-fine-count' => 0,
                                                            'data-fees-category-id' => $feesCategory->id,
                                                            'readonly']) !!}
                                                        </div>
                                                        <div class="col-md-2">
                                                            {{-- add more button --}}
                                                            <button type="button"
                                                                    class="btn btn-info addMoreFineDate"
                                                                    data-fees-category-id="{{ $feesCategory->id }}"
                                                                    title="Add Fine">
                                                                <i class="fa fa-plus"></i>
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <div class="fine-date-holder">
                                                        {{-- Fine Type --}}
                                                        <div class="form-group row main-fine-date hidden">
                                                            {!! Form::label('fine_day_'.$feesCategory->id.'_'. 0, 'Day wise fine: ', [
                                                                'class' => 'control-label text-gray col-md-2 fees-fine-label',
                                                                ], false) !!}
                                                            {!! Form::hidden("fine_type_id[$feesCategory->id][]", ContentType::FINE_TYPE_DAY_WISE, ['class' => 'fine-type']) !!}
                                                            <div class="col-md-6">
                                                                {!! Form::text("fine_day[$feesCategory->id][]", '' , [
                                                                    'class' => 'form-control fine-date',
                                                                    'data-fees-category-id' => $feesCategory->id,
                                                                    'placeholder' => 'Fine Day',
                                                                    'readonly']) !!}
                                                            </div>
                                                            <div class="col-md-2">
                                                                {{-- Fine Amount --}}
                                                                {!! Form::text("fine_amount[$feesCategory->id][]", null, [
                                                                    'class' => 'form-control fine-amount',
                                                                    'placeholder' => 'Fine Amount',
                                                                    'step' => '0.01',
                                                                    'data-fees-category-id' => $feesCategory->id,
                                                                    ]) !!}
                                                                <div class="text-danger"></div>
                                                            </div>
                                                            <div class="col-md-2">
                                                                <button type="button"
                                                                        class="btn btn-danger removeFineDate"
                                                                        title="Remove Fine">
                                                                    <i class="fa fa-minus"></i>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Monthly Fine --}}
                                                    <div class="form-group row ">
                                                        {!! Form::label('fine_amount_'.$feesCategory->id.'_'. 0, 'Month wise Fine: ', [
                                                            'class' => 'control-label text-gray col-md-2',
                                                            ], false) !!}
                                                        {!! Form::hidden("fine_type_id[$feesCategory->id][]", ContentType::FINE_TYPE_MONTH_WISE, ['class' => 'fine-type']) !!}
                                                        {!! Form::hidden("fine_day[$feesCategory->id][]", null, ['class' => 'fine-date']) !!}
                                                        <div class="col-md-6">
                                                            {!! Form::text("fine_amount[$feesCategory->id][]", null, [
                                                                'class' => 'form-control fine-amount',
                                                                'placeholder' => 'Month wise fine amount',
                                                                'step' => '0.01',
                                                                'data-fees-category-id' => $feesCategory->id,
                                                                'required',
                                                                ]) !!}
                                                            <div class="text-danger"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {{-- Advance month field --}}
                                    </div>
                                    <br>
                                @endforeach
                            </div>
                        </div>
                        {{-- Submit Button --}}
                        <div class="text-right">

                            <button type="submit" 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>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

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

        $(document).ready(function () {
            $('#effective_date').datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                minDate: 0 // Prevents selection of previous dates
            });

            // on changing faculty get departments
            $("#faculty_id").on("change", function () {
                const facultyId = $("#faculty_id").val();
                const departmentSelect = $("#department_id").empty().prepend(`<option value="">Select Department</option>`);

                $.ajax({
                    url: "{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}",
                    type: "POST",
                    data: {faculty_id: facultyId},
                    success: function (data) {
                        const {departmentByFacultyChange} = data;
                        if (departmentByFacultyChange) {
                            departmentByFacultyChange.forEach((department) => {
                                departmentSelect.append(`<option value="${department.id}">${department.name}</option>`);
                            });
                        }
                    }
                });
            });

            // on changing department of faculty get programs
            $("#faculty_id, #department_id").on("change", function () {
                const facultyId = $("#faculty_id").val();
                const departmentId = $("#department_id").val();

                const programMediumSelect = $("#program_medium_id").empty().prepend(`<option value="">Select ${programMediumLabel}</option>`);

                $.ajax({
                    url: "{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}",
                    type: "POST",
                    data: {faculty_id: facultyId, department_id: departmentId},
                    success: function (data) {
                        const {programListByDepartmentChange} = data;
                        if (programListByDepartmentChange) {
                            programListByDepartmentChange.forEach((program) => {
                                programMediumSelect.append(`<option value="${program.id}">${program.name}</option>`);
                            });
                        }
                    },
                });
            });

            // on changing program get sessions
            $("#program_medium_id").on("change", function () {
                const programId = $(this).val();
                const sessionSelect = $("#session_id").empty().prepend(`<option value="">Select Session</option>`);

                $.ajax({
                    url: "{{ route('eims_faculty_department_program_session_semester_section_course_subject_option_change') }}",
                    type: "POST",
                    data: {program_id: programId},
                    success: function (data) {
                        const {sessionListByProgramChange} = data;
                        if (sessionListByProgramChange) {
                            sessionListByProgramChange.forEach((session) => {
                                sessionSelect.append(`<option value="${session.id}">${session.name}</option>`);
                            });
                        }
                    }
                });
            });

            // on session change, get months
            $("#session_id").on("change", function () {
                const session_id = $(this).val();
                $.ajax({
                    url: "{{ route('eims_academic_exam_activities_scheduled') }}",
                    type: "POST",
                    data: {session_id: session_id},
                    success: function (data) {
                        const examDiv = $(`#exam`);
                        const examRow = examDiv.find(".row").first().clone();
                        examDiv.empty();
                        if (data.length) {
                            data.forEach(function (item) {
                                const newExamRow = examRow.clone();
                                newExamRow.find(".category-name").text(item.name);
                                newExamRow.find(".regular-date-label").attr('for', `regular_date_${examRow.data("fees-category-id")}_${item.id}`);
                                newExamRow.find(".regular-date")
                                    .data("fees-category-id", `${examRow.data("fees-category-id")}_${item.id}`)
                                    .attr("name", `regular_date[${examRow.data("fees-category-id")}][${item.id}]`)
                                    .removeClass('hasDatepicker');
                                newExamRow.find(".fine-date")
                                    .data("fees-category-id", `${examRow.data("fees-category-id")}_${item.id}`)
                                    .attr("name", `fine_day[${examRow.data("fees-category-id")}][${item.id}][]`)
                                    .removeClass('hasDatepicker');
                                newExamRow.find(".fine-amount")
                                    .data("fees-category-id", `${examRow.data("fees-category-id")}_${item.id}`)
                                    .attr("name", `fine_amount[${examRow.data("fees-category-id")}][${item.id}][]`);


                                examDiv.append(newExamRow);

                            });
                        } else {
                            examDiv.append(examDiv);
                        }

                    },
                });

                $.ajax({
                    url: "{{ route('eims_session_months') }}",
                    type: "POST",
                    data: {session_id: session_id},
                    success: function (data) {
                        const monthDiv = $(`#monthly`);
                        //  copy the first row in the monthlyDiv
                        const monthlyRow = monthDiv.find(".row").first().clone();
                        monthDiv.empty();
                        if (data.length) {
                            data.forEach(function (month) {
                                const [thisMonth, thisYear] = month.split('-');
                                const firstDayOfMonth = new Date(`${thisYear}-${thisMonth}-01`);

                                const newMonthlyRow = monthlyRow.clone();
                                newMonthlyRow.find(".category-name").text(month);
                                newMonthlyRow.find(".regular-date-label").attr('for', `regular_date_${monthlyRow.data("fees-category-id")}_${month}`);
                                newMonthlyRow.find(".regular-date")
                                    .attr('id', `regular_date_${monthlyRow.data("fees-category-id")}_${month}`)
                                    .data("fees-category-id", `${monthlyRow.data("fees-category-id")}_${month}`)
                                    .attr("name", `regular_date[${monthlyRow.data("fees-category-id")}][${month}]`)
                                    .val(`${('0000' + firstDayOfMonth.getDate()).slice(-2)}-${('0000' + (firstDayOfMonth.getMonth() + 1)).slice(-2)}-${firstDayOfMonth.getFullYear()}`)
                                    .removeClass('hasDatepicker');

                                newMonthlyRow.find(".fine-date")
                                    .attr('id', `fine_day_${monthlyRow.data("fees-category-id")}_${month}`)
                                    .data("fees-category-id", `${monthlyRow.data("fees-category-id")}_${month}`)
                                    .attr("name", `fine_day[${monthlyRow.data("fees-category-id")}][${month}][]`)
                                    .val(`${('0000' + (firstDayOfMonth.getDate() + 1)).slice(-2)}`)
                                    .removeClass('hasDatepicker');

                                newMonthlyRow.find(".fine-amount")
                                    .attr('id', `fine_amount_${monthlyRow.data("fees-category-id")}_${month}`)
                                    .data("fees-category-id", `${monthlyRow.data("fees-category-id")}_${month}`)
                                    .attr("name", `fine_amount[${monthlyRow.data("fees-category-id")}][${month}][]`);

                                newMonthlyRow.find(".fine-type")
                                    .attr('id', `fine_type_id_${monthlyRow.data("fees-category-id")}_${month}`)
                                    .data("fees-category-id", `${monthlyRow.data("fees-category-id")}_${month}`)
                                    .attr("name", `fine_type_id[${monthlyRow.data("fees-category-id")}][${month}][]`);

                                monthDiv.append(newMonthlyRow);
                            });
                        } else {
                            monthDiv.append(monthlyRow);
                        }
                    }
                });
            });

            $(".regular-date").datepicker({
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                defaultDate: new Date(),
            })
                .each(function () {
                    if (!$(this).val()) {
                        $(this).datepicker("setDate", new Date());
                    }
                });

            // Ensure jQuery UI datepicker is initialized for regular-date
            $(document).on('focus', '.regular-date', function () {
                if (!$(this).hasClass('hasDatepicker')) {
                    $(this).datepicker({
                        dateFormat: "dd-mm-yy",
                        changeMonth: true,
                        changeYear: true,
                    });
                }
            });

            $(document).on('focus', '.fine-date', function () {
                if (!$(this).hasClass('hasDatepicker')) {
                    const regularDate = $(this).closest('.fees-fine-holder').find('.regular-date').datepicker('getDate');
                    const lastDayOfMonth = new Date(regularDate.getFullYear(), regularDate.getMonth() + 1, 0);
                    $(this).datepicker({
                        dateFormat: "dd",
                        minDate: regularDate,
                        maxDate: lastDayOfMonth,
                    });
                }
            });

            // after changing regular date, set minDate for fine date where fees-category-id matches
            $(document).on("change", ".regular-date", function () {
                const regularDateElement = $(this);
                const fineDateHolder = regularDateElement.closest(".fees-fine-holder");
                const fineDateElements = fineDateHolder.find(".main-fine-date").not(".hidden").find(".fine-date");
                const regularDate = regularDateElement.datepicker("getDate");
                const lastDayOfMonth = new Date(regularDate.getFullYear(), regularDate.getMonth() + 1, 0);


                fineDateElements.each(function (index) {
                    let minDate = new Date(regularDate);
                    minDate.setDate(minDate.getDate() + index);
                    const currentDate = parseInt($(this).val());
                    // if currentDate is less than or equal to minDate, set updatedDate to minDate.getDate() + 1 else set updatedDate to currentDate
                    const updatedDate = currentDate <= minDate.getDate() ? minDate.getDate() : currentDate;
                    $(this).removeClass('hasDatepicker').val(`${('00' + updatedDate).slice(-2)}`).datepicker({
                        dateFormat: "dd",
                        minDate: minDate,
                        maxDate: lastDayOfMonth,

                    });
                });
            });

            // on changing fine date, set minDate for later fine date greater than the previous one where fees-category-id matches
            $(document).on("change", ".fine-date", function () {
                const fineDateHolder = $(this).closest(".fees-fine-holder");
                const fineDateElements = fineDateHolder.find(".fine-date").not(".hidden");
                const currentFineDate = $(this).datepicker("getDate");
                let minDate = new Date(currentFineDate);
                minDate.setDate(minDate.getDate() + 1);

                const currentIndex = fineDateElements.index(this);
                const subsequentFineDateElements = fineDateElements.slice(currentIndex + 1);

                subsequentFineDateElements.each(function (index) {
                    let minDate = new Date(currentFineDate);
                    minDate.setDate(minDate.getDate() + index + 1);
                    $(this).datepicker("option", "minDate", minDate);
                });
            });

            // Event listener for "Add Fine" button
            $(document).on("click", ".addMoreFineDate", function () {
                // append fine date by cloning main-fine-date where fees-category-id matches
                const feesCategoryId = $(this).data("fees-category-id");
                const feesFineHolder = $(this).closest(".fees-fine-holder");

                const regularDateElement = feesFineHolder.find(".regular-date");
                const fineDateHolder = feesFineHolder.find(".fine-date-holder");

                const mainFineDateHolder = feesFineHolder.find(".main-fine-date.hidden").clone();

                const fineDateElements = fineDateHolder.find('.main-fine-date').not('.hidden');
                const fineDateCount = parseInt(fineDateElements.length);

                mainFineDateHolder.removeClass("hidden");
                mainFineDateHolder.find(".fees-fine-label").attr("for", mainFineDateHolder.find(".fine-date").attr("id") + `_${fineDateCount}`);
                mainFineDateHolder.find(".fine-date").attr("id", mainFineDateHolder.find(".fine-date").attr("id") + `_${fineDateCount}`)
                    .data("fees-category-id", feesCategoryId)
                    .removeClass('hasDatepicker').attr("required", true);
                mainFineDateHolder.find(".fine-amount").attr("id", mainFineDateHolder.find(".fine-amount").attr("id") + `_${fineDateCount}`)
                    .data("fees-category-id", feesCategoryId).attr("required", true);

                if (!regularDateElement.hasClass('hasDatepicker')) {
                    regularDateElement.datepicker({
                        dateFormat: "dd-mm-yy",
                        changeMonth: true,
                        changeYear: true,
                    });
                }
                const regularDate = new Date(regularDateElement.datepicker("getDate"));
                const lastDayOfMonth = new Date(regularDate.getFullYear(), regularDate.getMonth() + 1, 0);

                let minDate = new Date();
                if (fineDateCount < 1) {
                    minDate = regularDate;
                } else {
                    const lastFineDateElement = fineDateElements.find(".fine-date").last();

                    const lastFineDate = lastFineDateElement.val();
                    if (lastFineDate) {
                        // assign minDate with value of year and month from regular date and use the day of value lastFineDate
                        minDate = new Date(regularDate.getFullYear(), regularDate.getMonth(), parseInt(lastFineDate));
                    }
                }

                minDate.setDate(minDate.getDate() + 1);

                if (minDate > lastDayOfMonth) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Fine date cannot be greater than the last day of the month of the regular date',
                        confirmButtonText: 'Ok'
                    });
                    return;
                }

                mainFineDateHolder.find(".fine-date")
                    .val(`${('0000' + minDate.getDate()).slice(-2)}`)
                    .datepicker({
                        dateFormat: "dd",
                        minDate: minDate,
                        maxDate: lastDayOfMonth,
                    });

                fineDateHolder.append(mainFineDateHolder);
            });

            // on clicking removeFineDate button, remove the closest main-fine-date
            $(document).on("click", ".removeFineDate", function () {
                $(this).closest(".main-fine-date").remove();
            });

            // on clicking submit button, ensure all fine_amount fields are visible and enabled before submitting
            $("#feesFineConfigForm").submit(function (e) {
                e.preventDefault();

                $.ajax({
                    url: "{{ route('eims_fees_fine_config_store') }}",
                    type: "POST",
                    data: $(this).serializeArray(),
                    success: function (data) {
                        const {responseStatus, responseTitle, responseText} = data;
                        Swal.fire({
                            icon: responseStatus,
                            title: responseTitle,
                            text: responseText,
                            confirmButtonText: 'Ok'
                        }).then(() => {
                            window.location.href = "{{ route('eims_fees_fine_config') }}";
                        });
                    },
                    error: function (data) {
                        const {responseStatus, responseTitle, responseText, errors} = data.responseJSON;
                        Swal.fire({
                            icon: responseStatus,
                            title: responseTitle,
                            text: responseText,
                            confirmButtonText: 'Ok'
                        });

                        if (errors) {
                            for (const [key, value] of Object.entries(errors)) {
                                $(`#${key}e`).text(value);
                            }
                        }
                    }
                });
            });
        });
    </script>
@endsection