@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Edit Fee Planner</title>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <style>
        .input {
            color: #697a8d;
        }

        #loader {
            text-align: center;
            /* Align the loader to the center */
            margin-left: 15px;
            /* Adjust this value to manage space between loader and button */
            width: auto;
            display: inline-block;
        }

        #loader img {
            width: 30px;
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-text-fill-color: #697a8d !important;
        }
    </style>
    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif
    </div>

    <div class="content-wrapper">
        <!-- Content -->
        <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light"></span> Add Fees Plan For New Class</h4>
            <!-- Basic Layout -->
            <div class="row" id="person_1">
                <div class="col-xl">
                    <div class="mb-2 text-end text-muted fw-bold">
                        Set Fee in such a way that it's end as 0. Odd value will arise error in payments.
                    </div>
                    <div class="card mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Fee Planner </h5>
                        </div>
                        <div class="card-body">
                            @if ($feesPlan->class_name != 'default')
                                <div class="row">
                                    {{-- <div class="col-12 mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Class Name</label>
                                        <select name="class_name" id="class_name"
                                            class="form-control input form-control-line" {{ $editable ? '' : 'disabled' }}>
                                            <option value="" selected disabled>Select Class</option>
                                            <option value="Play Group"
                                                {{ $feesPlan->class_name == 'Play Group' ? 'selected' : '' }}>Play Group
                                            </option>
                                            <option value="Nursery"
                                                {{ $feesPlan->class_name == 'Nursery' ? 'selected' : '' }}>
                                                Nursery
                                            </option>
                                            <option value="Junior KG"
                                                {{ $feesPlan->class_name == 'Junior KG' ? 'selected' : '' }}>
                                                Junior KG
                                            </option>
                                            <option value="Senior KG"
                                                {{ $feesPlan->class_name == 'Senior KG' ? 'selected' : '' }}>
                                                Senior KG
                                            </option>
                                            <option value="Other" {{ $feesPlan->class_name == 'Other' ? 'selected' : '' }}>
                                                Other
                                            </option>
                                        </select>
                                    </div> --}}
                                    <div class="col-12 mb-3">
                                        <label class="form-label" for="basic-icon-default-fullname">Package Name</label>
                                        <input type="text" class="form-control input form-control-line first_name"
                                            name="class_name" id="class_name" value="{{ $feesPlan->class_name }}" />
                                    </div>
                                </div>
                            @endif
                            <div class="row other_class_name {{ $feesPlan->class_name == 'Other' ? '' : 'd-none' }}"
                                {{ $editable ? '' : 'disabled' }}>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Other Class Name</label>
                                    <input type="text" name="other_class_name" id="other_class_name"
                                        placeholder="Class Name" class="form-control input form-control-line first_name"
                                        minlength="3" maxlength="30" onkeydown="return /[a-zA-Z0-9_\s-]/.test(event.key)"
                                        autocomplete="off" value="{{ $feesPlan->other_class_name }}">
                                </div>
                            </div>
                            <div class="row">
                                @if ($feesPlan->class_name == 'default')
                                    <div class="col-12 col-md-6 mb-3">
                                        <label class="form-label" for="basic-icon-default-email">Portal Registration
                                            Fee</label>
                                        <span>( ₹ )</span>
                                        <input type="text" placeholder="Portal Registration Fee"
                                            class="form-control input form-control-line" name="registration_fee"
                                            id="registration_fee"
                                            onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                            minlength="2" maxlength="6" autocomplete="off"
                                            value="{{ $feesPlan->registeration_fee }}">
                                    </div>
                                    <div class="col-12 col-md-6 mb-3">
                                        <label class="form-label" for="basic-icon-default-admission-form-fee">Admission Form
                                            Fee</label>
                                        <span>( ₹ )</span>
                                        <input type="text" placeholder="Admission Form Fee"
                                            class="form-control input form-control-line" name="admission_form_fee"
                                            id="admission_form_fee"
                                            onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                            minlength="2" maxlength="6" autocomplete="off"
                                            value="{{ $feesPlan->admission_form_fee }}">
                                    </div>

                                    <div class="col-12 col-md-6 mb-3">
                                        <label class="form-label" for="basic-icon-default-miscellaneous-fee">Miscellaneous
                                            Fee</label>
                                        <span>( ₹ )</span>
                                        <input type="text" placeholder="Miscellaneous Fee"
                                            class="form-control input form-control-line" name="miscellaneous_fee"
                                            id="miscellaneous_fee"
                                            onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                            minlength="2" maxlength="6" autocomplete="off"
                                            value="{{ $feesPlan->miscellaneous_fee }}">
                                    </div>
                                    <div class="col-12 col-md-6 mb-3">
                                        <label class="form-label" for="basic-icon-default-annual-fee">Annual Fee</label>
                                        <span>( ₹ )</span>
                                        <input type="text" placeholder="Annual Fee"
                                            class="form-control input form-control-line" name="annual_fees" id="annual_fees"
                                            onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                            minlength="2" maxlength="6" autocomplete="off"
                                            value="{{ $feesPlan->annual_fee }}">
                                    </div>
                                @endif
                                <div class="row">
                                    <div class="col-12 col-md-6 mb-3">
                                        <label class="form-label" for="basic-icon-default-email">Kit Fee</label>
                                        <span>( ₹ )</span>
                                        <input type="text" placeholder="Kit Fee"
                                            class="form-control input form-control-line" name="kit_fee" id="kit_fee"
                                            onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                            minlength="2" maxlength="5" autocomplete="off"
                                            value="{{ $feesPlan->kit_fee }}">
                                    </div>
                                    @if ($feesPlan->day_care == 1)
                                        <div class="col-12 col-md-6 mb-3">
                                            <label class="form-label" for="day_care">Enable Day Care</label>
                                            <div class="form-check">
                                                <input type="hidden" name="day_care" value="0">
                                                <input type="checkbox" class="form-check-input" id="day_care"
                                                    name="day_care" value="1" checked disabled>
                                                <label class="form-check-label" for="day_care">Yes, enable day
                                                    care</label>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="row mt-2">
                                <h5>Tution Fee</h5>
                            </div>
                            <div class="row">
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Monthly</label>
                                    <span>( ₹ )</span>
                                    <input {{ $editable ? '' : 'disabled' }} type="text" placeholder="Monthly Fee"
                                        class="form-control input form-control-line" name="monthly_fee" id="monthly_fee"
                                        onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                        minlength="2" maxlength="10" autocomplete="off"
                                        value="{{ $feesPlan->monthly }}">
                                </div>

                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Quarterly</label>
                                    <span>( ₹ )</span>
                                    <input type="text" placeholder="Quarterly Fee"
                                        class="form-control input form-control-line" name="quarterly_fee"
                                        id="quarterly_fee"
                                        onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                        minlength="2" maxlength="10" autocomplete="off"
                                        value="{{ $feesPlan->quarterly }}" disabled>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Semi-Annual</label>
                                    <span>( ₹ )</span>
                                    <input type="text" placeholder="Semi-Annual Fee"
                                        class="form-control input form-control-line" name="semi_annual_fee"
                                        id="semi_annual_fee"
                                        onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                        minlength="2" maxlength="10" autocomplete="off"
                                        value="{{ $feesPlan->semi_annual }}" disabled>
                                </div>


                                <div class="col-12 col-md-6 mb-3">
                                    <label class="form-label" for="basic-icon-default-email">Annual</label>
                                    <span>( ₹ )</span>
                                    <input type="text" placeholder="Annual Fee"
                                        class="form-control input form-control-line" name="annual_fee" id="annual_fee"
                                        onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'"
                                        minlength="2" maxlength="10" autocomplete="off"
                                        value="{{ $feesPlan->annual }}" disabled>
                                </div>
                            </div>

                            <div class="form-group loaderbtn_div">
                                <button type="button" class="btn btn-success text-white" onclick="updateFeePlanner()"
                                    id="update_btn">Update</button>
                                <div class="loaderDiv" id="loader" style="display: none;">
                                    <!-- Your loader HTML or spinner goes here -->
                                    <img src="{{ asset('assets/loader.gif') }}" alt="Loading..." />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $("#class_name").on('change', function() {
            if ($(this).val() === "Other") {
                $(".other_class_name").removeClass("d-none");
            } else {
                $(".other_class_name").addClass("d-none");
            }
        });

        $("#monthly_fee").on("keyup", function() {
            const month = $(this).val();
            $("#quarterly_fee").val(month * 3);
            $("#semi_annual_fee").val(month * 6);
            $("#annual_fee").val(month * 12);
        });

        function updateFeePlanner() {
            const msg = confirm("Are you sure you want to update below mentioned details?");
            if (msg == false) {
                return;
            }
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('select').removeClass('is-invalid');
            $('#update_btn').prop("disabled", true);
            $('#loader').show();

            let class_name = $("#class_name").val();
            if (!class_name) class_name = "";
            const other_class_name = $("#other_class_name").val() ? $("#other_class_name").val().trim() : $(
                "#other_class_name").val();

            const monthly_fee = $("#monthly_fee").val() ? ($("#monthly_fee").val()).trim() : $("#monthly_fee").val();
            const quarterly_fee = $("#quarterly_fee").val() ? ($("#quarterly_fee").val()).trim() : $("#quarterly_fee")
                .val();
            const semi_annual_fee = $("#semi_annual_fee").val() ? ($("#semi_annual_fee").val()).trim() : $(
                "#semi_annual_fee").val();
            const annual_fees = $("#annual_fees").val() ? ($("#annual_fees").val()).trim() : $("#annual_fees").val();
            const registration_fee = ($("#registration_fee").val());
            const admission_form_fee = ($("#admission_form_fee").val());
            const miscellaneous_fee = ($("#miscellaneous_fee").val());
            const annual_fee = ($("#annual_fee").val());
            const kit_fee = ($("#kit_fee").val());
            let day_care = $("#day_care").prop("checked") ? 1 : 0; // Ensure it's either 1 or 0
            if ((!day_care || day_care == 0) && registration_fee == 0) {
                alert('Registration Fee should be greater than 0');
                return;
            }

            if ((!day_care || day_care == 0) && kit_fee == 0) {
                alert('Kit Fee should be greater than 0');
                return;
            }

            let formData = new FormData();
            formData.append('feeplan_id', {{ $feesPlan->id }});
            formData.append('monthly_fee', monthly_fee);
            formData.append('quarterly_fee', quarterly_fee);
            formData.append('semi_annual_fee', semi_annual_fee);
            formData.append('annual_fee', annual_fee.trim());
            formData.append('other_class_name', other_class_name);
            if (registration_fee) {
                formData.append('registration_fee', registration_fee.trim());
                formData.append('admission_form_fee', admission_form_fee.trim());
                formData.append('miscellaneous_fee', miscellaneous_fee.trim());
                formData.append('annual_fees', annual_fees);
            }
            formData.append('kit_fee', kit_fee.trim());
            if (class_name) {
                formData.append('class_name', class_name);
            } else {
                formData.append('class_name', 'default');
            }

            formData.append('_method', 'PUT');
            const updateUrl = "{{ route('fee-planner.update', $feesPlan->id) }}";

            $.ajax({
                type: "POST",
                url: updateUrl,
                contentType: 'multipart/form-data',
                cache: false,
                contentType: false,
                processData: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: formData,
                success: function(data) {
                    const status = data["status"];

                    if (status == 400) {
                        const error_code = data["error_code"];

                        if (error_code === 1) {
                            $.each(data["errors"], function(field_name, error) {
                                // Check if the error message for the field already exists
                                if (!$(`#${field_name}`).closest('div').next().hasClass(
                                        'text-danger')) {
                                    $(`#${field_name}`).addClass('is-invalid');
                                    $(`#${field_name}`).closest('div').append(
                                        '<span class="text-strong text-danger">' + error + '</span>'
                                    );
                                }
                            });

                            const firstErrorElement = $('.is-invalid').first();
                            if (firstErrorElement.length) {
                                $('html, body').animate({
                                    scrollTop: firstErrorElement.offset().top -
                                        20 // Adjust the offset as needed
                                }, 500);
                            }
                        } else if (error_code === 2) {
                            if (!$(`#loaderbtn_div`).closest('div').next().hasClass('text-danger')) {
                                $(`#loaderbtn_div`).closest('div').after(
                                    '<span class="text-strong text-danger">Something went wrong. Please try again later.</span>'
                                );
                            }
                        }

                    } else {
                        window.location.href = data.redirect;
                    }
                    $('#update_btn').prop("disabled", false);

                },
                error: function() {
                    // Hide loader in case of an error
                    $('#loader').hide();
                    $('#update_btn').prop("disabled", false);

                    // Handle error
                },
                complete: function() {
                    // Hide loader when the request is completed (success, error, or failure)
                    $('#loader').hide();
                    $('#update_btn').prop("disabled", false);

                }
            });
        }
    </script>
@endsection