@extends('layouts.dashboard-app')

@section('main-content')
    <div class="content-body">
        <div class="container">
            <div class="row page-titles">
                <div class="col p-0">
                    <h4>Hello, <span>Welcome {{ auth()->user()->name }}</span></h4>

                </div>
                <div class="col p-0">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="javascript:void(0)">From</a>
                        </li>
                        <li class="breadcrumb-item active">Basic</li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger" role="alert">
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">×</span>
                                    </button>

                                    @foreach ($errors->all() as $error)
                                        {{ $error }}<br />
                                    @endforeach
                                </div>
                            @endif

                            @php
                                use Carbon\Carbon;
                                $currentMonth = Carbon::now()->format('Y-m'); // Format as "YYYY-MM"
                            @endphp

                            <div class="row">
                                <div class="col-6">
                                </div>
                                <div class="col-3"></div>
                                <div class="col-3">
                                    <h5>This Month Advance Budget</h5>
                                    @if (optional($advance_budget)->budget !== null)
                                        {{-- <input type="text" class="form-control budget" name="budget" id="budget"
                                            value="{{ $advance_budget->budget }}" readonly> --}}
                                        <input type="text" class="form-control budget" name="budget" id="budget"
                                            value="{{ number_format($advance_budget->budget, 2) }}" readonly>
                                    @endif
                                </div>
                            </div>

                            {{-- @dd($advanceRequest); --}}

                            <form class="form-horizontal form-label-left input_mask" method="post"
                                enctype="multipart/form-data" autocomplete="off" id="advanceForm">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="User Name">User Name</label>
                                            <select name="users" id="users" class="form-control users" required
                                                onchange="remaining_balance()">
                                                <option value="" selected disabled>- Users Selected -</option>
                                                @foreach ($users as $key)
                                                    {{-- <option value="{{ $user->id }}">
                                                        {{ $user->id }} - {{ $user->name }} - {{ $user->role }}
                                                    </option> --}}
                                                    {{-- <option value="{{ $key->id }}"
                                                        {{ $key->id == $advanceRequest->user_id ? 'selected' : '' }}>
                                                        {{ $key->id }} - {{ $key->name }} - {{ $key->role }}
                                                    </option> --}}
                                                    <option value="{{ $key->id }}"
                                                        {{ $key->id == ($advanceRequest->user_id ?? '') ? 'selected' : '' }}>
                                                        {{ $key->id }} - {{ $key->name }} - {{ $key->role }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Date">Date</label>
                                            <input type="date" class="form-control date" name="date" id="date"
                                                value="{{ $advanceRequest->date ?? '' }}">
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Month">Month</label>
                                            <input type="month" class="form-control month" name="month" id="month"
                                                value="{{ $advanceRequest == null ? $currentMonth : $advanceRequest->month ?? '' }}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Payment Mode">Payment Mode</label>
                                            <select name="payment_mode" id="payment_mode" class="form-control payment_mode">
                                                <option value="" disabled selected>- Select Payment Mode -</option>
                                                <option value="Bank Transfer">Bank Transfer</option>
                                                <option value="Cash">Cash</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Advance Amount">Advance Amount</label>
                                            <input type="text" class="form-control advance_amount" name="advance_amount"
                                                id="advance_amount" onblur="budget()"
                                                value="{{ $advanceRequest->budget ?? '' }}">
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Bank Reference No">Bank Reference No</label>
                                            <input type="text" class="form-control bank_reference_no"
                                                id="bank_reference_no" name="bank_reference_no">
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Advance Given Type">Advance Given Type</label>
                                            <select name="advance_given_type" id="advance_given_type"
                                                class="form-control advance_given_type">
                                                <option value="" disabled selected>- Select Advance Given Type -
                                                </option>
                                                <option value="Company">Company</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Installment Months">Installment Months</label>
                                            <select name="installment_months" id="installment_months"
                                                class="form-control installment_months" onchange="installments_type()">
                                                <option value="" disabled selected>- Select Installment Months -
                                                </option>
                                                <option value="1">1 Months</option>
                                                <option value="2">2 Months</option>
                                                <option value="3">3 Months</option>
                                                <option value="4">4 Months</option>
                                                <option value="5">5 Months</option>
                                                <option value="6">6 Months</option>
                                                <option value="7">7 Months</option>
                                                <option value="8">8 Months</option>
                                                <option value="9">9 Months</option>
                                                <option value="10">10 Months</option>
                                                <option value="11">11 Months</option>
                                                <option value="12">12 Months</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Installment Plan">Installment Plan</label>
                                            <select name="installment_plan" id="installment_plan"
                                                class="form-control installment_plan">
                                                <option value="" disabled selected>- Select Installment Plan -
                                                </option>
                                                <option value="In Month Installment">In Month Installment</option>
                                                <option value="Months Installments">Months Installments</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Previous Balance">Previous Balance</label>
                                            <input type="text" class="form-control previous_balance"
                                                name="previous_balance" id="previous_balance">
                                        </div>
                                    </div>



                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="Closed Balance">Closed Balance</label>
                                            <input type="text" class="form-control closed_balance"
                                                name="closed_balance" id="closed_balance">
                                        </div>
                                    </div>


                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <button type="submit" id="saveBtn" class="btn btn-success"
                                                name="upload">Submit</button>
                                        </div>
                                    </div>
                                </div>

                            </form>


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

            </div>

        </div>

    </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {

        $("#saveBtn").click(function(e) {
            e.preventDefault();

            const users = $(".users").val();
            const date = $(".date").val();
            const month = $(".month").val();
            const payment_mode = $(".payment_mode").val();
            const advance_amount = $(".advance_amount").val();
            const bank_reference_no = $(".bank_reference_no").val();
            const advance_given_type = $(".advance_given_type").val();
            const installment_months = $(".installment_months").val();
            const installment_plan = $(".installment_plan").val();
            const previous_balance = $(".previous_balance").val();
            const closed_balance = $(".closed_balance").val();

            // Client-side validation
            if (!users || !date || !month || !payment_mode || !advance_amount || !advance_given_type ||
                !installment_months) {
                alert("Please fill out all required fields.");
                return;
            }

            $.ajax({
                type: "POST",
                url: "{{ route('advances.save') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    users: users,
                    date: date,
                    month: month,
                    payment_mode: payment_mode,
                    advance_amount: advance_amount,
                    bank_reference_no: bank_reference_no,
                    advance_given_type: advance_given_type,
                    installment_months: installment_months,
                    installment_plan: installment_plan,
                    previous_balance: previous_balance,
                    closed_balance: closed_balance,
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message); // Replace with a toast notification
                        // Optionally reset the form
                        $("#advanceForm")[0].reset();
                        window.location.href = "/admin/advance/index"
                    } else {
                        alert("Failed to save advance. Please try again.");
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors;
                        let errorMessage = "Validation Errors:\n";
                        for (const key in errors) {
                            errorMessage += `${errors[key]}\n`;
                        }
                        // alert(errorMessage);
                        console.log(errorMessage);
                    } else {
                        console.error(xhr.responseText);
                        alert("An unexpected error occurred.");
                    }
                },
            });
        });
    });


    function remaining_balance() {
        const users = $(".users").val();
        $.ajax({
            type: "GET",
            url: "{{ route('advances.remaining_balance') }}",
            data: {
                users: users,
            },
            success: function(response) {
                let remainingBalance = response.remaining_balance;

                // Remove everything after the decimal point
                let integerPart = Math.floor(remainingBalance); // Or you can use parseInt

                // Show the result, just the integer part
                // alert(integerPart);
                $('.previous_balance').val(integerPart);
            },
        });
    }


    // function budget() {
    //     // Retrieve and parse the values
    //     var budget = parseFloat($(".budget").val().replace(/,/g, '')) || 0; // Remove commas and parse float
    //     alert(budget);
    //     var advance_amount = parseFloat($(".advance_amount").val()) || 0;

    //     // Validate the advance_amount against the budget
    //     if (advance_amount > budget) {
    //         alert("Advance amount cannot exceed the available budget.");
    //         $(".advance_amount").val(''); // Clear the invalid input
    //         return; // Exit the function
    //     }

    //     // Calculate the remaining budget
    //     var final_amount = budget - advance_amount;

    //     // Update the budget field with the remaining amount, formatted to two decimal places
    //     $(".budget").val(final_amount.toFixed(2));
    // }

    function budget() {
        // Retrieve and parse the values
        var budgetValue = $(".budget").val();
        var budget = budgetValue ? parseFloat(budgetValue.replace(/,/g, '')) : 0; // Check for null/undefined value
        // alert(budget);

        var advanceAmountValue = $(".advance_amount").val();
        var advance_amount = advanceAmountValue ? parseFloat(advanceAmountValue) : 0;

        // Validate the advance_amount against the budget
        if (advance_amount > budget) {
            alert("Advance amount cannot exceed the available budget.");
            $(".advance_amount").val(''); // Clear the invalid input
            return; // Exit the function
        }

        // Calculate the remaining budget
        var final_amount = budget - advance_amount;

        // Update the budget field with the remaining amount, formatted to two decimal places
        $(".budget").val(final_amount.toFixed(2));
    }



    // Helper function to round numbers to a fixed number of decimals
    function roundToDecimals(value, decimals) {
        return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
    }

    function installments_type() {
        const installment_months = parseFloat($(".installment_months").val());
        const advance_amount = parseFloat($(".advance_amount").val());

        // Validate inputs to ensure they are numbers
        if (isNaN(installment_months) || isNaN(advance_amount) || installment_months <= 0) {
            alert("Please provide valid and positive values for both advance amount and installment months.");
            return;
        }

        // Calculate the initial installment amount and round to 2 decimal places
        let initial_installment = advance_amount / installment_months;

        // Calculate the total sum with the initial installment (without rounding)
        let total_sum = initial_installment * installment_months;

        // Calculate the discrepancy
        let discrepancy = advance_amount - total_sum;

        // Now, adjust the last installment by adding the discrepancy
        // This will ensure the total sum exactly matches the advance amount
        let final_installment = initial_installment + discrepancy;

        // Round all values to 2 decimal places before displaying them
        initial_installment = roundToDecimals(initial_installment, 2);
        final_installment = roundToDecimals(final_installment, 2);

        // Display the result
        $('.closed_balance').val(final_installment);
        console.log("Adjusted Installment: ", final_installment);
        calculate_total(); // Call the total calculation function
    }

    // Function to calculate the total based on installment amounts
    function calculate_total() {
        const installment_months = parseInt($(".installment_months").val());
        const installment_amount = parseFloat($('.closed_balance').val());

        if (isNaN(installment_months) || isNaN(installment_amount)) {
            alert("Invalid input for months or installment amount");
            return;
        }

        // Calculate the total and round it to two decimal places
        const total = roundToDecimals(installment_amount * installment_months, 2);

        console.log("Total: ", total); // This should now match the advance amount exactly

        // Optionally, display the total
        $('.total_balance').val(total);
    }
</script>