@extends('layouts.master')

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

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

        <div class="rv-page-header">
            <div class="rv-header-title">
                <div class="rv-header-icon">
                    <i class="fa-solid fa-receipt"></i>
                </div>
                <div class="rv-header-text">
                    <h2>Add New Receipt Voucher</h2>
                    <div class="rv-subtitle">
                        <span>Record customer receipts and incoming payments</span>
                        <span class="rv-urdu">نیا رسید واؤچر درج کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('receipt_voucher.list') }}" class="rv-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to Receipt Vouchers
            </a>
        </div>

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

                <!-- Error Display -->
                @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="rv-section-header">
                    <h6 class="rv-section-title">
                        <i class="fa-solid fa-sliders"></i> Voucher Information & Cheque Details
                        <span class="rv-urdu" style="margin-left: auto;">واؤچر اور ادائیگی کی معلومات</span>
                    </h6>
                </div>
                <div class="rv-section-body">
                    <div class="row">
                        <!-- Left Panel: Voucher Information -->
                        <div class="col-lg-6 col-12 rv-panel-border">
                            <div class="rv-panel-title">
                                <i class="fa-solid fa-file-invoice-dollar"></i> Basic Voucher Setup
                            </div>

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

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

                            <!-- Source Cash/Bank Account -->
                            <div class="rv-field-group">
                                <label class="rv-label" for="account_select">
                                    <span>Deposit In 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>
                                </select>
                            </div>

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

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

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

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

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

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

                <!-- SECTION 2: Receipt Entries Table -->
                <div class="rv-section-header">
                    <h6 class="rv-section-title">
                        <i class="fa-solid fa-table-list"></i> Customer Receipt Entries
                        <span class="rv-urdu" style="margin-left: auto;">ادائیگی کھاتہ اور وصولی کی تفصیلات</span>
                    </h6>
                </div>
                <div class="rv-section-body">
                    <div class="rv-table-card">
                        <div class="table-responsive">
                            <table id="example2" class="table rv-table align-middle">
                                <thead>
                                    <tr>
                                        <th style="min-width: 320px;">
                                            <span>Customer / کھاتہ</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="min-width: 220px;" class="text-right text-end">
                                            <span>Amount (Credit / رقم)</span>
                                            <span class="text-danger">*</span>
                                        </th>
                                        <th style="min-width: 200px;">
                                            <span>Employee / وصول کنندہ</span>
                                        </th>
                                        <th class="text-center" style="width: 80px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="itemsTableBody">
                                    <tr>
                                        <td>
                                            <select name="items[0][adaegi_khata]" class="form-control customer-select" style="width: 100%;" required>
                                                <option value="">- Search & Select Customer -</option>
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][credit_amount]"
                                                class="form-control credit-amount font-weight-bold text-right text-end"
                                                placeholder="0.00" style="font-size: 15px; color: #059669;" required>
                                        </td>
                                        <td>
                                            <input type="text" name="items[0][employee]" class="form-control"
                                                placeholder="Employee or Collector Name">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="rv-btn-remove remove-row" style="display: none;">
                                                <i class="fa-solid fa-trash-can"></i>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- Add Row Button & Grand Total Banner -->
                        <div class="p-3 bg-light border-top">
                            <button type="button" id="addRowBtn" class="rv-btn-add-row">
                                <i class="fa-solid fa-plus-circle"></i> Add Another Customer Row
                            </button>

                            <div class="rv-grand-total-banner">
                                <div class="title">
                                    <i class="fa-solid fa-coins"></i>
                                    <span>Total Receipt Amount (کُل وصولی رقم):</span>
                                </div>
                                <div class="value">
                                    <small style="font-size: 16px; font-weight: 700; opacity: 0.85;">Rs.</small>
                                    <span id="grandTotalDisplay">0.00</span>
                                    <input type="hidden" id="grandTotal" name="grand_total" value="0">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Footer -->
                <div class="rv-form-footer">
                    <div class="text-muted small">
                        <i class="fa-solid fa-circle-info mr-1"></i> Verify all receipt entries and amounts before saving.
                    </div>
                    <div class="rv-footer-actions">
                        <a href="{{ route('receipt_voucher.list') }}" class="rv-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="rv-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Save Receipt Voucher
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

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

