@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/payment-voucher-create.css') }}">
@endpush

@section('content')
    <div class="pv-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb">
            <span>Payment Voucher</span>
            <span>Add Payment Voucher</span>
        </div>

        <div class="pv-page-header">
            <div class="pv-header-title">
                <div class="pv-header-icon">
                    <i class="fa-solid fa-file-invoice-dollar"></i>
                </div>
                <div class="pv-header-text">
                    <h2>Add New Payment Voucher</h2>
                    <div class="pv-subtitle">
                        <span>Record outgoing payments, supplier settlements, and bank disbursements</span>
                        <span class="pv-urdu">نیا ادائیگی واؤچر درج کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('payment.list') }}" class="pv-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to Payment Vouchers
            </a>
        </div>

        <!-- Main Form Card -->
        <div class="pv-main-card">
            <form id="myForm" method="post" action="{{ route('payment_voucher.store') }}">
                @csrf

                <!-- Error Messages -->
                @if (isset($errors) && count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger fade show mb-2" role="alert">
                                <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ $error }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- SECTION 1: Voucher & Payment Configuration -->
                <div class="pv-section-header">
                    <h6 class="pv-section-title">
                        <i class="fa-solid fa-sliders"></i> Voucher Configuration & Cheque Details
                        <span class="pv-urdu" style="margin-left: auto;">واؤچر اور ادائیگی کی تفصیلات</span>
                    </h6>
                </div>

                <div class="pv-section-body">
                    <div class="row">
                        <!-- Left Panel: Voucher Information -->
                        <div class="col-lg-6 col-12 pv-panel-border">
                            <div class="pv-panel-title">
                                <i class="fa-solid fa-receipt"></i> Voucher Basic Information
                            </div>

                            <!-- Voucher Date -->
                            <div class="pv-field-group">
                                <label class="pv-label" for="voucher_date">
                                    <span>Payment Voucher Date <span class="text-danger">*</span></span>
                                    <span class="label-urdu">تاریخ واؤچر</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-days pv-input-icon"></i>
                                    <input type="text" id="voucher_date" name="voucher_date" class="pv-input"
                                        placeholder="YYYY-MM-DD" readonly required />
                                </div>
                            </div>

                            <!-- Payment Mode Switch -->
                            <div class="pv-field-group">
                                <label class="pv-label">
                                    <span>Payment Mode <span class="text-danger">*</span></span>
                                    <span class="label-urdu">طریقہ ادائیگی</span>
                                </label>
                                <div class="pv-mode-switch">
                                    <label class="pv-mode-option" for="cash">
                                        <input type="radio" id="cash" name="payment_mode" value="cash" checked required>
                                        <span class="pv-mode-label">
                                            <i class="fa-solid fa-money-bill-wave"></i> Cash (کیش)
                                        </span>
                                    </label>
                                    <label class="pv-mode-option" for="bank">
                                        <input type="radio" id="bank" name="payment_mode" value="bank" required>
                                        <span class="pv-mode-label">
                                            <i class="fa-solid fa-building-columns"></i> Bank (بینک)
                                        </span>
                                    </label>
                                </div>
                            </div>

                            <!-- Payment Source Account -->
                            <div class="pv-field-group">
                                <label class="pv-label" for="account_select">
                                    <span>Payment Source Account <span class="text-danger">*</span></span>
                                    <span class="label-urdu">ادائیگی کھاتہ</span>
                                </label>
                                <select id="account_select" name="account" class="form-control select2" required>
                                    <option value="">- Select Account -</option>
                                    @if(isset($accounts) && count($accounts) > 0)
                                        @foreach($accounts as $acc)
                                            <option value="{{ $acc->account_number ?? $acc->id }}">
                                                {{ $acc->account_title ?? $acc->name }} ({{ $acc->account_type ?? 'Account' }})
                                            </option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>

                            <!-- Voucher Details / Remarks -->
                            <div class="pv-field-group mb-0">
                                <label class="pv-label" for="voucher_details">
                                    <span>Voucher Details / Remarks</span>
                                    <span class="label-urdu">تفصیلات / ریمارکس</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-regular fa-comment-dots pv-input-icon"></i>
                                    <input type="text" id="voucher_details" name="voucher_details" class="pv-input"
                                        placeholder="Enter payment remarks or notes" />
                                </div>
                            </div>
                        </div>

                        <!-- Right Panel: Cheque Details -->
                        <div class="col-lg-6 col-12">
                            <div class="pv-panel-title">
                                <i class="fa-solid fa-money-check"></i> Cheque / Bank Clearing Details
                            </div>

                            <!-- Cheque No -->
                            <div class="pv-field-group">
                                <label class="pv-label" for="voucher_chqno">
                                    <span>Cheque No.</span>
                                    <span class="label-urdu">چیک نمبر</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-solid fa-hashtag pv-input-icon"></i>
                                    <input type="text" id="voucher_chqno" name="voucher_chqno"
                                        class="pv-input cheque-field" placeholder="e.g. CHQ-849102" />
                                </div>
                            </div>

                            <!-- Cheque Date -->
                            <div class="pv-field-group">
                                <label class="pv-label" for="voucher_chqdate">
                                    <span>Cheque Date</span>
                                    <span class="label-urdu">تاریخ چیک</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar pv-input-icon"></i>
                                    <input type="text" id="voucher_chqdate" name="voucher_chqdate"
                                        class="pv-input cheque-field" placeholder="YYYY-MM-DD" readonly />
                                </div>
                            </div>

                            <!-- Deposit Date -->
                            <div class="pv-field-group">
                                <label class="pv-label" for="voucher_depdate">
                                    <span>Deposit / Clearance Date</span>
                                    <span class="label-urdu">تاریخ جمع</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-check pv-input-icon"></i>
                                    <input type="text" id="voucher_depdate" name="voucher_depdate"
                                        class="pv-input cheque-field" placeholder="YYYY-MM-DD" readonly />
                                </div>
                            </div>

                            <!-- Deposit Slip No -->
                            <div class="pv-field-group mb-0">
                                <label class="pv-label" for="voucher_depslipno">
                                    <span>Deposit Slip No.</span>
                                    <span class="label-urdu">ڈپازٹ سلپ نمبر</span>
                                </label>
                                <div class="pv-input-icon-wrap">
                                    <i class="fa-solid fa-receipt pv-input-icon"></i>
                                    <input type="text" id="voucher_depslipno" name="voucher_depslipno"
                                        class="pv-input cheque-field" placeholder="e.g. SLIP-49021" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Payment Entries Table -->
                <div class="pv-section-header">
                    <h6 class="pv-section-title">
                        <i class="fa-solid fa-table-list"></i> Payment Entries Details
                        <span class="pv-urdu" style="margin-left: auto;">ادائیگی کھاتہ اور رقم کی تفصیلات</span>
                    </h6>
                </div>

                <div class="pv-section-body">
                    <div class="pv-table-card">
                        <div class="table-responsive">
                            <table id="example2" class="table pv-table align-middle">
                                <thead>
                                    <tr>
                                        <th style="min-width: 280px;">
                                            <span>Party / Khata (جمع کھاتہ)</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="min-width: 200px;">
                                            <span>Description (تفصیل)</span>
                                        </th>
                                        <th style="min-width: 140px;" class="text-end">
                                            <span>Debit (رقم ڈیبٹ)</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="min-width: 140px;" class="text-end">
                                            <span>Credit (رقم کریڈٹ)</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="min-width: 160px;">
                                            <span>Employee (ملازم)</span>
                                        </th>
                                        <th class="text-center" style="width: 70px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="itemsTableBody">
                                    <tr>
                                        <td>
                                            <select name="items[0][adaegi_khata]" class="form-control vendor-select" style="width: 100%;" required>
                                                <option value="">- Search Supplier / Customer / Purchaser -</option>
                                            </select>
                                            <input type="hidden" name="items[0][party_type]" class="party-type-hidden" value="supplier">
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][description]" class="form-control item-description" placeholder="Payment description">
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][debit_amount]" value="0"
                                                class="form-control debit-amount font-weight-bold text-end"
                                                placeholder="0.00" required>
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][credit_amount]" value="0"
                                                class="form-control credit-amount font-weight-bold text-end"
                                                placeholder="0.00" required>
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][employee]" class="form-control item-employee" placeholder="Employee Name">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="pv-btn-remove remove-row" style="display: none;" title="Remove row">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th class="text-end">Total:</th>
                                        <th></th>
                                        <th>
                                            <input type="text" id="grandTotalDebit" class="form-control text-end font-weight-bold" readonly value="0.00">
                                        </th>
                                        <th>
                                            <input type="text" id="grandTotalCredit" class="form-control text-end font-weight-bold" readonly value="0.00">
                                        </th>
                                        <th colspan="2"></th>
                                    </tr>
                                    <tr>
                                        <th class="text-end">Net Amount:</th>
                                        <th></th>
                                        <th colspan="2">
                                            <input type="text" id="netAmount" class="form-control text-end font-weight-bold" readonly value="0.00" style="color: #00879c; font-size: 15px;">
                                        </th>
                                        <th colspan="2"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <!-- Add Row & Live Totals -->
                        <div class="p-3 bg-light border-top">
                            <button type="button" id="addRowBtn" class="pv-btn-add-row">
                                <i class="fa-solid fa-plus-circle"></i> Add Payment Entry Row
                            </button>

                            <div class="pv-totals-grid">
                                <div class="pv-total-card">
                                    <div class="label">
                                        <i class="fa-solid fa-arrow-down text-primary"></i> Total Debit (رقم ڈیبٹ)
                                    </div>
                                    <div class="value" id="cardGrandDebit">0.00</div>
                                </div>
                                <div class="pv-total-card">
                                    <div class="label">
                                        <i class="fa-solid fa-arrow-up text-danger"></i> Total Credit (رقم کریڈٹ)
                                    </div>
                                    <div class="value" id="cardGrandCredit">0.00</div>
                                </div>
                                <div class="pv-total-card net">
                                    <div class="label">
                                        <i class="fa-solid fa-calculator"></i> Net Amount (خالص رقم)
                                    </div>
                                    <div class="value" id="cardNetAmount">0.00</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: Action Footer -->
                <div class="pv-form-footer">
                    <div>
                        <span class="text-muted small">Please verify all accounts, party selections, and amounts before submitting.</span>
                    </div>
                    <div class="pv-footer-actions">
                        <a href="{{ route('payment.list') }}" class="pv-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="pv-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Save Payment Voucher
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Error Notification Alert -->
    <div id="errorNotification" class="alert alert-danger position-fixed top-0 end-0 m-3 shadow" style="display: none; z-index: 99999;">
        <strong><i class="fa-solid fa-circle-exclamation"></i> Error!</strong> <span id="errorMessage">Empty Field(s) Found.</span>
    </div>
