@extends('layouts.master')

@section('content')
    <style>
        body {
            /*zoom: 90%;*/
            background-color: #f5f7fa;
        }

        .card {
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #e3e6ef;
            background-color: #fff;
        }

        .card-title {
            font-weight: 600;
            font-size: 18px;
            color: #2b354f;
            margin-bottom: 15px;
        }

        .form-control {
            border-radius: 8px;
            border-color: #d0d5dd;
            font-size: 14px;
        }

        .form-control:focus {
            border-color: #66c2a5;
            box-shadow: 0 0 0 0.1rem rgba(102, 194, 165, 0.25);
        }

        label.form-label {
            font-weight: 500;
            color: #495057;
        }

        .table {
            border-radius: 8px;
            overflow: hidden;
        }

        .btn {
            border-radius: 6px;
            font-weight: 500;
        }

        .btn-primary {
            background-color: #28a745;
            border-color: #28a745;
        }

        .btn-primary:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }

        .az-content-breadcrumb {
            font-size: 14px;
            padding: 10px 0 5px;
            color: #666;
        }

        .az-content-title {
            font-size: 24px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 20px;
        }

        .border-end {
            border-right: 1px solid #e9ecef;
        }

        .cheque-field:disabled {
            background-color: #f8f9fa;
            opacity: 0.8;
            cursor: not-allowed;
        }

        .table-bordered th,
        .table-bordered td {
            border-color: #dee2e6;
        }

        .table thead th {
            background-color: #f1f3f5;
            color: #495057;
            font-size: 14px;
            font-weight: 600;
        }
    </style>
    <div class="az-content-breadcrumb">
        <span> Payment Voucher</span>
        <span>Edit Payment Voucher</span>
    </div>
    <h2 class="az-content-title" style="display: inline">Edit Payment Voucher
        <span>
            <a href="{{ route('payment.list') }}" class="btn border" style="float: right">
                <i class="fa-solid fa-bars-staggered"></i> Back to Payment Voucher
            </a>
        </span>
    </h2>

    <div class="row">

        <div class="col-md-12 col-lg-12 col-xl-12">
            <div class="card card-body pd-40">
                <h5 class="card-title mg-b-20">Edit Payment Voucher</h5>
                <hr>
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <form id="myForm" method="post"
                    action="{{ route('payment_voucher.update', Crypt::encrypt($voucher->id_vouchers)) }}">
                    @csrf
                    @method('PUT')

                    @if ($errors->any())
                        <div class="p-1">
                            @foreach ($errors->all() as $error)
                                <div class="alert alert-warning alert-danger fade show" role="alert">{{ $error }}
                                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                                </div>
                            @endforeach
                        </div>
                    @endif
                    <input type="hidden" name="transaction_type" value="Debit">

                    <div class="row">
                        <div class="row">
                            <div class="col-lg-6 mt-3 p-3 border-end">
                                <h5 class="card-title">Voucher Information</h5>
                                <div class="mb-2">
                                    <label for="voucher_date" class="form-label">Payment Voucher Date <span
                                            style="color:red;">*</span></label>
                                    <input type="text" id="voucher_date" name="voucher_date" class="form-control"
                                        value="{{ $voucher->voucher_date }}" readonly />
                                </div>
                                <div class="mb-2 text-center">
                                    <label class="form-label d-block mb-2">Mode / موڈ <span
                                            style="color:red;">*</span></label>
                                    <div class="d-flex justify-content-center">
                                        <div class="me-4 text-center">
                                            <input class="form-check-input" type="radio" id="cash"
                                                name="payment_mode" value="cash"
                                                {{ $voucher->payment_mode == 'cash' ? 'checked' : '' }} required>
                                            <label class="form-check-label" for="cash">Cash</label>
                                        </div>
                                        <div class="text-center">
                                            <input class="form-check-input" type="radio" id="bank"
                                                name="payment_mode" value="bank"
                                                {{ $voucher->payment_mode == 'bank' ? 'checked' : '' }} required>
                                            <label class="form-check-label" for="bank">Bank</label>
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <select id="account_select" name="account" class="form-control select2"
                                            data-selected="{{ $voucher->account }}">
                                        </select>
                                    </div>
                                </div>

                                <div class="my-2">
                                    <label for="voucher_details" class="form-label">Details / تفصیلات <span
                                            style="color:red;">*</span></label>
                                    <input type="text" id="voucher_details" name="voucher_details" class="form-control"
                                        value="{{ $voucher->voucher_details }}" />
                                </div>
                            </div>

                            <div class="col-lg-6 mt-3 p-3">
                                <h5 class="card-title">Cheque Details</h5>
                                <div class="mb-3">
                                    <label for="voucher_chqno" class="form-label">Chq. #</label>
                                    <input type="text" id="voucher_chqno" name="voucher_chqno"
                                        class="form-control cheque-field" value="{{ $voucher->voucher_chqno }}">
                                </div>
                                <div class="mb-3">
                                    <label for="voucher_chqdate" class="form-label">Chq. Date<span
                                            style="color:red;">*</span></label>
                                    <input type="text" id="voucher_chqdate" name="voucher_chqdate"
                                        class="form-control cheque-field" value="{{ $voucher->voucher_chqdate }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="voucher_depdate" class="form-label">Deposite Date<span
                                            style="color:red;">*</span></label>
                                    <input type="text" id="voucher_depdate" name="voucher_depdate"
                                        class="form-control cheque-field" value="{{ $voucher->voucher_depdate }}" readonly>
                                </div>
                                <div class="mb-3">
                                    <label for="voucher_depslipno" class="form-label">Deposite Slip #</label>
                                    <input type="text" id="voucher_depslipno" name="voucher_depslipno"
                                        class="form-control cheque-field" value="{{ $voucher->voucher_depslipno }}">
                                </div>
                            </div>
                        </div>

                        <div class="row my-5 card p-3">
                            <h5 class="card-title">Voucher Details</h5>
                            <div class="col-12">
                                <table class="table table-hover table-bordered align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>جمع کھاتہ</th>
                                            <th>Description(تفصیل)</th>
                                            <th>رقم Debit</th>
                                            <th>رقم Credit</th>
                                            <th>Employee</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="itemsTableBody">
                                        @php
                                            $items = json_decode($voucher->adaegi_array, true) ?? [];
                                        @endphp
                                        @foreach ($items as $index => $item)
                                            @php
                                                $partyType = $item['party_type'] ?? 'supplier';
                                                $partyName = match ($partyType) {
                                                    'customer' => '👤 ' .
                                                        (optional(\App\Customer::find($item['adaegi_khata']))
                                                            ->customer_name ??
                                                            'Customer #' . $item['adaegi_khata']),
                                                    'purchaser' => '🛒 ' .
                                                        (optional(\App\Purchaser::find($item['adaegi_khata']))
                                                            ->purchaser_name ??
                                                            'Purchaser #' . $item['adaegi_khata']),
                                                    default => '🏭 ' .
                                                        (optional(\App\Suppliers::find($item['adaegi_khata']))
                                                            ->supplier_name ??
                                                            'Supplier #' . $item['adaegi_khata']),
                                                };
                                            @endphp
                                            <tr>
                                                <td>
                                                    <select name="items[{{ $index }}][adaegi_khata]"
                                                        class="form-control vendor-select" style="width: 100%;">
                                                        <option value="{{ $item['adaegi_khata'] }}" selected>
                                                            {{ $partyName }}
                                                        </option>
                                                    </select>
                                                    <input type="hidden" name="items[{{ $index }}][party_type]"
                                                        class="party-type-hidden" value="{{ $partyType }}">
                                                </td>
                                                <td>
                                                    <input type="text" name="items[{{ $index }}][description]"
                                                        class="form-control" value="{{ $item['description'] ?? '' }}">
                                                </td>
                                                <td>
                                                    <input type="text" name="items[{{ $index }}][debit_amount]"
                                                        class="form-control debit-amount"
                                                        value="{{ number_format($item['debit_amount'] ?? 0) }}"
                                                        placeholder="رقم Debit">
                                                </td>
                                                <td>
                                                    <input type="text"
                                                        name="items[{{ $index }}][credit_amount]"
                                                        class="form-control credit-amount"
                                                        value="{{ number_format($item['credit_amount'] ?? 0) }}"
                                                        placeholder="رقم Credit">
                                                </td>
                                                <td>
                                                    <input type="text" name="items[{{ $index }}][employee]"
                                                        class="form-control" value="{{ $item['employee'] ?? '' }}">
                                                </td>
                                                <td>
                                                    @if (!$loop->first)
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm remove-row">Remove</button>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <th class="text-end"> Total</th>
                                            <th colspan="1"></th>
                                            <th>
                                                <input type="text" id="grandTotalDebit" class="form-control text-end"
                                                    readonly>
                                            </th>
                                            <th>
                                                <input type="text" id="grandTotalCredit" class="form-control text-end"
                                                    readonly>
                                            </th>
                                            <th colspan="2"></th>
                                        </tr>

                                        <tr>
                                            <th class="text-end">Net Amount</th>
                                            <th colspan="1"></th>
                                            <th colspan="2">
                                                <input type="text" id="netAmount" class="form-control text-end"
                                                    readonly>
                                            </th>
                                            <th colspan="2"></th>
                                        </tr>
                                    </tfoot>
                                </table>
                                <button type="button" id="addRowBtn" class="btn btn-primary mt-2">
                                    <i class="fa fa-plus"></i> Add Row
                                </button>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-success btn-block mt-2 float-end" style="color:#fff;">
                            <i class="fa fa-save"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

@push('scripts')
    <script>
        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();
            }
        });

        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('myForm');
            form.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') {
                    e.preventDefault();
                    return false;
                }
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const chequeFields = document.querySelectorAll('.cheque-field');
            const paymentModeInputs = document.querySelectorAll('input[name="payment_mode"]');

            function toggleChequeFields() {
                const selectedMode = document.querySelector('input[name="payment_mode"]:checked')?.value;
                chequeFields.forEach(field => {
                    field.disabled = (selectedMode !== 'bank');
                });
            }

            toggleChequeFields();
            paymentModeInputs.forEach(input => {
                input.addEventListener('change', toggleChequeFields);
            });
        });

        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.replace(/,/g, '');
        }

      function initCustomerSelect(selector, selectedPartyType) {
    var $select = $(selector);

    $select.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);
    });

    // If we have a pre-selected value but no select2 data yet, ensure party_type is set
    if (selectedPartyType) {
        $select.closest('tr').find('.party-type-hidden').val(selectedPartyType);
    }
}

$(document).ready(function() {
    // Initialize existing rows with their party types
    $('.vendor-select').each(function() {
        var partyType = $(this).closest('tr').find('.party-type-hidden').val() || 'supplier';
        initCustomerSelect(this, partyType);
    });

    initCreditField();
    initDebitField();

    // Init account dropdown
    const selected = $('input[name="payment_mode"]:checked').val();
    updateAccountDropdown(selected);

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

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

        function initCreditField() {
            $('.credit-amount').off('input').on('input', function() {
                const clean = stripCommas(this.value);
                if (!/^\d*\.?\d*$/.test(clean)) return;
                this.value = formatNumberWithCommas(clean);
            });
        }

        function initDebitField() {
            $('.debit-amount').off('input').on('input', function() {
                const clean = stripCommas(this.value);
                if (!/^\d*\.?\d*$/.test(clean)) return;
                this.value = formatNumberWithCommas(clean);
            });
        }

        function updateAccountDropdown(paymentMethod) {
            $.ajax({
                url: '{{ route('get-transaction-accounts') }}',
                type: 'GET',
                data: {
                    type: paymentMethod
                },
                dataType: 'json',
                success: function(data) {
                    const $accountSelect = $('#account_select');
                    const currentValue = $accountSelect.data('selected');

                    $accountSelect.empty();

                    $.each(data, function(key, value) {
                        const selected = key == currentValue ? 'selected' : '';
                        $accountSelect.append(
                            `<option value="${key}" ${selected}>${key} | ${value}</option>`);
                    });

                    $accountSelect.select2();
                },
                error: function(xhr) {
                    alert("Error loading accounts: " + xhr.responseText);
                }
            });
        }

        $(document).ready(function() {
            initCustomerSelect('.vendor-select');
            initCreditField();
            initDebitField();

            // Init account dropdown
            const selected = $('input[name="payment_mode"]:checked').val();
            updateAccountDropdown(selected);

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

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

        // Add row functionality
        document.getElementById('addRowBtn').addEventListener('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%;"></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">
                </td>
                <td>
                    <input value="0" type="text" name="items[${rowCount}][debit_amount]" class="form-control debit-amount" placeholder="رقم Debit">
                </td>
                <td>
                    <input value="0" type="text" name="items[${rowCount}][credit_amount]" class="form-control credit-amount" placeholder="رقم Credit">
                </td>
                <td>
                    <input type="text" name="items[${rowCount}][employee]" class="form-control">
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row">Remove</button>
                </td>
            `;

            tableBody.appendChild(newRow);
            initCustomerSelect(newRow.querySelector('.vendor-select'));
            initCreditField();
            initDebitField();
            setTimeout(() => {
                calculateDebitGrandTotal();
                calculateCreditGrandTotal();
            }, 50);
        });

        // Remove row functionality
        document.addEventListener('click', function(e) {
            if (e.target && e.target.classList.contains('remove-row')) {
                const row = e.target.closest('tr');
                const tableBody = document.getElementById('itemsTableBody');

                if (tableBody.children.length > 1) {
                    row.remove();

                    // Reindex and reinitialize
                    const rows = tableBody.querySelectorAll('tr');
                    rows.forEach((row, index) => {
                        $(row).find('select, input').each(function() {
                            const input = $(this);
                            const name = input.attr('name');
                            if (name) {
                                const newName = name.replace(/items\[\d+]/, `items[${index}]`);
                                input.attr('name', newName);
                            }
                        });
                        // Reinitialize select2 after reindexing
                        const select = row.querySelector('.vendor-select');
                        if (select && !$(select).data('select2')) {
                            initCustomerSelect(select);
                        }
                    });

                    setTimeout(() => {
                        calculateDebitGrandTotal();
                        calculateCreditGrandTotal();
                    }, 50);
                }
            }
        });

        // Form submit cleanup
        $('#myForm').on('submit', function() {
            $('.credit-amount').each(function() {
                this.value = stripCommas(this.value);
            });
            $('.debit-amount').each(function() {
                this.value = stripCommas(this.value);
            });
        });
    </script>

    {{-- Calculate Grand Total --}}
    <script>
        function parseNumber(value) {
            return parseFloat(value.replace(/,/g, '')) || 0;
        }

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

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

        function calculateDebitGrandTotal() {
            let total = 0;
            $('.debit-amount').each(function() {
                total += parseNumber($(this).val());
            });
            $('#grandTotalDebit').val(formatNumber(total));
            calculateNetAmount();
        }

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

        $(document).on('click', '.remove-row', function() {
            setTimeout(calculateDebitGrandTotal, 50);
            setTimeout(calculateCreditGrandTotal, 50);
        });

        $('#addRowBtn').on('click', function() {
            setTimeout(calculateDebitGrandTotal, 50);
            setTimeout(calculateCreditGrandTotal, 50);
        });

        $(document).ready(function() {
            calculateDebitGrandTotal();
            calculateCreditGrandTotal();
            calculateNetAmount();
        });

        function calculateNetAmount() {
            let credit = parseNumber($('#grandTotalCredit').val() || '0');
            let debit = parseNumber($('#grandTotalDebit').val() || '0');
            let net = debit - credit;
            $('#netAmount').val(formatNumber(net));
        }
    </script>
@endpush