@extends('layouts.master')

@section('css')
    <link href="{{ URL::asset('assets/plugins/select2/css/select2.min.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    <style>
        .parent-label {
            font-weight: 600;
            color: #495057;
            margin-bottom: 5px;
            display: block;
        }

        .table-thead-color {
            background-color: #f8f9fa;
        }

        .tax-value {
            background-color: #f1f1f1 !important;
            font-weight: bold;
            color: #d33;
        }

        #total_sum {
            color: #28a745;
            font-size: 1.2rem;
            font-weight: bold;
        }

        #total_tax {
            color: #dc3545;
            font-size: 1.2rem;
            font-weight: bold;
        }
    </style>
@endsection

@section('title')
    {{ __('home.Receipt document') }}
@stop

@section('content')
    <br>
    <div class="row">
        <div class="col-xl-12">
            <div class="card mg-b-20">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h4 class="content-title mb-0 my-auto" id="form_title">{{ __('home.Receipt document') }}</h4>
                    </div>
                </div>
                <div class="card-body">
                    <form id="receipt_form" action="{{ route('receipt.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <input type="hidden" name="receipt_id" id="receipt_id">

                        <div class="row mb-4">
                            <div class="col-md-4">
                                <label class="parent-label">{{ __('home.Withdraw from account') }}</label>
                                <select class="form-control select2" name="payment_account_id" id="payment_account_id" required>
                                    <option value="">{{ __('home.Choose account') }}</option>
                                    @foreach (App\Models\financial_accounts::whereIn('parent_account_number', [4, 5])->get() as $acc)
                                        <option value="{{ $acc->id }}" data-parent="{{ $acc->parent_account_number }}">
                                            {{ $acc->name }} ({{ $acc->account_number }})
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="parent-label">{{ __('home.Payment method') }}</label>
                                <select class="form-control" name="pay_method_type" id="pay_method_type">
                                    <option value="Cash">{{ __('home.Cash') }}</option>
                                    <option value="Shabka">{{ __('report.shabka') }}</option>
                                    <option value="Bank_transfer">{{ __('home.Bank transfer') }}</option>
                                </select>
                            </div>

                            <div class="col-md-4">
                                <label class="parent-label">{{ __('home.Date') }}</label>
                                <input class="form-control" name="date" id="date_input" type="date" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-bordered text-center" id="dynamic_field">
                                <thead class="table-thead-color">
                                    <tr>
                                        <th>#</th>
                                        <th style="width: 20%">{{ __('home.Disburse to account') }}</th>
                                        <th style="width: 15%">{{ __('home.Cost Center') }}</th>
                                        <th style="width: 10%">{{ __('home.Amount (Inclusive)') }}</th>
                                        <th style="width: 10%">{{ __('home.avt_rate') }}</th>
                                        <th style="width: 10%">{{ __('home.Tax Value') }}</th>
                                        <th style="width: 15%">{{ __('home.Statement') }}</th>
                                        <th style="width: 10%">{{ __('home.Attachment') }}</th>
                                        <th>{{ __('home.Action') }}</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="9" class="text-right">
                                            <button type="button" class="btn btn-primary btn-sm" id="add_row">+ {{ __('home.Add Row') }}</button>
                                        </td>
                                    </tr>
                                    <tr class="bg-light">
                                        <td colspan="3">{{ __('home.Total') }}: <span id="total_sum">0.00</span></td>
                                        <td colspan="6">{{ __('home.Total Tax') }}: <span id="total_tax">0.00</span></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <button type="submit" id="submit_button" class="btn btn-success btn-block mt-3">{{ __('home.Save and process') }}</button>
                        <button type="button" id="cancel_edit" class="btn btn-secondary btn-block mt-2" style="display:none;">{{ __('home.cancel') }}</button>
                    </form>
                </div>
            </div>

            <div class="card mg-b-20 table-responsive">
                <div class="card-body">
                    <div class="row">
                        <div id="AVT_Div2" class="col-lg-3">
                            <label for="search_by_decoumentNo" class="control-label parent-label">{{ __('home.decoumentNo') }}</label>
                            <input type="number" class="form-control parent-input" id="search_by_decoumentNo"
                                onkeyup="search_by_decoumentNo_function()" placeholder="{{ __('home.Search by doc number') }}">
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive" id="ajax_responce_allinvoicesDiv">
                        <div class="text-center p-3">{{ __('home.Loading') }}...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- قوالب الخيارات: تُبنى هنا في HTML وليس داخل نصوص JavaScript --}}
    <template id="tpl_accounts_active">
        <option value="">{{ __('home.Choose account') }}</option>
        @foreach (App\Models\financial_accounts::where('active', 1)->where('is_parent', 0)->get() as $acc)
            <option value="{{ $acc->id }}">{{ $acc->name }}</option>
        @endforeach
    </template>

    {{-- عند التعديل نعرض كل الحسابات حتى يظهر الحساب المحفوظ ولو أصبح غير نشط --}}
    <template id="tpl_accounts_all">
        <option value="">{{ __('home.Choose account') }}</option>
        @foreach (App\Models\financial_accounts::all() as $acc)
            <option value="{{ $acc->id }}">{{ $acc->name }}</option>
        @endforeach
    </template>

    <template id="tpl_cost_centers">
        <option value="">{{ __('home.Without') }}</option>
        @foreach (App\Models\Cost_centers::all() as $cost)
            <option value="{{ $cost->id }}">{{ $cost->cost_center_ar }}</option>
        @endforeach
    </template>
