@extends('layouts.admin')

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

<style>
    .modal {
        display: none;
        position: fixed;
        z-index: 1;
        padding-top: 100px;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }

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

    .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">
<style>
    .input {
        color: #697a8d;
    }

    #loader {
        text-align: center;
        margin-left: 15px;
        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 class="col-md-4 col-8 m-4 mb-0 display_msg d-none" style="position: fixed; top:70">
    <div class="alert alert-success" role="alert">
        Additional Charges added successfully.
    </div>
</div>

<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-4 ps-2"><span class="text-muted fw-light"></span>Additional Charges</h4>
        <!-- Basic Layout -->
        <div class="row" id="person_1">
            <div class="col-xl">
                <div class="mb-2 text-center text-muted fw-bold">
                    Set Additional charges 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">Additional Charges</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 mb-3">
                                <span>
                                    <label class="form-label" for="basic-icon-default-fullname">Annual Charges</label> ( Includes Security Fee, Activity Fee and many more. )
                                </span>
                                <input type="text" value="{{$additional_charges && $additional_charges->annual_charges?$additional_charges->annual_charges:""}}" placeholder="Annual Charges" class="form-control input form-control-line" name="annual_charges" id="annual_charges" onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'" minlength="3" maxlength="5" autocomplete="off">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12 mb-3">
                                <span>
                                    <label class="form-label" for="basic-icon-default-fullname">Transportation Charges</label> ( Includes charges per kilometer per day )
                                </span>
                                <input type="text" value="{{($additional_charges && $additional_charges->transport_charges)?$additional_charges->transport_charges:""}}" placeholder="Transportation Charges" class="form-control input form-control-line" name="transportation_charges" id="transportation_charges" onkeydown="return (event.key >= '0' && event.key <= '9') || event.key === 'Backspace' || event.key === 'ArrowLeft' || event.key === 'ArrowRight' || event.key === 'Delete' || event.key === 'Tab'" minlength="1" maxlength="2" autocomplete="off">
                            </div>
                        </div>
                        <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;">
                                <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>
    function saveFeePlanner() {
        const msg = confirm("You want to save following Charges ?"); 
        if(msg==false){
            return;
        }
        $('.text-danger').remove();
        $('input').removeClass('is-invalid');
        $('select').removeClass('is-invalid');
        $('#save_btn').prop("disabled", true);
        $('#loader').show();

        const annual_charges = ($("#annual_charges").val()).trim();
        const transportation_charges = ($("#transportation_charges").val()).trim();

        var formData = new FormData();
        formData.append('annual_charges', annual_charges);
        formData.append('transportation_charges', transportation_charges);
        $.ajax({
            type: "post",
            url: "{{ route('additional-charges.store') }}",
            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[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.scrollTo({ top: 0, behavior: 'smooth' });
                    $(".display_msg").removeClass('d-none');
                    setTimeout(() => {
                        $(".display_msg").addClass('d-none');
                    }, 1200);

                }
                $('#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