@endsection

@push('scripts')
    <script>
        // Keyboard handler
        document.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                e.preventDefault();
                const form = document.getElementById('myForm');
                if (form) form.submit();
            }

            if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                e.preventDefault();
                return false;
            }
        });

        // Initialize Select2 for multi-party search (Supplier, Customer, Purchaser)
        function initCustomerSelect(selector) {
            $(selector).select2({
                placeholder: 'Search Supplier / Customer / Purchaser',
                minimumInputLength: 0,
                ajax: {
                    url: '{{ url('get-party-data') }}',
                    dataType: 'json',
                    delay: 250,
                    data: params => ({ query: params.term || '' }),
                    processResults: data => ({ results: data })
                },
                templateResult: function(item) {
                    if (!item.id) return item.text;
                    return $('<span>' + item.text + '</span>');
                }
            })
            .on('select2:open', function() {
                $('.select2-search__field').trigger('input');
            })
            .on('select2:select', function(e) {
                const partyType = e.params.data.party_type || 'supplier';
                const row = $(this).closest('tr');
                row.find('.party-type-hidden').val(partyType);
            });
        }

        // Toggle Cheque Fields based on Payment Mode
        function toggleChequeFields() {
            const selectedMode = $('input[name="payment_mode"]:checked').val();
            const isBank = (selectedMode === 'bank');

            $('.cheque-field').each(function() {
                $(this).prop('disabled', !isBank);
            });

            if (!isBank) {
                $('#voucher_chqno').val('');
                $('#voucher_depslipno').val('');
            } else {
                const today = new Date();
                const formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);
                if (!$('#voucher_chqdate').val()) $('#voucher_chqdate').val(formattedDate);
                if (!$('#voucher_depdate').val()) $('#voucher_depdate').val(formattedDate);
            }
        }

        // Update Account dropdown according to payment method
        function updateAccountDropdown(paymentMethod) {
            $.ajax({
                url: '{{ route('get-transaction-accounts') }}',
                type: 'GET',
                data: {
                    type: paymentMethod
                },
                dataType: 'json',
                success: function(data) {
                    const $accountSelect = $('#account_select');
                    $accountSelect.empty();
                    $accountSelect.append('<option value="">- Select Account -</option>');

                    $.each(data, function(key, value) {
                        $accountSelect.append('<option value="' + key + '">' + key + ' | ' + value + '</option>');
                    });

                    $accountSelect.trigger('change.select2');
                },
                error: function(xhr, status, error) {
                    console.error("An error occurred: " + xhr.responseText);
                }
            });
        }

        // Reindex rows to ensure zero validation errors
        function reindexRows() {
            const rows = $('#itemsTableBody tr');
            rows.each(function(index) {
                $(this).find('.vendor-select').attr('name', `items[${index}][adaegi_khata]`);
                $(this).find('.party-type-hidden').attr('name', `items[${index}][party_type]`);
                $(this).find('.item-description').attr('name', `items[${index}][description]`);
                $(this).find('.debit-amount').attr('name', `items[${index}][debit_amount]`);
                $(this).find('.credit-amount').attr('name', `items[${index}][credit_amount]`);
                $(this).find('.item-employee').attr('name', `items[${index}][employee]`);

                if (rows.length === 1) {
                    $(this).find('.remove-row').hide();
                } else {
                    $(this).find('.remove-row').show();
                }
            });
        }

        // Formatting utilities
        function formatNumberWithCommas(x) {
            const parts = x.toString().replace(/,/g, '').split('.');
            parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            return parts.join('.');
        }

        function stripCommas(value) {
            if (!value) return '';
            return value.toString().replace(/,/g, '');
        }

        function parseNumber(value) {
            if (!value) return 0;
            return parseFloat(value.toString().replace(/,/g, '')) || 0;
        }

        function formatDisplay(num) {
            return num.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        // Calculation functions
        function calculateDebitGrandTotal() {
            let total = 0;
            $('.debit-amount').each(function() {
                total += parseNumber($(this).val());
            });
            $('#grandTotalDebit').val(formatDisplay(total));
            $('#cardGrandDebit').text(formatDisplay(total));
            calculateNetAmount();
        }

        function calculateCreditGrandTotal() {
            let total = 0;
            $('.credit-amount').each(function() {
                total += parseNumber($(this).val());
            });
            $('#grandTotalCredit').val(formatDisplay(total));
            $('#cardGrandCredit').text(formatDisplay(total));
            calculateNetAmount();
        }

        function calculateNetAmount() {
            const debit = parseNumber($('#grandTotalDebit').val() || '0');
            const credit = parseNumber($('#grandTotalCredit').val() || '0');
            const net = debit - credit;
            $('#netAmount').val(formatDisplay(net));
            $('#cardNetAmount').text(formatDisplay(net));
        }

        // Amount input formatters
        function bindAmountFormatters() {
            $('.credit-amount, .debit-amount').off('blur').on('blur', function() {
                const numeric = stripCommas(this.value);
                if (numeric !== '' && !isNaN(numeric)) {
                    this.value = formatNumberWithCommas(numeric);
                }
            });
        }

        $(document).ready(function() {
            // Initialize Select2 on account select
            $('#account_select').select2({
                placeholder: '- Select Account -'
            });

            // Initialize multi-party search on initial row
            initCustomerSelect('.vendor-select');

            // Setup Dates
            const today = new Date();
            const formattedDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

            if (!$('#voucher_date').val()) $('#voucher_date').val(formattedDate);
            if (!$('#voucher_chqdate').val()) $('#voucher_chqdate').val(formattedDate);
            if (!$('#voucher_depdate').val()) $('#voucher_depdate').val(formattedDate);

            $("#voucher_date, #voucher_chqdate, #voucher_depdate").datepicker({
                dateFormat: "yy-mm-dd"
            });

            // Initial cheque toggle & account list fetch
            toggleChequeFields();
            const initialMode = $('input[name="payment_mode"]:checked').val() || 'cash';
            updateAccountDropdown(initialMode);

            // Payment Mode Change listener
            $('input[name="payment_mode"]').change(function() {
                const selectedMethod = $(this).val();
                toggleChequeFields();
                updateAccountDropdown(selectedMethod);
            });

            // Add Row
            $('#addRowBtn').on('click', function() {
                const tableBody = document.getElementById('itemsTableBody');
                const rowCount = tableBody.children.length;

                const newRow = document.createElement('tr');
                newRow.innerHTML = `
                    <td>
                        <select name="items[${rowCount}][adaegi_khata]" class="form-control vendor-select" style="width: 100%;" required>
                            <option value="">- Search Supplier / Customer / Purchaser -</option>
                        </select>
                        <input type="hidden" name="items[${rowCount}][party_type]" class="party-type-hidden" value="supplier">
                    </td>
                    <td>
                        <input type="text" name="items[${rowCount}][description]" class="form-control item-description" placeholder="Payment description">
                    </td>
                    <td>
                        <input type="text" name="items[${rowCount}][debit_amount]" value="0" class="form-control debit-amount font-weight-bold text-end" placeholder="0.00" required>
                    </td>
                    <td>
                        <input type="text" name="items[${rowCount}][credit_amount]" value="0" class="form-control credit-amount font-weight-bold text-end" placeholder="0.00" required>
                    </td>
                    <td>
                        <input type="text" name="items[${rowCount}][employee]" class="form-control item-employee" placeholder="Employee Name">
                    </td>
                    <td class="text-center">
                        <button type="button" class="pv-btn-remove remove-row" title="Remove row">
                            <i class="fa-solid fa-trash-can"></i>
                        </button>
                    </td>
                `;

                tableBody.appendChild(newRow);
                initCustomerSelect($(newRow).find('.vendor-select'));
                reindexRows();
                bindAmountFormatters();
                calculateDebitGrandTotal();
                calculateCreditGrandTotal();
            });

            // Remove Row
            $(document).on('click', '.remove-row', function() {
                const tableBody = $('#itemsTableBody');
                if (tableBody.children('tr').length > 1) {
                    $(this).closest('tr').remove();
                    reindexRows();
                    calculateDebitGrandTotal();
                    calculateCreditGrandTotal();
                }
            });

            // Real-time calculations
            $(document).on('input', '.debit-amount', function() {
                calculateDebitGrandTotal();
            });

            $(document).on('input', '.credit-amount', function() {
                calculateCreditGrandTotal();
            });

            bindAmountFormatters();
            reindexRows();
            calculateDebitGrandTotal();
            calculateCreditGrandTotal();

            // Strip commas before form submit so numeric validation passes
            $('#myForm').on('submit', function() {
                $('.credit-amount').each(function() {
                    $(this).val(stripCommas($(this).val()));
                });
                $('.debit-amount').each(function() {
                    $(this).val(stripCommas($(this).val()));
                });
            });
        });
    </script>
@endpush