@endsection

@section('js')
    <script src="{{ URL::asset('assets/plugins/select2/js/select2.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        const ACCOUNT_OPTIONS_ACTIVE = document.getElementById('tpl_accounts_active').innerHTML;
        const ACCOUNT_OPTIONS_ALL    = document.getElementById('tpl_accounts_all').innerHTML;
        const COST_OPTIONS           = document.getElementById('tpl_cost_centers').innerHTML;
        const TAX_ACCOUNT_ID         = 102; // حساب الضريبة - يُستبعد من أسطر الجدول عند التعديل

        const LANG = {
            receiptDocument: @json(__('home.Receipt document')),
            editReceipt:     @json(__('home.Edit Receipt')),
            saveAndProcess:  @json(__('home.Save and process')),
            update:          @json(__('home.Update')),
            savedOk:         @json(__('home.saved_successfully')),
            exempt:          @json(__('home.Exempt')),
            areYouSure:      @json(__('home.Are you sure?')),
            deleteWarning:   @json(__('home.delete_warning')),
            yesDelete:       @json(__('home.Yes, delete it!')),
            cancel:          @json(__('home.Cancel')),
            deleted:         @json(__('home.Deleted!')),
            error:           @json(__('home.error')),
            dataError:       @json(__('home.data_error')),
        };

        function escapeHtml(s) {
            return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' }[c]));
        }

        function loadAllData() {
            $.ajax({
                url: "{{ URL::to('get_all_send_serf_jax') }}",
                type: "GET",
                dataType: "html",
                success: function (html) { $("#ajax_responce_allinvoicesDiv").html(html); }
            });
        }

        function search_by_decoumentNo_function() {
            var val = $("#search_by_decoumentNo").val();
            if (val == '') {
                loadAllData();
                return;
            }
            $.ajax({
                url: "{{ URL::to('search_by_decoumentNo_send_serf') }}/" + encodeURIComponent(val),
                type: "GET",
                dataType: "html",
                success: function (html) { $("#ajax_responce_allinvoicesDiv").html(html); }
            });
        }

        $(document).ready(function () {
            var i = 0; // عداد الأسطر

            // ===== بناء سطر في الجدول (للإضافة وللتعديل) =====
            function addItemRow(item = null) {
                const isEdit = item !== null;
                const accountOptions = isEdit ? ACCOUNT_OPTIONS_ALL : ACCOUNT_OPTIONS_ACTIVE;
                const rate = isEdit ? String(parseFloat(item.vat_rate) || 0) : '0';
                const showRemove = $('#dynamic_field tbody tr').length > 0;

                const html = `<tr id="row${i}">
                    <td class="row-index"></td>
                    <td>
                        <select class="form-control select2 row-acc" name="items[${i}][client_account_id]" required>
                            ${accountOptions}
                        </select>
                    </td>
                    <td>
                        <select class="form-control select2 row-cost" name="items[${i}][cost_center]">
                            ${COST_OPTIONS}
                        </select>
                    </td>
                    <td>
                        <input type="number" name="items[${i}][amount]" step="0.01" class="form-control amount-input"
                            value="${isEdit ? escapeHtml(item.recive_amount) : ''}" required>
                    </td>
                    <td>
                        <select class="form-control tax-select" name="items[${i}][tax_rate]">
                            <option value="0" ${rate === '0' ? 'selected' : ''}>${escapeHtml(LANG.exempt)} (0%)</option>
                            <option value="0.05" ${rate === '0.05' ? 'selected' : ''}>5%</option>
                            <option value="0.15" ${rate === '0.15' ? 'selected' : ''}>15%</option>
                        </select>
                    </td>
                    <td><input type="text" name="items[${i}][tax_value]" class="form-control tax-value" readonly value="0.00"></td>
                    <td><input type="text" name="items[${i}][notes]" class="form-control" value="${isEdit ? escapeHtml(item.note) : ''}"></td>
                    <td><input type="file" name="items[${i}][attachment]" class="form-control-file"></td>
                    <td>${showRemove ? '<button type="button" class="btn btn-danger btn-sm btn_remove">X</button>' : ''}</td>
                </tr>`;

                $('#dynamic_field tbody').append(html);

                const row = $(`#row${i}`);
                if (isEdit) {
                    row.find('.row-acc').val(item.customer_id);
                    row.find('.row-cost').val(item.cost_center || '');
                }
                row.find('.select2').select2({ width: '100%' });

                i++;
                reindexRows();
                calculate();
            }

            function reindexRows() {
                $('#dynamic_field tbody tr').each(function (idx) {
                    $(this).find('.row-index').text(idx + 1);
                });
            }

            function calculate() {
                var total = 0, tax = 0;
                $('#dynamic_field tbody tr').each(function () {
                    var amt = parseFloat($(this).find('.amount-input').val()) || 0;
                    var rate = parseFloat($(this).find('.tax-select').val()) || 0;
                    var tVal = rate > 0 ? (amt - (amt / (1 + rate))) : 0;
                    $(this).find('.tax-value').val(tVal.toFixed(2));
                    total += amt;
                    tax += tVal;
                });
                $('#total_sum').text(total.toFixed(2));
                $('#total_tax').text(tax.toFixed(2));
            }

            function resetForm() {
                $('#receipt_form')[0].reset();
                $('#receipt_id').val('');
                $('#receipt_form').attr('action', "{{ route('receipt.store') }}");
                $('#form_title').text(LANG.receiptDocument);
                $('#submit_button').text(LANG.saveAndProcess).removeClass('btn-info').addClass('btn-success').prop('disabled', false);
                $('#cancel_edit').hide();
                $('#payment_account_id').val('').trigger('change.select2');
                $('#dynamic_field tbody').empty();
                i = 0;
                addItemRow();
            }

            // ===== تهيئة الصفحة =====
            $('#payment_account_id').select2({ width: '100%' });
            addItemRow();
            loadAllData();

            // اختيار طريقة الدفع تلقائياً حسب الحساب الأب
            // (تأكد من الربط حسب شجرة حساباتك: هنا 5 = نقدي، 4 = تحويل بنكي)
            $('#payment_account_id').on('change', function () {
                var parentAccount = $(this).find(':selected').data('parent');
                if (parentAccount == 5) {
                    $('#pay_method_type').val('Cash');
                } else if (parentAccount == 4) {
                    $('#pay_method_type').val('Bank_transfer');
                }
            });

            $('#add_row').on('click', function () { addItemRow(); });

            $(document).on('click', '.btn_remove', function () {
                $(this).closest('tr').remove();
                reindexRows();
                calculate();
            });

            $(document).on('keyup change', '.amount-input, .tax-select', calculate);

            $('#cancel_edit').on('click', resetForm);

            // ===== الحفظ / التحديث =====
            $('#receipt_form').on('submit', function (e) {
                e.preventDefault();
                var btn = $('#submit_button');
                btn.prop('disabled', true);

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    success: function (res) {
                        Swal.fire({ icon: 'success', title: LANG.savedOk, text: res.message || '' });
                        resetForm();
                        loadAllData();
                    },
                    error: function (xhr) {
                        btn.prop('disabled', false);
                        var msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : LANG.dataError;
                        Swal.fire(LANG.error + '!', msg, 'error');
                        console.log(xhr);
                    }
                });
            });

            // ===== ترقيم الصفحات في السجل =====
            $(document).on('click', '#ajax_pagination_in_search a', function (e) {
                e.preventDefault();
                $.ajax({
                    url: $(this).attr("href"),
                    type: 'GET',
                    dataType: 'html',
                    cache: false,
                    success: function (data) { $("#ajax_responce_allinvoicesDiv").html(data); }
                });
            });

            // ===== التعديل =====
            $(document).on('click', '.edit-btn', function () {
                var serf_count = $(this).data('serf_count');
                var id = $(this).data('id');

                $.ajax({
                    url: "{{ url('get-receipt-details') }}/" + serf_count,
                    type: "GET",
                    success: function (response) {
                        $('#dynamic_field tbody').empty();
                        i = 0;

                        // قيد الخزينة/البنك (الدائن)
                        var paymentEntry = response.find(item => parseFloat(item.creditor) > 0);
                        if (paymentEntry) {
                            $('#payment_account_id').val(paymentEntry.customer_id).trigger('change');
                            $('#date_input').val(paymentEntry.date_export);
                        }

                        // طريقة الدفع من أي سطر يحتوي عليها
                        var methodEntry = response.find(item => item.Pay_Method_Name && item.Pay_Method_Name.trim() !== '');
                        if (methodEntry) {
                            var method = methodEntry.Pay_Method_Name.toLowerCase().trim();
                            if (method === 'cash') {
                                $('#pay_method_type').val('Cash');
                            } else if (method === 'bank_transfer' || method === 'bank transfer') {
                                $('#pay_method_type').val('Bank_transfer');
                            } else if (method === 'shabka') {
                                $('#pay_method_type').val('Shabka');
                            } else if (methodEntry.pay_method) {
                                $('#pay_method_type').val(methodEntry.pay_method);
                            }
                        }

                        // الأسطر المدينة فقط (مع استبعاد حساب الضريبة)
                        response.forEach(function (item) {
                            if (parseFloat(item.debtor) > 0 && item.customer_id != TAX_ACCOUNT_ID) {
                                addItemRow(item);
                            }
                        });

                        if ($('#dynamic_field tbody tr').length === 0) addItemRow();

                        var docNo = paymentEntry ? paymentEntry.sent_serf_count : serf_count;
                        $('#receipt_id').val(id);
                        $('#receipt_form').attr('action', "{{ url('receipt-update') }}/" + id);
                        $('#form_title').text(LANG.editReceipt + ' #' + docNo);
                        $('#submit_button').text(LANG.update).removeClass('btn-success').addClass('btn-info');
                        $('#cancel_edit').show();
                        window.scrollTo({ top: 0, behavior: 'smooth' });
                    },
                    error: function (xhr) {
                        Swal.fire(LANG.error + '!', LANG.dataError, 'error');
                        console.log(xhr);
                    }
                });
            });

            // ===== الحذف =====
            $(document).on('click', '.delete-btn', function () {
                var id = $(this).data('id');
                Swal.fire({
                    title: LANG.areYouSure,
                    text: LANG.deleteWarning,
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    confirmButtonText: LANG.yesDelete,
                    cancelButtonText: LANG.cancel
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "{{ url('receipt-delete') }}/" + id,
                            type: 'DELETE',
                            data: { _token: '{{ csrf_token() }}' },
                            success: function (res) {
                                Swal.fire(LANG.deleted, res.message || '', "success");
                                loadAllData();
                            },
                            error: function () {
                                Swal.fire(LANG.error + '!', LANG.dataError, 'error');
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection