@extends('admin.layouts.master')
@section('title', ($pageTitle ?? 'Invoice') . ' | Vogue Technics')

@section('styles')
    <style>
        .serviceInfoTable td {
            padding: 0.5rem;
            vertical-align: top;
        }

        .serviceInfoTable {
            table-layout: fixed;
            width: 100%;
        }

        .serviceInfoTable th,
        .serviceInfoTable td {
            white-space: normal;
        }

        .serviceInfoTable .select2-container {
            width: 100% !important;
        }

        .serviceInfoTable textarea.form-control {
            min-height: 38px;
            resize: vertical;
        }
    </style>
@endsection

@section('content')
    <section>
        <div class="row">
            <div class="col-12 col-xl-12">
                <form id="saleInvoiceForm"
                    action="{{ $saleInvoice ? route('sale-invoices.invoice.update', $saleInvoice) : route('sale-invoices.invoice.store') }}"
                    method="POST">
                    @csrf
                    @if ($saleInvoice)
                        @method('PUT')
                    @endif

                    @include('admin.sale_invoice_management.partials.customer-vehicle-info')
                    @include('admin.sale_invoice_management.partials.basic-info')
                    @include('admin.sale_invoice_management.partials.terms-and-conditions')
                    @include('admin.sale_invoice_management.partials.service-info')

                    <div class="row mt-4">
                        <div class="col-12 text-end">
                            <button type="submit" class="btn btn-primary me-sm-3 me-1">
                                {{-- {{ $saleInvoice ? 'Update ' . ucfirst($invoiceType) . ' Invoice' : 'Create ' . ucfirst($invoiceType) . ' Invoice' }} --}}
                                {{ $saleInvoice ? 'Update Invoice' : 'Create Invoice' }}
                            </button>
                            <a href="{{ $invoiceType === 'proforma' ? route('sale-invoices.proforma-invoice') : route('sale-invoices.invoice.index') }}" class="btn btn-label-secondary ms-auto">Cancel</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="modal fade" id="partModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modelHeading">Add Part</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form action="{{ route('parts.store') }}" method="POST" class="ajax-form">
                        <div class="modal-body">
                            @csrf
                            <div class="row g-3">
                                <div class="col-12">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" placeholder="Enter Name" required />
                                </div>

                                <div class="col-12">
                                    <label for="category" class="form-label">Category</label>
                                    <select name="category" id="category" class="form-control select2" data-placeholder="Select Category">
                                        <option value="">Select Category</option>
                                        <option value="ancillaries">Ancillaries</option>
                                        <option value="consumeables">Consumeables</option>
                                        <option value="cylinder_head">Cylinder Head</option>
                                        <option value="driveline">Driveline</option>
                                        <option value="engine">Engine</option>
                                        <option value="gearboxes">Gearboxes</option>
                                        <option value="engine_component">Other</option>
                                    </select>
                                </div>

                                <div class="col-sm-6 p-2">
                                    <label class="switch">
                                        <input type="checkbox" class="switch-input" name="is_active" value="1" />
                                        <span class="switch-toggle-slider">
                                            <span class="switch-on">
                                                <i class="icon-base ti tabler-check"></i>
                                            </span>
                                            <span class="switch-off">
                                                <i class="icon-base ti tabler-x"></i>
                                            </span>
                                        </span>
                                        <span class="switch-label">Status</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">Close</button>
                            <button type="submit" class="btn btn-primary">Save Part</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            const partOptionsUrl = @json(route('parts.options'));
            const banks = @json($banks);
            const calculationDefaults = @json($calculationDefaults ?? ['initial_deposit' => 0, 'discount' => 0, 'vat_percentage' => 0]);
            function initializeCategorySelect() {
                const $select = $('#category');

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }

                $select.select2({
                    placeholder: $select.data('placeholder') || 'Select Category',
                    dropdownParent: $('#partModal'),
                    width: '100%'
                });
            }

            function preloadPartOptions($select) {
                if (!$select.length) {
                    return;
                }

                $.ajax({
                    url: partOptionsUrl,
                    type: 'GET',
                    dataType: 'json',
                    data: {
                        q: '',
                        page: 1,
                        selected_ids: [$select.val()].filter(Boolean)
                    },
                    success: function(data) {
                        const currentValue = $select.val();

                        (data.results || []).forEach(function(item) {
                            if ($select.find('option[value="' + item.id + '"]').length) {
                                return;
                            }

                            const option = new Option(item.text, item.id, false, false);
                            $select.append(option);
                        });

                        if (currentValue) {
                            $select.val(currentValue).trigger('change.select2');
                        }
                    }
                });
            }

            function initializePartSelect($select) {
                if (!$select.length) {
                    return;
                }

                if ($select.hasClass('select2-hidden-accessible')) {
                    $select.select2('destroy');
                }

                $select.select2({
                    placeholder: $select.data('placeholder') || 'Select Part',
                    allowClear: Boolean($select.data('allow-clear')),
                    dropdownParent: $('body'),
                    width: '100%',
                    ajax: {
                        url: partOptionsUrl,
                        dataType: 'json',
                        delay: 250,
                        data: function(params) {
                            return {
                                q: params.term || '',
                                page: params.page || 1
                            };
                        },
                        processResults: function(data) {
                            return {
                                results: data.results || [],
                                pagination: data.pagination || {
                                    more: false
                                }
                            };
                        },
                        cache: true
                    }
                }).on('select2:open', function() {
                    $('body').css('overflow', 'hidden');
                }).on('select2:close', function() {
                    $('body').css('overflow', '');
                });

                preloadPartOptions($select);
            }

            function initializeSelect2(scope) {
                $(scope).find('.service-part-select').each(function() {
                    initializePartSelect($(this));
                });
            }

            function calculateRowTotal($row) {
                const qty = parseFloat($row.find('.service-qty').val()) || 0;
                const amount = parseFloat($row.find('.service-amount').val()) || 0;
                const total = (qty * amount).toFixed(2);

                $row.find('.service-total').val(total);
            }

            function getSelectedBank() {
                const selectedBankId = $('#bank_id').val();

                return banks.find(function(bank) {
                    return String(bank.id) === String(selectedBankId);
                }) || null;
            }

            function resolveVatPercentage() {
                const selectedBank = getSelectedBank();

                if (!selectedBank || !Number(selectedBank.is_vat)) {
                    return 0;
                }

                return parseFloat(selectedBank.vat) || 0;
            }

            function calculateAutoVat(baseAmount, vatPercentage) {
                return (baseAmount * vatPercentage) / 100;
            }

            function calculateGrandTotals() {
                let subTotal = 0;

                $('#serviceRowsBody .service-total').each(function() {
                    subTotal += parseFloat($(this).val()) || 0;
                });

                const initialDeposit = parseFloat($('#initial_deposit').val()) || 0;
                const discount = parseFloat($('#discount').val()) || 0;
                const vatPercentage = resolveVatPercentage();
                const taxableAmount = Math.max(subTotal - discount, 0);
                const vat = calculateAutoVat(taxableAmount, vatPercentage);
                const total = Math.max(taxableAmount + vat - initialDeposit, 0);

                $('#sub_total').val(subTotal.toFixed(2));
                $('#vat_percentage').val(vatPercentage.toFixed(2));
                $('#vatPercentageLabel').text(vatPercentage.toFixed(2));
                $('#total').val(total.toFixed(2));
                $('#vat').val(vat.toFixed(2));
            }

            function bindRowCalculations() {
                $('#serviceRowsBody').on('input', '.service-qty, .service-amount', function() {
                    const $row = $(this).closest('.serviceRow');
                    calculateRowTotal($row);
                    calculateGrandTotals();
                });
            }

            $('#addServiceRow').on('click', function() {
                const templateHtml = $('#serviceRowTemplate').html();
                const $row = $(templateHtml);

                $('#serviceRowsBody').append($row);
                initializeSelect2($row);
            });

            $('#serviceRowsBody').on('click', '.removeServiceRow', function() {
                if ($('#serviceRowsBody .serviceRow').length === 1) {
                    $(this).closest('.serviceRow').find('input, textarea').val('');
                    $(this).closest('.serviceRow').find('select').val('').trigger('change');
                    calculateRowTotal($(this).closest('.serviceRow'));
                    calculateGrandTotals();
                    return;
                }

                $(this).closest('.serviceRow').remove();
                calculateGrandTotals();
            });

            function populateBanks() {
                const websiteId = $('#website_id').val();
                const selectedBankId = $('#bank_id').data('selected') || $('#bank_id').val();
                const filteredBanks = banks.filter(function(bank) {
                    return String(bank.website_id) === String(websiteId);
                });
                const $bankSelect = $('#bank_id');

                $bankSelect.empty().append('<option value=""></option>');

                filteredBanks.forEach(function(bank) {
                    const isSelected = String(selectedBankId) === String(bank.id);
                    const option = new Option(bank.name, bank.id, isSelected, isSelected);
                    $bankSelect.append(option);
                });

                $bankSelect.trigger('change.select2');
                calculateGrandTotals();
            }

            $('#bank_id').on('change', function() {
                calculateGrandTotals();
            });

            $('#initial_deposit, #discount').on('input', function() {
                calculateGrandTotals();
            });

            $('#website_id').on('change', function() {
                $('#bank_id').data('selected', '');
                populateBanks();
            });

            $(document).on('ajax-form:success', function(event, form, response) {
                if (!$(form).closest('#partModal').length || !response?.data?.id) {
                    return;
                }

                $('#serviceRowsBody .service-part-select').each(function() {
                    const $select = $(this);

                    if ($select.find('option[value="' + response.data.id + '"]').length) {
                        return;
                    }

                    const newOption = new Option(response.data.text, response.data.id, false, false);
                    $select.append(newOption);
                });
            });

            $('#partModal').on('shown.bs.modal', function() {
                $('body').css('overflow', 'hidden');
            }).on('hidden.bs.modal', function() {
                $('body').css('overflow', '');
            });

            initializeCategorySelect();
            initializeSelect2(document);
            bindRowCalculations();
            populateBanks();

            $('#initial_deposit').val(parseFloat(calculationDefaults.initial_deposit || 0).toFixed(2));
            $('#discount').val(parseFloat(calculationDefaults.discount || 0).toFixed(2));

            $('#serviceRowsBody .serviceRow').each(function() {
                calculateRowTotal($(this));
            });

            calculateGrandTotals();
        });
    </script>
@endsection