@extends('admin.layouts.app')
@push('styles')

@endpush
@section('container')
    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                <h4 class="page-title">Customer Expense Edit</h4>
            </div>
            <!--end page-title-box-->
        </div>
        <!--end col-->
    </div>
    <!-- end page title end breadcrumb -->

    <div class="row">
        @if (session('success'))
            <div class="alert alert-info">
                {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif
    </div>
    <div class="row">
        <div class="col-md-12">
            <form id="modal-payment-form" method="post" action="{{ route('sale.customer_expense.update',['transactionLog'=>$transactionLog->id]) }}" enctype="multipart/form-data" name="modal-form">
            @csrf
            <div class="card">

                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th width="20%" class="text-center">Customer</th>
                            <th class="text-center">Expense Type</th>
                            <th class="text-center">Amount</th>
                            <th class="text-center">Notes</th>
                            <th class="text-center">Action</th>
                        </tr>
                        </thead>
                        <tbody>

                           <tr>
                            <td>
                                <div class="form-group row">
                                    <select required name="client[]" class="form-control client select2">
                                        <option value="">Select One</option>
                                        @foreach ($clients as $client)
                                            <option {{ $transactionLog->client_id == $client->id ? 'selected'  : '' }} data-due="{{ $client->due }}" value="{{ $client->id }}">
                                                {{ $client->name }} - Due: {{ $client->due }} - Address: {{ $client->address }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </td>
                            <td>
                                <div class="form-group row">
                                    <select required class="form-control expense_type" name="expense_type[]">
                                        <option value="1" {{ $transactionLog->expense_type == '1' ? 'selected'  :'' }}>Regular Expense</option>
                                        <option value="2" {{ $transactionLog->expense_type == '2' ? 'selected'  :'' }}>Product Expense</option>
                                    </select>
                                </div>
                            </td>

                            <td>
                                <div class="form-group row">
                                    <input required type="number" min="1"  step="any" class="form-control" value="{{ $transactionLog->amount }}" name="amount[]" placeholder="Enter Amount">
                                </div>
                            </td>
                            <td>
                                <div class="form-group row">
                                    <input class="form-control" value="{{ $transactionLog->notes }}" name="notes[]" placeholder="Enter Note">
                                </div>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash"></i></button>
                            </td>
                        </tr>
                            @foreach($transactionLog->transactionLogs as $transactionLog)
                                <tr>
                                    <td>
                                        <div class="form-group row">
                                            <select required name="client[]" class="form-control client select2">
                                                <option value="">Select One</option>
                                                @foreach ($clients as $client)
                                                    <option {{ $transactionLog->client_id == $client->id ? 'selected'  : '' }} data-due="{{ $client->due }}" value="{{ $client->id }}">
                                                        {{ $client->name }} - Due: {{ $client->due }} - Address: {{ $client->address }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group row">
                                            <select required class="form-control expense_type" name="expense_type[]">
                                                <option value="1" {{ $transactionLog->expense_type == '1' ? 'selected'  :'' }}>Regular Expense</option>
                                                <option value="2" {{ $transactionLog->expense_type == '2' ? 'selected'  :'' }}>Product Expense</option>
                                            </select>
                                        </div>
                                    </td>

                                    <td>
                                        <div class="form-group row">
                                            <input required type="number" min="1"  step="any" class="form-control" value="{{ $transactionLog->amount }}" name="amount[]" placeholder="Enter Amount">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group row">
                                            <input class="form-control" value="{{ $transactionLog->notes }}" name="notes[]" placeholder="Enter Note">
                                        </div>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger remove-row"><i class="fa fa-trash"></i></button>
                                    </td>
                                </tr>
                            @endforeach


                        </tbody>
                        <tfoot>
                        <tr>
                            <th class="text-center" colspan="2">Total</th>
                            <th class="text-center" id="total-amount"></th>
                            <th colspan="2"></th>
                        </tr>
                        <tr>
                            <th colspan="6"><button type="button" id="add-more" class="btn btn-success"><i class="fa fa-plus"></i></button></th>
                        </tr>
                        </tfoot>
                    </table>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label for="date">Date</label>
                            <input required type="date" class="form-control pull-right"  name="date" value="{{ $transactionLog->date }}" autocomplete="off">
                            @error('date')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group mb-2">
                            <label for="payment_type">Payment Type</label>
                            <select class="form-control modal-pay-type" name="payment_type">
                                <option {{ old('payment_type',$transactionLog->transaction_method) == 1 ? 'selected'  :'' }} value="1">Cash</option>
                                <option {{ old('payment_type',$transactionLog->transaction_method) == 2 ? 'selected'  :'' }} value="2">Bank</option>
                            </select>
                            @error('payment_type')
                            <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div  class="modal-bank-info">
                            <div class="form-group mb-2">
                                <label for="bank">Bank</label>
                                <select class="form-control  modal-bank select2" name="bank">
                                    <option value="">Select Bank</option>
                                    @foreach($banks as $bank)
                                        <option {{ old('bank',$transactionLog->bank_id) == $bank->id ? 'selected'  :'' }} value="{{ $bank->id }}">{{ $bank->bank_name }}</option>
                                    @endforeach
                                </select>
                                @error('bank')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div  class="modal-bank-info">
                            <div class="form-group mb-2">
                                <label for="payment_type">Bank Type</label>
                                <select class="form-control  modal_bank_type" name="bank_type">
                                    <option {{ old('bank_type',$transactionLog->bank_type) == 1 ? 'selected'  :'' }} value="1">Bank Transfer</option>
                                    <option {{ old('bank_type',$transactionLog->bank_type) == 2 ? 'selected'  :'' }} value="2">Cheque</option>
                                </select>
                                @error('bank_type')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div  class="modal-bank-info">
                            <div class="form-group mb-2 bank_check_area">
                                <label for="cheque_no">Cheque No.</label>
                                <input class="form-control" value="{{ old('cheque_no',$transactionLog->cheque_no) }}" type="text" name="cheque_no" placeholder="Enter Cheque No.">
                                @error('cheque_no')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div  class="modal-bank-info">
                            <div class="form-group mb-2 bank_check_area">
                                <label>Cheque Date</label>
                                <input type="date" class="form-control pull-right" name="check_date" value="{{ old('check_date',$transactionLog->check_date) }}" autocomplete="off">
                                @error('check_date')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>

                </div>

                <div class="card-footer">
                    <div class="modal-footer">
                        <button  class="btn btn-sm btn-primary" id="modal-btn-payment">Update</button>
                    </div>
                </div>
                <!--end card-body-->
            </div>
            </form>
        </div>
    </div>

@endsection


@push('scripts')

    <script>
        $(document).ready(function () {
            function updateTotals() {
                let totalDue = 0;
                let totalAmount = 0;
                let totalDiscount = 0;

                $(".client_due").each(function () {
                    totalDue += parseFloat($(this).val()) || 0;
                });

                $("input[name='amount[]']").each(function () {
                    totalAmount += parseFloat($(this).val()) || 0;
                });

                $("input[name='discount[]']").each(function () {
                    totalDiscount += parseFloat($(this).val()) || 0;
                });

                $("#total-due").text(totalDue.toFixed(2));
                $("#total-amount").text(totalAmount.toFixed(2));
                $("#total-discount").text(totalDiscount.toFixed(2));
            }

            // Event Listeners for Input Changes
            $("body").on("input", "input[name='amount[]'], input[name='discount[]'], .client_due", function () {
                updateTotals();
            });

            // Client Selection to Set Due Amount
            $("body").on("change", ".client", function () {
                let row = $(this).closest("tr");
                let dueAmount = $(this).find("option:selected").data("due") || 0;
                row.find(".client_due").val(dueAmount);
                updateTotals();
            });

            // Add More Rows
            $("#add-more").click(function () {
                let newRow = $("tbody tr:first").clone();

                // Reset all input fields
                newRow.find("input").val("").prop("readonly", false);
                newRow.find(".client_due").val("0");

                // Reset selects
                newRow.find("select").prop("selectedIndex", 0);

                // Remove select2 styling and reinitialize it
                newRow.find(".select2").removeClass("select2-hidden-accessible").removeAttr("data-select2-id").removeAttr("aria-hidden");
                newRow.find(".select2-container").remove();
                newRow.find(".client").show(); // Ensure select is visible before reinitializing Select2

                $("tbody").append(newRow);
                // Reinitialize Select2
                $(".client").select2();

                updateTotals();
            });

            // Remove Row
            $("body").on("click", ".remove-row", function () {
                if ($("tbody tr").length > 1) {
                    $(this).closest("tr").remove();
                }
                updateTotals();
            });

            // Initialize Totals
            updateTotals();

            $(".modal-bank-info").hide();
            $(".bank_check_area").hide();
            // Payment Type Change Event
            $("body").on("change", ".modal-pay-type", function () {
                if ($(this).val() == '1' || $(this).val() == '4' || $(this).val() == '5') {
                    $(".modal-bank-info").hide();
                } else {
                    $(".modal-bank-info").show();
                }
            });

            // Trigger Change on Page Load
            $(".modal-pay-type").trigger("change");

            // Bank Type Change Event
            $("body").on("change", ".modal_bank_type", function () {
                if ($(this).val() == '1') {
                    $(".bank_check_area").hide();
                } else {
                    $(".bank_check_area").show();
                }
            });

            // Trigger Change on Page Load
            $(".modal_bank_type").trigger("change");
        });
        document.querySelectorAll('.default-select').forEach(function(element) {
            new Selectr(element);
        });

    </script>
@endpush