@extends('layout.master')
@section('content')
<div class="main-content app-content">
    <div class="container-fluid">

        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <div>
                <h2 class="main-content-title fs-24 mb-1">Create Expense</h2>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Form</li>
                </ol>
            </div>
            <div class="d-flex">
            </div>
        </div>

        <div class="row card custom-card">
            <div class="card-body">
                <form action="{{ route('expense.store') }}" method="POST">
                    @csrf

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="year_id">Year</label>
                                <input type="number" name="year_id" class="form-control" placeholder="Enter Year" readonly value="{{ date('Y') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="month_id">Month</label>
                                <input type="number" name="month_id" class="form-control" placeholder="Enter Month" readonly value="{{ date('m') }}" required min="1" max="12">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="sno">Serial Number</label>
                                <input type="number" name="sno" class="form-control" placeholder="Enter Serial Number" readonly value="{{ isset($inbank->sno) ? $inbank->sno + 1 : 1 }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="date">Date</label>
                                <input type="" name="date" class="form-control" value="{{ date('Y-m-d') }}"  readonly required>
                            </div>
                        </div>
                    </div>


                    <div class="row" id="dynamic-form">
                       
                       
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="credit_name">Credit Name</label>
                                <input type="text" name="credit_name[]" class="form-control" placeholder="Enter Credit Name" >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="credit_amount">Credit Amount</label>
                                <input type="number" name="credit_amount[]" class="form-control" placeholder="Enter Credit Amount" step="0.01" >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="debit_name">Debit Name</label>
                                <input type="text" name="debit_name[]" class="form-control" placeholder="Enter Debit Name" >
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="debit_amount">Debit Amount</label>
                                <input type="number" name="debit_amount[]" class="form-control" placeholder="Enter Debit Amount" step="0.01" >
                            </div>
                        </div>
                    </div>
                    <hr style="color:black; background-color:black; border: 0; height: 1px;">
                    <!-- Button to add new row -->
                    <button type="button" id="add-row" class="btn btn-success">Add Row</button>
                
                
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="total_expense">Doller Rate</label>
                                <input type="number" id="dollerrate" class="form-control" value="{{ $doller_rate }}" placeholder="Dollar Rate" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="total_expense">Total Expense</label>
                                <input type="number" id="total_expense" name="total_expense" class="form-control" placeholder="Enter Total Expense" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="in_bank">In Bank</label>
                                <input type="number" name="in_bank" id="in_bank" value="" class="form-control" placeholder="Enter In Bank" step="0.01" required>
                                <input type="hidden" name="" id="off_bank" value="{{ $inbank->in_bank ?? 0 }}" class="form-control" placeholder="Enter In Bank" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="total_credit">Total Credit in PKR</label>
                                <input type="number" name="total_credit" id="total-credit-amount" class="form-control" placeholder="Enter Total Credit" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="total_credit_in_dollar">Total Credit in Dollar</label>
                                <input type="number" name="total_credit_in_dollar" id="total-credit-amount-dollar" class="form-control" placeholder="Enter Total Credit in Dollar" step="0.01" required>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="total_debit">Total Debit</label>
                                <input type="number" name="total_debit" id="total-debit-amount"  class="form-control" placeholder="Enter Total Debit" step="0.01" required>
                            </div>
                        </div>
                    </div>
                    <button onclick="updateCalculation()" class="btn btn-warning" type="button">Calculate Debit</button>

                    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                </form>
            </div>

        </div>

        

    </div>
</div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
   $(document).ready(function() {
    $('#submit').hide();

    $('#add-row').click(function() {
        // Create new row HTML
        var newRow = `
                            <hr style="color:black; background-color:black; border: 0; height: 1px;">

            <div class="row">
                
               
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="credit_name">Credit Name</label>
                        <input type="text" name="credit_name[]" class="form-control" placeholder="Enter Credit Name" >
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="credit_amount">Credit Amount</label>
                        <input type="number" name="credit_amount[]" class="form-control" placeholder="Enter Credit Amount" step="0.01" >
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="debit_name">Debit Name</label>
                        <input type="text" name="debit_name[]" class="form-control" placeholder="Enter Debit Name" >
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label for="debit_amount">Debit Amount</label>
                        <input type="number" name="debit_amount[]" class="form-control" placeholder="Enter Debit Amount" step="0.01" >
                    </div>
                </div>
            </div>
            <hr>
        `;
        console.log(newRow)
        // Append the new row to the form
        $('#dynamic-form').append(newRow);
    });
});

$(document).ready(function() {
    // Function to update the total debit amount
    function updateTotalDebit() {
        let totalDebit = 0;
       
        // Loop through each debit_amount field and sum up the values
        $('input[name="debit_amount[]"]').each(function() {
            let value = parseFloat($(this).val()) || 0; // Parse the value, if it's not a number, set it to 0
            totalDebit += value;
        });
        // Update the total-debit-amount span with the calculated sum
        $('#total-debit-amount').val(totalDebit.toFixed(2)); // To ensure two decimal places
        $('#total_expense').val(totalDebit.toFixed(2)); // To ensure two decimal places
        
       
    }

    // Call the function initially to calculate the total
    updateTotalDebit();

    // Bind the updateTotalDebit function to all input changes (debit_amount fields)
    $(document).on('input', 'input[name="debit_amount[]"]', function() {
        updateTotalDebit(); // Update total when any debit_amount input is changed
    });
});
function updateCalculation(){
    
    let totalCredit1 = parseFloat($('#total-credit-amount').val());
    let inBank = parseFloat($('#off_bank').val());  // Ensure inBank is a valid number
    totalBank = totalCredit1 + inBank; 
    $('#in_bank').val(totalBank.toFixed(2));

    // Calculate dollar amount
    let dollerrate = parseFloat($('#dollerrate').val()) || 1;  // Prevent division by zero
    let dollar = totalCredit1 / dollerrate;
    $('#total-credit-amount-dollar').val(dollar.toFixed(2)); // Corrected ID

    ////////////////////////////
    totalDebit1 = parseFloat($('#total-debit-amount').val()); // To ensure two decimal places
    let inBankd = parseFloat($('#in_bank').val()) || 0;  // Get in_bank input value

    total_bank =  inBankd - totalDebit1;  // Sum both values
    $('#in_bank').val(total_bank.toFixed(2));

   $('#submit').show();
}


$(document).ready(function() {
    // Function to update the total debit amount
    function updateTotalCredit() {
    let totalCredit = 0;
    let totalBank = 0;
    let value =0;
    // Loop through each credit_amount field and sum up the values
    $('input[name="credit_amount[]"]').each(function() {
        value = parseFloat($(this).val()) || 0; // Parse the value, if not a number, set to 0
        totalCredit += value;
    });
    $('#total-credit-amount').val(totalCredit.toFixed(2)); // Ensure two decimal places

   
}


    // Call the function initially to calculate the total
    updateTotalCredit();

    // Bind the updateTotalCredit function to all input changes (credit_amount fields)
    $(document).on('input', 'input[name="credit_amount[]"]', function() {
        updateTotalCredit(); // Update total when any credit_amount input is changed
    });
});


</script>