@extends('layouts.admin')

<title>{{ config('app.name', 'Laravel') }} | Admin | Add Class</title>

<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
</style>

@section('main-content')
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="{{ URL::asset('assets/multi_select/multiselect_style.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 New Class</h4>
            <!-- Basic Layout -->
            <div class="row" id="person_1">
                <div class="col-xl">
                    <div class="card mb-4">
                        <div class="card-body">
                            <div class="row">
                                <div class="">
                                    <h5 class="">Class Details</h5>
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Class Name</label>
                                    <input type="text" class="form-control input form-control-line first_name"
                                        name="class_name" id="class_name" />
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label" for="rank_class">Rank Your Class</label>
                                        <input type="number" class="form-control input form-control-line" name="rank_class"
                                            id="rank_class" min="1" max="5" maxlength="1"
                                            oninput="validateRank(this)" />
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label" for="alternate_teacher">Alternate Teacher</label>
                                        <input type="text" class="form-control input form-control-line"
                                            name="alternate_teacher" id="alternate_teacher" max="50" />
                                    </div>
                                </div>
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Class Email (For
                                        Login)</label>
                                    <input type="text" class="form-control input form-control-line first_name"
                                        name="class_email" id="class_email" />
                                </div>
                            </div>

                            <div class="row other_class_name d-none">
                                <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">
                                </div>
                            </div>

                            <div class="row">

                                <div id="" class="input-group input-group-merge yourWork multiSelect">
                                    <label for="">Teacher Name</label>
                                    <select multiple
                                        class="organisation_name multiSelect_field custom_multi_select custom_fc"
                                        data-placeholder="" id="select_my_work" name="teacher" id="teacher" multiple
                                        {{ count($teacher_arr) == 0 ? 'disabled' : '' }}>
                                        @if (count($teacher_arr) == 0)
                                            <option selected disabled>Teacher Not Found</option>
                                        @else
                                            <option value="" selected disabled>Select Teacher</option>
                                            @foreach ($teacher_arr as $key => $value)
                                                <option class="option2" value="{{ $key }}"
                                                    data-item-value="{{ $key }}">{{ $value }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12 mb-3">
                                    <label class="form-label" for="basic-icon-default-fullname">Package Name</label>
                                    <select name="select_package" id="select_package"
                                        class="form-control form-select form-control-line"
                                        {{ count($packages) == 0 ? 'disabled' : '' }}>
                                        @if (count($packages) == 0)
                                            <option selected disabled>Package Not Found</option>
                                        @else
                                            <option value="" selected disabled>Select Package</option>
                                            @foreach ($packages as $package)
                                                <option value="{{ $package->id }}">{{ $package->class_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>

                            @foreach ($packages as $package)
                                <span class="show_fee_structure package_{{ $package->id }} d-none">
                                    <div class="row">
                                        <div class="col-12 col-md-6">
                                            <h5>Fee Plan</h5>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <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="registeration_fee"
                                                id="registeration_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="{{ $package->registeration_fee }}" disabled>
                                        </div>

                                        <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="{{ $package->kit_fee }}" disabled>
                                        </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 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="{{ $package->monthly }}" disabled>
                                        </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="{{ $package->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="{{ $package->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="{{ $package->annual }}" disabled>
                                        </div>
                                    </div>
                                </span>
                            @endforeach


                            <div class="form-group loaderbtn_div">
                                <button type="button" class="btn btn-success text-white" onclick="saveFeePlanner()"
                                    id="save_btn">Save</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 src="{{ URL::asset('assets/multi_select/multi_select_myWork1.js') }}"></script>
    <script>
        function validateRank(input) {
            // Allow only numbers 1-20
            if (!/^(1?[0-9]|20)$/.test(input.value)) {
                input.value = "";
            }
        }
    </script>
    <script>
        let month = 0,
            class_name = "";
        // $("#class_name").on('change', function() {
        //     if ($(this).val() === "Other") {
        //         $(".other_class_name").removeClass("d-none");
        //     } else {
        //         $(".other_class_name").addClass("d-none");
        //     }
        // });

        $("#select_package").on("change", function(event) {
            $(".show_fee_structure").addClass('d-none');
            $('.package_' + $(this).val()).removeClass('d-none');
        });

        function calculateTotalAmount() {}

        function saveFeePlanner() {
            class_name = $("#class_name").val();
            if (!class_name) class_name = "";

            if (!class_name) {
                alert("Please fill out all the fields mentioned below.");
                return;
            }
            if (ValueArray.length > 2) {
                $('#loader').hide();
                $('#save_btn').prop("disabled", false);

                alert('You can choose a maximum of only two teachers.');
                return;
            }
            const msg = confirm("You want to save following Class details ?");
            if (msg == false) {
                return;
            }
            $('.text-danger').remove();
            $('input').removeClass('is-invalid');
            $('select').removeClass('is-invalid');
            $('#save_btn').prop("disabled", true);
            $('#loader').show();

            let alternate_teacher = ($("#alternate_teacher").val()).trim(); 
            const other_class_name = ($("#other_class_name").val()).trim();
            let select_package = $("#select_package").val();
            let class_email = $("#class_email").val();
            let rank_class = $("#rank_class").val();
            let teacher = ValueArray;
            if (!select_package) select_package = "";
            if (!teacher) teacher = "";


            var formData = new FormData();
            formData.append('class_name', class_name);
            formData.append('rank_class', rank_class);
            formData.append('other_class_name', other_class_name);
            formData.append('select_package', select_package);
            formData.append('class_email', class_email);
            formData.append('teacher', teacher);
            formData.append('alternate_teacher', alternate_teacher);

            $.ajax({
                type: "post",
                url: "{{ url('/save-class') }}",
                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')) {
                                    if (field_name == "class_name" && error[0] ==
                                        "The class name has already been taken.") {
                                        error[0] =
                                            "There is already a fee plan attached to this class.";
                                    }
                                    $(`#${field_name}`).addClass('is-invalid');
                                    $(`#${field_name}`).closest('div').append(
                                        '<span class="text-strong text-danger">' + error[0] +
                                        '</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;
                    }
                    $('#save_btn').prop("disabled", false);

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

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

                }
            });
        }
    </script>

@endsection