@push('scripts')
    <script>
        $(document).ready(function() {
            // Setup CSRF header
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize Dates
            var today = new Date();
            var 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").datepicker({ dateFormat: "yy-mm-dd" });
            $("#voucher_chqdate").datepicker({ dateFormat: "yy-mm-dd" });
            $("#voucher_depdate").datepicker({ dateFormat: "yy-mm-dd" });

            // Initialize Select2 on Account
            $('#account_select').select2({
                placeholder: "- Select Account -",
                width: '100%'
            });

            // Initialize Customer Search Select2
            initCustomerSelect('.customer-select');

            // Default Select Cash
            $('#cash').prop('checked', true).trigger('change');
            toggleChequeFields();

            // Background Ctrl + S shortcut support
            document.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                    e.preventDefault();
                    document.getElementById('myForm').submit();
                }
            });

            // Prevent enter submission except inside textareas
            $('#myForm').on('keydown', function(e) {
                if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                    e.preventDefault();
                }
            });

            // Initial Grand Total
            calculateGrandTotal();
            updateRowRemoveButtons();
        });

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

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

        $('input[name="payment_mode"]').on('change', function() {
            var selectedMethod = $(this).val();
            toggleChequeFields();
            updateAccountDropdown(selectedMethod);
        });

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

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

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

        // Initialize Customer Select with AJAX
        function initCustomerSelect(selector) {
            $(selector).select2({
                placeholder: '- Search Customer -',
                minimumInputLength: 0,
                width: '100%',
                ajax: {
                    url: '{{ url('get-customer-data') }}',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return { query: params.term || '' };
                    },
                    processResults: function(data) {
                        return { results: data };
                    }
                }
            }).on('select2:open', function() {
                $('.select2-search__field').trigger('input');
            });
        }

        // Add Row Functionality
        $('#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 customer-select" style="width: 100%;" required>
                        <option value="">- Search & Select Customer -</option>
                    </select>
                </td>
                <td>
                    <input type="text" name="items[${rowCount}][credit_amount]"
                        class="form-control credit-amount font-weight-bold text-right text-end"
                        placeholder="0.00" style="font-size: 15px; color: #059669;" required>
                </td>
                <td>
                    <input type="text" name="items[${rowCount}][employee]" class="form-control"
                        placeholder="Employee or Collector Name">
                </td>
                <td class="text-center">
                    <button type="button" class="rv-btn-remove remove-row">
                        <i class="fa-solid fa-trash-can"></i>
                    </button>
                </td>
            `;

            tableBody.appendChild(newRow);
            initCustomerSelect(newRow.querySelector('.customer-select'));
            updateRowRemoveButtons();
            bindCreditFieldFormatter();
        });

        // Remove Row Functionality with proper reindexing
        $(document).on('click', '.remove-row', function() {
            const tableBody = document.getElementById('itemsTableBody');

            if (tableBody.children.length > 1) {
                $(this).closest('tr').remove();

                // Re-index remaining rows cleanly
                const rows = tableBody.querySelectorAll('tr');
                rows.forEach((row, index) => {
                    let select = row.querySelector('.customer-select');
                    if (select) select.name = `items[${index}][adaegi_khata]`;

                    let creditInput = row.querySelector('.credit-amount');
                    if (creditInput) creditInput.name = `items[${index}][credit_amount]`;

                    let empInput = row.querySelector('input[name*="[employee]"]');
                    if (empInput) empInput.name = `items[${index}][employee]`;
                });

                updateRowRemoveButtons();
                calculateGrandTotal();
            }
        });

        // Update remove button visibility
        function updateRowRemoveButtons() {
            let totalRows = $('#itemsTableBody tr').length;
            $('#itemsTableBody tr').each(function() {
                if (totalRows > 1) {
                    $(this).find('.remove-row').show();
                } else {
                    $(this).find('.remove-row').hide();
                }
            });
        }

        // Live Comma Formatter for Credit Amount
        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) {
            return (value || '').toString().replace(/,/g, '');
        }

        function bindCreditFieldFormatter() {
            $('.credit-amount').off('input.format').on('input.format', function() {
                const cursorPos = this.selectionStart;
                const numeric = stripCommas(this.value);
                if (!/^\d*\.?\d*$/.test(numeric)) return;

                this.value = formatNumberWithCommas(numeric);
                this.setSelectionRange(cursorPos, cursorPos);
                calculateGrandTotal();
            });
        }

        // Strip commas before form submit
        $('#myForm').on('submit', function() {
            $('.credit-amount').each(function() {
                const raw = stripCommas($(this).val());
                $(this).val(raw);
            });
        });

        // Calculate Grand Total
        function calculateGrandTotal() {
            let total = 0;

            $('.credit-amount').each(function() {
                let val = parseFloat(stripCommas($(this).val())) || 0;
                total += val;
            });

            let formatted = total.toLocaleString('en-US', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });

            $('#grandTotal').val(total.toFixed(2));
            $('#grandTotalDisplay').text(formatted);
        }

        $(document).ready(function() {
            bindCreditFieldFormatter();
        });
    </script>
@endpush