@extends('admin.layouts.app')
@push('styles')
@endpush
@section('container')
    <!-- Page-Title -->
    <div class="row">
        <div class="col-sm-12">
            <div class="page-title-box">
                 <div class="float-end">
                    <a href="{{ route('sale.customer_multiple_receive') }}" class="btn btn-primary">Multiple Receive</a>
                    <a href="{{ route('sale.customer_receive_details') }}" class="btn btn-danger">Customer Payment List</a>
                 </div>
                <h4 class="page-title">Customer Payment Receive Edit</h4>
            </div>
            <!--end page-title-box-->
        </div>
        <!--end col-->
    </div>
    <!-- end page title end breadcrumb -->

    <div class="row">
        @if($errors->any())
            @foreach ($errors->all() as $error)
                <div>{{ $error }}</div>
            @endforeach
        @endif
        @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 action="{{ route('sale.customer_receive.edit',['salePayment'=>$salePayment->id]) }}" method="post">
                @csrf
                <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th width="20%" class="text-center">Customer</th>
                                <th class="text-center">Due</th>
                                <th class="text-center">Amount</th>
                                <th class="text-center">Discount</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 {{ $salePayment->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">
                                        <input class="form-control client_due" readonly value="0" name="due[]">
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group row">
                                        <input required type="number" min="0"  step="any" class="form-control" value="{{ $salePayment->amount }}" name="amount[]" placeholder="Enter Amount">
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group row">
                                        <input type="number" step="any" class="form-control discount" value="{{ $salePayment->discount ?? 0 }}" name="discount[]"  placeholder="Enter Discount">
                                    </div>
                                </td>
                                <td>
                                    <div class="form-group row">
                                        <input class="form-control" value="{{ $salePayment->note }}" name="note[]" 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($salePayment->salePayments as $salePayment)
                                <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 {{ $salePayment->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">
                                            <input class="form-control client_due" readonly value="0" name="due[]">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group row">
                                            <input required type="number" min="0"  step="any" class="form-control" value="{{ $salePayment->amount }}" name="amount[]" placeholder="Enter Amount">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group row">
                                            <input type="number" step="any" class="form-control discount" value="{{ $salePayment->discount ?? 0 }}" name="discount[]"  placeholder="Enter Discount">
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-group row">
                                            <input class="form-control" value="{{ $salePayment->note }}" name="note[]" 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">Total</th>
                                <th class="text-center" id="total-due"></th>
                                <th class="text-center" id="total-amount"></th>
                                <th class="text-center" id="total-discount"></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="{{ $salePayment->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',$salePayment->pyment_type) == 1 ? 'selected'  :'' }} value="1">Cash</option>
                                    <option {{ old('payment_type',$salePayment->pyment_type) == 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',$salePayment->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',$salePayment->bank_type) == 1 ? 'selected'  :'' }} value="1">Bank Transfer</option>
                                        <option {{ old('bank_type',$salePayment->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',$salePayment->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',$salePayment->check_date) }}" autocomplete="off">
                                    @error('check_date')
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="card-footer">
                    <button class="btn btn-success">Update</button>
                </div>
            </div>
            </form>
        </div>
    </div> <!-- end row -->

@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();
            });
            $('.client').trigger('change');

            // 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);

                newRow.find(".discount").val(0);
                newRow.find(".client_due").prop('readonly', true);
                // 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