@extends('layouts.admin')
@section('title', 'New sale | Mintavia Admin')

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card card-primary">
                <div class="card-header d-flex align-items-center">
                    <h3 class="card-title">Quick Receipt (Money Received)</h3>
                </div>
                <!-- /.card-header -->

                <div class="card-body">
                    <form id="save-form" method="post" action="{{ route('admin.quick_receipt.save') }}">
                        @csrf
                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input value="{{ date('Y-m-d') }}" id="date" name="date" label="Date"
                                        placeholder="Date" type="date"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <x-admin-input class="select2" id="payment-mode" name="payment_mode"
                                        label="Payment Mode" placeholder="Payment Mode" type="select">
                                        @foreach ($paymentModes as $paymentMode)
                                            <option value="{{ $paymentMode->id }}">{{ $paymentMode->name }}</option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="payment_mode_bank">Payment Mode (Bank se hone wale):</label>
                                    <select name="payment_mode_bank" id="payment_mode_bank" class="form-control">
                                        <option value="">-- Select Payment Mode --</option>
                                        <option value="1">Cheque Received</option>
                                        <option value="2">Draft Received</option>
                                        <option value="3">Received Cash into Bank</option>
                                        <option value="4">Bank Transfer from Another Account</option>
                                        <option value="5">Credit Card Payment Received</option>
                                        <option value="6">Online Transfer</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="cheque_number" name="cheque_number" label="Cheque Number"
                                        placeholder="Cheque Number" type="text"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input value="{{ date('Y-m-d') }}" id="cheque_date" name="cheque_date"
                                        label="Cheque Date" placeholder="Date" type="date"></x-admin-input>
                                </div>
                            </div>
                        </div>
                        <hr>
                        <div class="row">
                            <div class="col-md-1">
                                <div class="form-group">
                                    <x-admin-input id="receipt_no" name="receipt_no" label="Receipt No."
                                        placeholder="Receipt No." type="number"
                                        value="{{ $voucher_no }}"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input class="select2" id="account_id" name="account_id" label="Select Account"
                                        placeholder="Select Account" type="select">
                                        @foreach ($accounts as $account)
                                            <option value="{{ $account->id }}">{{ $account->name }}</option>
                                        @endforeach
                                    </x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <x-admin-input id="balance" name="balance" label="Balance" placeholder="Balance"
                                        type="text" readonly></x-admin-input>
                                </div>
                            </div>
                            <input type="hidden" name="opBalances" value="{{ json_encode($opBalances) }}" id="opBalances">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="adjust_amount_input" name="amount" label="Enter Amount"
                                        placeholder="Enter Amount" type="number"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <x-admin-input id="discount" name="discount" label="Enter Discount"
                                        placeholder="Select Discount" type="number"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1">
                                <div class="form-group">
                                    <x-admin-input id="expenses" name="expenses" label="Enter Expenses"
                                        placeholder="Expenses" type="number"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1 align-items-center">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-block btn-sm btn-success" data-toggle="modal"
                                        data-target="#billModalNew">
                                        +
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <x-admin-input id="remark" name="remark" label="Enter Remark"
                                        placeholder="Select Remark" type="text"></x-admin-input>
                                </div>
                            </div>
                            <div class="col-md-1 align-items-center">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button class="btn btn-block btn-sm btn-info" id="save">Save</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-12">
                            <hr>
                            {!! $dataTable->table() !!}
                        </div>
                    </div>
                </div>
            </div>
            <div class="row ">
                <div class="col-3 ml-auto">
                    <div class="card">
                        <div class="card-body">
                            Total Amount
                            <hr>
                            <div class="w-100 text-right">
                                {{ $totalAmount }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card">
                        <div class="card-body">
                            Total Discount
                            <hr>
                            <div class="w-100 text-right">
                                {{ $totalDiscount }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-3">
                    <div class="card">
                        <div class="card-body">
                            Total Expenses
                            <hr>
                            <div class="w-100 text-right">
                                {{ $totalExpenses }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('models')
    <div class="modal fade" id="billModalNew" tabindex="-1" role="dialog" aria-labelledby="billModalLabelNew"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary text-white border-bottom border-3 border-primary shadow-sm">
                    <h5 class="modal-title font-weight-bold d-flex align-items-center" id="billModalLabelNew">
                        <i class="fas fa-file-invoice-dollar mr-2"></i> Adjusted This Invoice Values
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"
                        style="opacity: 1;">
                        <span aria-hidden="true" style="font-size: 1.5rem;">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row no-gutters">
                        <div class="col-md-12 px-2 pt-1">
                            <table class="table table-sm table-striped table-bordered text-center">
                                <thead class="text-center align-middle">
                                    <tr>
                                        <th style="background-color: #f8d7da;">Bill No.</th> <!-- Light Red -->
                                        <th style="background-color: #d1ecf1;">Bill Date</th> <!-- Light Blue -->
                                        <th style="background-color: #fff3cd;">Due Date</th> <!-- Light Yellow -->
                                        <th style="background-color: #d4edda;">Entry</th> <!-- Light Green -->
                                        <th style="background-color: #f0e5ff;">Dr./Cr.</th> <!-- Light Purple -->
                                        <th style="background-color: #fde2e4;">Amount</th> <!-- Light Pink -->
                                        <th style="background-color: #e2f0cb;">Adjusted</th> <!-- Light Lime -->
                                        <th style="background-color: #eeeeee;">Balance</th> <!-- Light Gray -->
                                    </tr>
                                </thead>
                                <tbody id="bill-list">
                                    <!-- JS se dynamic data insert hoga -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- ✅ Totals Section moved to modal-footer -->
                <div class="modal-footer d-flex justify-content-between align-items-center flex-wrap">
                    <!-- 🔹 Total -->
                    <div class="badge bg-primary px-4 py-2 m-1" style="min-width: 180px; font-size: 16px;">
                        <strong>Total:</strong> ₹ <span id="total-amount">0.00</span>
                    </div>

                    <!-- 🔸 Adjusted -->
                    <div class="badge bg-success px-4 py-2 m-1" style="min-width: 180px; font-size: 16px;">
                        <strong>Adjusted:</strong> ₹ <span id="total-adjusted">0.00</span>
                    </div>

                    <!-- 🔻 Difference -->
                    <div class="badge bg-danger px-4 py-2 m-1" style="min-width: 180px; font-size: 16px;">
                        <strong>Difference:</strong> ₹ <span id="adjustment-difference">0.00</span>
                    </div>

                    <!-- 🔘 Close Button -->
                    <button type="button" class="btn btn-secondary m-1" data-dismiss="modal">Continue</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    {{ $dataTable->scripts() }}
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.1.0-beta.1/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    @if (session('quick_payment_saved') && session('voucher_id'))
        <script>
            $(document).ready(function() {
                Swal.fire({
                    title: 'Do you want to print the payment Recipt?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No',
                }).then((result) => {
                    if (result.isConfirmed) {
                        showPaymentReceipt();
                    }
                });
            });

            function showPaymentReceipt() {
                Swal.fire({
                    title: 'Select Payment Receipt Option',
                    html: `<div style="margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;">
                                <button onclick="handleAction('preview')" class="swal2-confirm swal2-styled">👁️ Preview</button>
                                <button onclick="handleAction('print')" class="swal2-confirm swal2-styled">🖨️ Print</button>
                                <button onclick="handleAction('email')" class="swal2-confirm swal2-styled">📧 Email</button>
                                <button onclick="handleAction('whatsapp')" class="swal2-confirm swal2-styled">🟢 WhatsApp</button>
                            </div>`,
                    showConfirmButton: false,
                    showCancelButton: true,
                    cancelButtonText: "Close"
                });
            }

            function handleAction(action) {
                const voucherId = "{{ session('voucher_id', 202) }}";

                let AjaxDtata = {
                    "action": action,
                    "voucher_id": voucherId,
                    "email": ""
                }

                if (action === 'email') {
                    handleEmailAction(action, AjaxDtata);
                } else if (action === 'preview') {
                    CallActionAjax(AjaxDtata);
                } else if (action === 'preview') {
                    CallActionAjax(AjaxDtata);
                } else if (action === 'print') {
                    CallActionAjax(AjaxDtata);
                } else if (action === 'whatsapp') {
                    handleWhatsAppAction(AjaxDtata);
                } else if (action === 'excel') {
                    handleExcelAction(AjaxDtata);
                } else {
                    CallActionAjax(AjaxDtata);
                }
            }

            // function handleActionBydatatable(action, voucherId) {
            //     let AjaxDtata = {
            //         "action": action,
            //         "voucher_id": voucherId,
            //         "email": ""
            //     }
            //     CallActionAjax(AjaxDtata);
            // }



            function handleEmailAction(action, AjaxDtata) {
                const customerEmail = "{{ session('customer_gmail_address') }}";

                AjaxDtata['email'] = customerEmail;
                AjaxDtata['action'] = action;
                AjaxDtata['voucher_id'] = voucherId;
            }

            function handleEmailAction(action, AjaxDtata) {
                const customerEmail = "{{ session('customer_gmail_address') }}";

                AjaxDtata['email'] = customerEmail;
                if (!customerEmail) {
                    Swal.fire({
                        title: 'Enter Email Address',
                        input: 'email',
                        inputLabel: 'Customer Email',
                        inputPlaceholder: 'example@gmail.com',
                        showCancelButton: true,
                        confirmButtonText: 'Send Email',
                    }).then((result) => {
                        if (result.isConfirmed && result.value) {
                            AjaxDtata['email'] = result.value;
                            CallActionAjax(AjaxDtata);
                        }
                    });
                } else {
                    CallActionAjax(AjaxDtata);
                }

            }

            function handleWhatsAppAction(AjaxDtata) {
                var number = "{{ session('customer_mobile_no') }}";
                if (number) {
                    number = '91' + number;
                    AjaxDtata['number'] = number;
                    CallActionAjax(AjaxDtata);
                    return true;
                }
                Swal.fire({
                    title: 'WhatsApp Number Missing',
                    text: 'Enter number to send invoice via WhatsApp',
                    input: 'text',
                    inputLabel: 'Enter WhatsApp Number',
                    inputPlaceholder: 'e.g. 91XXXXXXXXXX',
                    showCancelButton: true,
                    confirmButtonText: 'Send',
                    cancelButtonText: 'Cancel',
                    inputValidator: (value) => {
                        if (!value || value.length < 10) {
                            return 'Please enter a valid number';
                        }
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        let number = result.value.replace(/\D/g, '');
                        if (number.length === 10) {
                            number = '91' + number;
                        }
                        AjaxDtata['number'] = number;
                        CallActionAjax(AjaxDtata);
                    }
                });
            }
        </script>
    @endif
    <script>
        $(document).on('click', '.print-preview-actions', function() {
            console.log("Clicked print-preview-actions");

            const action = $(this).attr('action');
            const voucherId = $(this).attr('voucherId');

            let AjaxDtata = {
                "action": action,
                "voucher_id": voucherId,
                "email": ""
            }
            CallActionAjax(AjaxDtata);
        });


        function CallActionAjax(data) {
            $.ajax({
                url: "{{ route('admin.quick-payment-receipt-pdf-email') }}",
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                type: "POST",
                data: data,
                success: function(response) {
                    if (response.status === 'success') {
                        if (data.action === 'preview' || data.action === 'print') {
                            Swal.fire({
                                title: 'Success',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK',
                                didClose: () => {
                                    window.open(response.data.invoice_url, '_blank');
                                }
                            });
                        } else if (data.action === 'email') {
                            Swal.fire({
                                title: 'Success',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            });
                        } else if (data.action === 'whatsapp') {
                            Swal.fire({
                                title: 'Success',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK',
                                didClose: () => {
                                    window.open(response.data.whatsapp_url, '_blank');
                                }
                            });
                        } else {
                            Swal.fire({
                                title: 'Success',
                                text: response.message,
                                icon: 'success',
                                confirmButtonText: 'OK'
                            });
                        }
                    } else {
                        Swal.fire({
                            title: 'Error',
                            text: response.message,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });

        }
    </script>

    <script>
        // 🔁 Constants for Entry and DrCr display
        const DRCR = {
            1: 'Dr.',
            2: 'Cr.'
        };
        const ENTRY = {
            1: 'Sale',
            2: 'Sale Return',
            3: 'Purchase',
            4: 'Purchase Return',
            5: 'Debit.Note',
            6: 'Credit.Note',
            7: 'Quick Payment',
            8: 'Quick Receipt',
            9: 'Debit-Note',
            10: 'Credit-Note'
        };

        // 🔁 All op balances grouped by account_id (from Laravel controller)
        const allOpBalances = @json($opBalances);

        // ✅ Function to render table when account is selected
        function renderTableRows(accountId) {
            const rows = allOpBalances[accountId] || [];
            const tableBody = $('#bill-list');
            tableBody.empty();

            rows.forEach((item, index) => {
                const drcrText = DRCR[item.drcr] || '';
                const entryText = ENTRY[item.entry] || '';
                const balance = parseFloat(item.amount - item.adjusted_amount).toFixed(2);

                const row = `
                    <tr data-amount="${item.amount}" data-drcr="${drcrText}" index-value="${index}">
                        <td>${item.bill_no || ''}</td>
                        <td>${item.billDate || ''}</td>
                        <td>${item.dueDate || ''}</td>
                        <td>${entryText}</td>
                        <td>${drcrText}</td>
                        <td class="original-amount">${parseFloat(item.amount).toFixed(2)}</td>
                        <td>
                            <input type="number" 
                                class="form-control form-control-sm adjusted-amount-input" style="width: 120px; font-size: 16px; font-weight: 600;" 
                                value="${parseFloat(item.adjusted_amount || 0).toFixed(2)}" 
                                min="0" step="0.01" data-original="${parseFloat(item.adjusted_amount || 0).toFixed(2)}" index-value="${index}"/>
                        </td>
                        <td class="balance-amount">${balance}</td> <!-- 🆕 New column -->
                    </tr>
                    `;

                tableBody.append(row);
            });

            // Trigger initial auto distribution
            $('#adjust_amount_input').trigger('input');
        }

        // ✅ On account selection — fill table
        $(document).on('change', '#account_id', function() {
            renderTableRows($(this).val());
            $('#adjust_amount_input').val('');
        });

        // ✅ Auto distribute input amount across rows (only if not manually changed)
        $(document).on('input', '#adjust_amount_input', function() {
            const inputVal = parseFloat($(this).val()) || 0;
            let remaining = inputVal;

            $('#bill-list tr').each(function() {
                const $row = $(this);
                const amount = parseFloat($row.find('.original-amount').text()) || 0;
                const $input = $row.find('.adjusted-amount-input');

                // Only auto-fill if not manually touched
                if (!$input.data('touched')) {
                    let adjust = 0;
                    if (remaining > 0) {
                        if (amount <= remaining) {
                            adjust = amount;
                            remaining -= amount;
                        } else {
                            adjust = remaining;
                            remaining = 0;
                        }
                    }
                    $input.val(adjust.toFixed(2));
                    $input.attr('data-original', adjust.toFixed(2));
                }
            });

            calculateTotals();
        });

        // ✅ Mark input as manually touched on change
        $(document).on('input', '.adjusted-amount-input', function() {
            $(this).data('touched', true);
            calculateTotals();
        });

        // ✅ Final calculation function
        function calculateTotals() {
            let totalAmount = 0;
            let totalAdjusted = 0;
            let totalDr = 0;
            let totalCr = 0;
            let account_id = $("#account_id").val();
            $('#bill-list tr').each(function() {
                const $row = $(this);

                let adjusted_row = allOpBalances[account_id][$row.attr('index-value')];
                const amount = parseFloat($row.find('.original-amount').text()) || 0;
                const adjusted = parseFloat($row.find('.adjusted-amount-input').val()) || 0;
                const drcr = $row.data('drcr');

                // 🆕 Update balance column
                const balance = amount - adjusted;
                $row.find('.balance-amount').text(balance.toFixed(2));

                totalAmount += amount;
                totalAdjusted += adjusted;

                if (drcr === 'Dr.') {
                    totalDr += adjusted;
                } else if (drcr === 'Cr.') {
                    totalCr += adjusted;
                }

                adjusted_row['adjusted_amount'] = adjusted;
                allOpBalances[account_id][$row.attr('index-value')] = adjusted_row;
            });

            console.log("allOpBalances ==== > ", allOpBalances);

            $("#opBalances").val(JSON.stringify(allOpBalances))
            $('#total-amount').text(totalAmount.toFixed(2));
            $('#total-adjusted').text(totalAdjusted.toFixed(2));
            $('#adjustment-difference').text((totalAmount - totalAdjusted).toFixed(2));

            // Optional: Dr - Cr Difference (if you want to show)
            let diff = totalDr - totalCr;
            let diffText = '';

            if (diff > 0) {
                diffText = `${diff.toFixed(2)} (Dr.)`;
            } else if (diff < 0) {
                diffText = `${Math.abs(diff).toFixed(2)} (Cr.)`;
            } else {
                diffText = `0.00`;
            }

            $('#drcr-diff').text(diffText);
        }
    </script>
    <script>
        $(document).ready(function() {
            $('.select2').select2();

            // Focus cursor in search input when dropdown opens
            $(document).on('select2:open', () => {
                setTimeout(() => {
                    document.querySelector('.select2-container--open .select2-search__field')
                        .focus();
                }, 0);
            });
        });
        $(document).ready(function() {
            $('#account_id').change(function() {
                let accountId = $(this).val();

                if (accountId) {
                    $.ajax({
                        url: '{{ route('admin.account-balance', ':id') }}'.replace(':id',
                            accountId),
                        type: 'GET',
                        success: function(response) {
                            console.log("Balance response:", response); // 👈 Check this

                            // Format: 1500 Dr
                            let displayBalance = response.balance;

                            if (response.type) {
                                displayBalance += ' ' + response.type;
                            }

                            $('#balance').val(displayBalance);
                        },
                        error: function() {
                            $('#balance').val('0');
                        }
                    });
                } else {
                    $('#balance').val('0');
                }
            });
        });
    </script>
@endsection