@extends('layouts.app')

@section('content')
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('supplier_invoices.create_new') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('dashboard', app('current_company')->uuid) }}" class="text-muted text-hover-primary">{{ __('common.home') ?? 'Anasayfa' }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('supplier-invoices.index', app('current_company')->uuid) }}" class="text-muted text-hover-primary">{{ __('supplier_invoices.title') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('supplier_invoices.create_new') }}</li>
            </ul>
        </div>
    </div>
</div>
<!--end::Toolbar-->

<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">

        <!-- Hatalar -->
        @if ($errors->any())
            <div class="alert alert-danger d-flex align-items-center p-5 mb-10">
                <i class="ki-duotone ki-shield-search fs-2hx text-danger me-4"><span class="path1"></span><span class="path2"></span></i>
                <div class="d-flex flex-column">
                    <h4 class="mb-1 text-danger">{{ __('common.errors_title') ?? 'Lütfen hataları düzeltin' }}</h4>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif

        <!-- Quick XML Upload Card -->
        <div class="card card-flush mb-10 border border-primary border-dashed">
            <div class="card-header pt-7">
                <h3 class="card-title fw-bold text-gray-900">
                    <i class="ki-outline ki-file-up fs-2 text-primary me-2"></i>
                    {{ __('supplier_invoices.upload_zone_title') }}
                </h3>
            </div>
            <div class="card-body pt-5">
                <div class="d-flex flex-column align-items-center justify-content-center p-10 border border-2 border-dashed border-gray-300 rounded bg-light-light" id="xml_drop_zone" style="cursor: pointer;">
                    <i class="ki-outline ki-document fs-3x text-primary mb-4"></i>
                    <p class="fs-6 fw-bold text-gray-800 mb-1">{{ __('supplier_invoices.upload_zone_desc') }}</p>
                    <span class="fs-7 text-gray-500">e-Fatura XML (.xml) veya PDF (.pdf) dosyasını seçin</span>
                </div>
                <input type="file" id="xml_file_input" class="d-none" accept=".xml,.pdf" />
                <div class="mt-3 d-none" id="upload_status">
                    <div class="alert alert-info d-flex align-items-center p-4">
                        <span class="spinner-border spinner-border-sm me-3 text-info"></span>
                        <span class="fs-6 fw-semibold text-gray-800">Dosya ayrıştırılıyor, lütfen bekleyin...</span>
                    </div>
                </div>
            </div>
        </div>

        <form action="{{ route('supplier-invoices.store', app('current_company')->uuid) }}" method="POST" id="invoice_form">
            @csrf

            <div class="card card-flush mb-10">
                <div class="card-header pt-7">
                    <h3 class="card-title fw-bold text-gray-900">1. {{ __('supplier_invoices.invoice') }} Bilgileri</h3>
                </div>
                <div class="card-body pt-5">
                    <div class="row g-5 mb-8">
                        <!-- Supplier Select -->
                        <div class="col-md-6">
                            <label class="required fs-6 fw-semibold form-label mb-2">{{ __('suppliers.select_or_new') }}</label>
                            <select name="supplier_id" id="supplier_select" class="form-select form-select-solid" data-control="select2">
                                <option value="">{{ __('suppliers.select_or_new') }}</option>
                                @foreach($suppliers as $supplier)
                                    <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>{{ $supplier->name }}</option>
                                @endforeach
                                <option value="new" {{ old('supplier_id') === 'new' ? 'selected' : '' }}>{{ __('suppliers.new_supplier_option') }}</option>
                            </select>
                        </div>

                        <!-- Currency -->
                        <div class="col-md-3">
                            <label class="required fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.currency') }}</label>
                            <select name="currency_id" id="currency_select" class="form-select form-select-solid" data-control="select2" data-hide-search="true">
                                @foreach($currencies as $currency)
                                    <option value="{{ $currency->id }}" data-code="{{ $currency->short_code }}" {{ old('currency_id', app('current_company')->currency_id) == $currency->id ? 'selected' : '' }}>{{ $currency->name }} ({{ $currency->short_code }})</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Exchange Rate -->
                        <div class="col-md-3">
                            <label class="required fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.exchange_rate') }}</label>
                            <input type="number" name="exchange_rate" id="exchange_rate" class="form-control form-control-solid" step="0.000001" min="0.000001" value="{{ old('exchange_rate', '1.000000') }}" required />
                        </div>
                    </div>

                    <!-- New Supplier Form (Collapse) -->
                    <div id="new_supplier_form_container" class="{{ old('supplier_id') === 'new' ? '' : 'd-none' }} border p-5 rounded bg-light mb-8">
                        <h4 class="fw-bold text-gray-900 mb-4">{{ __('suppliers.new_supplier_form') }}</h4>
                        <div class="row g-5 mb-5">
                            <div class="col-md-6">
                                <label class="required fs-7 fw-semibold form-label mb-1">{{ __('suppliers.name') }}</label>
                                <input type="text" name="new_supplier_name" id="new_supplier_name" class="form-control form-control-solid form-control-sm" value="{{ old('new_supplier_name') }}" />
                            </div>
                            <div class="col-md-6">
                                <label class="fs-7 fw-semibold form-label mb-1">{{ __('suppliers.phone') }}</label>
                                <input type="text" name="new_supplier_phone" id="new_supplier_phone" class="form-control form-control-solid form-control-sm" value="{{ old('new_supplier_phone') }}" />
                            </div>
                        </div>
                        <div class="row g-5 mb-5">
                            <div class="col-md-6">
                                <label class="fs-7 fw-semibold form-label mb-1">{{ __('suppliers.email') }}</label>
                                <input type="email" name="new_supplier_email" id="new_supplier_email" class="form-control form-control-solid form-control-sm" value="{{ old('new_supplier_email') }}" />
                            </div>
                            <div class="col-md-3">
                                <label class="fs-7 fw-semibold form-label mb-1">{{ __('suppliers.tax_office') }}</label>
                                <input type="text" name="new_supplier_tax_office" id="new_supplier_tax_office" class="form-control form-control-solid form-control-sm" value="{{ old('new_supplier_tax_office') }}" />
                            </div>
                            <div class="col-md-3">
                                <label class="fs-7 fw-semibold form-label mb-1">{{ __('suppliers.tax_number') }}</label>
                                <input type="text" name="new_supplier_tax_number" id="new_supplier_tax_number" class="form-control form-control-solid form-control-sm" value="{{ old('new_supplier_tax_number') }}" />
                            </div>
                        </div>
                        <div class="fv-row">
                            <label class="fs-7 fw-semibold form-label mb-1">{{ __('suppliers.address') }}</label>
                            <textarea name="new_supplier_address" id="new_supplier_address" class="form-control form-control-solid form-control-sm" rows="2">{{ old('new_supplier_address') }}</textarea>
                        </div>
                    </div>

                    <div class="row g-5 mb-8">
                        <div class="col-md-4">
                            <label class="required fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.invoice_number') }}</label>
                            <input type="text" name="invoice_number" id="invoice_number" class="form-control form-control-solid" value="{{ old('invoice_number') }}" required />
                        </div>
                        <div class="col-md-4">
                            <label class="required fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.invoice_date') }}</label>
                            <input type="date" name="invoice_date" id="invoice_date" class="form-control form-control-solid" value="{{ old('invoice_date', date('Y-m-d')) }}" required />
                        </div>
                        <div class="col-md-4">
                            <label class="fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.due_date') }}</label>
                            <input type="date" name="due_date" id="due_date" class="form-control form-control-solid" value="{{ old('due_date') }}" />
                        </div>
                    </div>

                    <div class="row g-5 mb-8">
                        <div class="col-md-6">
                            <label class="fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.ettn') }}</label>
                            <input type="text" name="ettn" id="invoice_ettn" class="form-control form-control-solid" value="{{ old('ettn') }}" />
                        </div>
                    </div>
                </div>
            </div>

            <!-- Items Repeater -->
            <div class="card card-flush mb-10">
                <div class="card-header pt-7">
                    <h3 class="card-title fw-bold text-gray-900">2. {{ __('supplier_invoices.items_details') }}</h3>
                </div>
                <div class="card-body pt-5">
                    <div class="table-responsive">
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="items_table">
                            <thead>
                                <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                    <th class="min-w-200px">{{ __('supplier_invoices.item_name') }}</th>
                                    <th>{{ __('supplier_invoices.item_qty') }}</th>
                                    <th>{{ __('supplier_invoices.item_unit') }}</th>
                                    <th>{{ __('supplier_invoices.item_price') }}</th>
                                    <th>{{ __('supplier_invoices.item_discount') }}</th>
                                    <th>{{ __('supplier_invoices.item_tax') }}</th>
                                    <th>{{ __('supplier_invoices.item_total') }}</th>
                                    <th class="text-end">#</th>
                                </tr>
                            </thead>
                            <tbody id="items_tbody">
                                <!-- Dynamic Rows -->
                            </tbody>
                        </table>
                    </div>

                    <button type="button" class="btn btn-light-primary btn-sm mt-3" id="add_row_btn">
                        <i class="ki-outline ki-plus fs-4 me-1"></i>
                        {{ __('supplier_invoices.add_row') }}
                    </button>

                    <!-- Financial Summary Panel -->
                    <div class="d-flex justify-content-end mt-10">
                        <div class="w-100 w-md-400px">
                            <div class="card bg-light p-6">
                                <div class="d-flex flex-stack mb-3">
                                    <span class="fw-semibold text-gray-600 fs-6">{{ __('supplier_invoices.sub_total') }}:</span>
                                    <span class="fw-bold text-gray-800 fs-6" id="summary_sub_total">0.00</span>
                                </div>
                                <div class="d-flex flex-stack mb-3">
                                    <span class="fw-semibold text-gray-600 fs-6">{{ __('supplier_invoices.tax_total') }}:</span>
                                    <span class="fw-bold text-gray-800 fs-6" id="summary_tax_total">0.00</span>
                                </div>
                                <div class="d-flex flex-stack border-top border-gray-300 pt-3">
                                    <span class="fw-bold text-gray-800 fs-5">{{ __('supplier_invoices.total_amount') }}:</span>
                                    <span class="fw-bold text-primary fs-5" id="summary_total_amount">0.00</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notes & Submission -->
            <div class="card card-flush mb-10">
                <div class="card-body pt-5">
                    <div class="fv-row mb-8">
                        <label class="fs-6 fw-semibold form-label mb-2">{{ __('supplier_invoices.note') }}</label>
                        <textarea name="note" class="form-control form-control-solid" rows="3">{{ old('note') }}</textarea>
                    </div>

                    <div class="d-flex justify-content-end border-top pt-6">
                        <a href="{{ route('supplier-invoices.index', app('current_company')->uuid) }}" class="btn btn-light me-3">{{ __('common.cancel') ?? 'İptal' }}</a>
                        <button type="submit" class="btn btn-primary">{{ __('common.save') ?? 'Kaydet' }}</button>
                    </div>
                </div>
            </div>
        </form>

    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let rowIndex = 0;

    // Open file selector when clicking XML upload zone
    $('#xml_drop_zone').on('click', function() {
        $('#xml_file_input').click();
    });

    // File drop support
    $('#xml_drop_zone').on('dragover', function(e) {
        e.preventDefault();
        $(this).addClass('bg-light-primary');
    });
    $('#xml_drop_zone').on('dragleave', function() {
        $(this).removeClass('bg-light-primary');
    });
    $('#xml_drop_zone').on('drop', function(e) {
        e.preventDefault();
        $(this).removeClass('bg-light-primary');
        let files = e.originalEvent.dataTransfer.files;
        if (files.length > 0) {
            handleXmlFile(files[0]);
        }
    });

    $('#xml_file_input').on('change', function() {
        if (this.files.length > 0) {
            handleXmlFile(this.files[0]);
        }
    });

    function handleXmlFile(file) {
        let formData = new FormData();
        formData.append('file', file);
        formData.append('_token', '{{ csrf_token() }}');

        $('#upload_status').removeClass('d-none');

        $.ajax({
            url: "{{ route('supplier-invoices.parse-file', app('current_company')->uuid) }}",
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                $('#upload_status').addClass('d-none');
                if (response.success) {
                    toastr.success("{{ __('supplier_invoices.upload_success') }}");
                    fillFormWithXmlData(response.data);
                } else {
                    toastr.error(response.message || "{{ __('supplier_invoices.upload_error') }}");
                }
            },
            error: function(xhr) {
                $('#upload_status').addClass('d-none');
                let msg = xhr.responseJSON ? xhr.responseJSON.message : "{{ __('supplier_invoices.upload_error') }}";
                toastr.error(msg);
            }
        });
    }

    function fillFormWithXmlData(data) {
        // Set values
        $('#invoice_number').val(data.invoice_number);
        $('#invoice_date').val(data.invoice_date);
        $('#due_date').val(data.due_date);
        $('#invoice_ettn').val(data.ettn);

        // Supplier selection
        if (data.supplier_id && data.supplier_id !== 'new') {
            $('#supplier_select').val(data.supplier_id).trigger('change');
            $('#new_supplier_form_container').addClass('d-none');
        } else {
            $('#supplier_select').val('new').trigger('change');
            $('#new_supplier_form_container').removeClass('d-none');
            $('#new_supplier_name').val(data.new_supplier.name);
            $('#new_supplier_phone').val(data.new_supplier.phone);
            $('#new_supplier_email').val(data.new_supplier.email);
            $('#new_supplier_tax_office').val(data.new_supplier.tax_office);
            $('#new_supplier_tax_number').val(data.new_supplier.tax_number);
            $('#new_supplier_address').val(data.new_supplier.address);
        }

        // Clear existing items and add parsed items
        $('#items_tbody').empty();
        rowIndex = 0;
        
        data.items.forEach(function(item) {
            addRow(item);
        });

        recalculateTotals();
    }

    // Toggle New Supplier Form
    $('#supplier_select').on('change', function() {
        if ($(this).val() === 'new') {
            $('#new_supplier_form_container').removeClass('d-none');
            $('#new_supplier_name').prop('required', true);
        } else {
            $('#new_supplier_form_container').addClass('d-none');
            $('#new_supplier_name').prop('required', false);
        }
    });

    const vatRates = @json(app('current_company')->vat_rates);

    // Add row function
    function addRow(data = {}) {
        let name = data.name || '';
        let desc = data.description || '';
        let qty = data.quantity || 1;
        let unit = data.unit || 'm';
        let price = data.unit_price || 0;
        let disc = data.discount_rate || 0;
        let tax = data.tax_rate || 10;
        let total = data.total_amount || 0;

        let taxOptions = '';
        vatRates.forEach(function(rate) {
            let selected = (parseFloat(rate) === parseFloat(tax)) ? 'selected' : '';
            taxOptions += `<option value="${rate}" ${selected}>%${rate}</option>`;
        });
        
        // If the loaded tax rate is not in default options, append it dynamically
        if (!vatRates.map(Number).includes(parseFloat(tax))) {
            taxOptions += `<option value="${tax}" selected>%${tax}</option>`;
        }

        let html = `
            <tr class="item-row" data-index="${rowIndex}">
                <td>
                    <input type="text" name="items[${rowIndex}][name]" class="form-control form-control-solid form-control-sm" value="${name}" required />
                    <input type="text" name="items[${rowIndex}][description]" class="form-control form-control-solid form-control-sm mt-1 fs-7" placeholder="{{ __('supplier_invoices.item_desc') }}" value="${desc}" />
                </td>
                <td>
                    <input type="number" name="items[${rowIndex}][quantity]" class="form-control form-control-solid form-control-sm w-80px item-qty" step="0.01" min="0.01" value="${qty}" required />
                </td>
                <td>
                    <input type="text" name="items[${rowIndex}][unit]" class="form-control form-control-solid form-control-sm w-70px" value="${unit}" />
                </td>
                <td>
                    <input type="number" name="items[${rowIndex}][unit_price]" class="form-control form-control-solid form-control-sm w-120px item-price" step="0.01" min="0" value="${price}" required />
                </td>
                <td>
                    <input type="number" name="items[${rowIndex}][discount_rate]" class="form-control form-control-solid form-control-sm w-80px item-disc" step="0.01" min="0" max="100" value="${disc}" />
                </td>
                <td>
                    <select name="items[${rowIndex}][tax_rate]" class="form-select form-select-solid form-select-sm w-110px item-tax" data-control="select2" data-tags="true" required>
                        ${taxOptions}
                    </select>
                </td>
                <td>
                    <span class="form-control form-control-solid form-control-sm w-120px bg-light font-monospace fw-bold row-total">${total.toFixed(2)}</span>
                </td>
                <td class="text-end">
                    <button type="button" class="btn btn-icon btn-light-danger btn-sm delete-row-btn">
                        <i class="ki-outline ki-trash fs-4"></i>
                    </button>
                </td>
            </tr>
        `;
        $('#items_tbody').append(html);
        
        // Initialize select2 on the newly added row
        $(`#items_tbody tr[data-index="${rowIndex}"] [data-control="select2"]`).select2({
            tags: true,
            createTag: function (params) {
                // Ensure only numbers can be added as custom tags
                var term = $.trim(params.term);
                if (term === '' || isNaN(term)) {
                    return null;
                }
                return {
                    id: term,
                    text: '%' + term,
                    newTag: true
                }
            }
        });

        rowIndex++;
    }

    // Add first row on init
    @if(old('items'))
        @foreach(old('items') as $oldItem)
            addRow({
                name: "{{ $oldItem['name'] }}",
                description: "{{ $oldItem['description'] ?? '' }}",
                quantity: {{ $oldItem['quantity'] }},
                unit: "{{ $oldItem['unit'] ?? '' }}",
                unit_price: {{ $oldItem['unit_price'] }},
                discount_rate: {{ $oldItem['discount_rate'] ?? 0 }},
                tax_rate: {{ $oldItem['tax_rate'] ?? 10 }},
            });
        @endforeach
    @else
        addRow();
    @endif
    recalculateTotals();

    // Event delegation
    $('#add_row_btn').on('click', function() {
        addRow();
    });

    $(document).on('click', '.delete-row-btn', function() {
        if ($('#items_tbody tr').length > 1) {
            $(this).closest('tr').remove();
            recalculateTotals();
        } else {
            toastr.warning("Faturada en az bir satır bulunmalıdır.");
        }
    });

    $(document).on('input change', '.item-qty, .item-price, .item-disc, .item-tax', function() {
        let row = $(this).closest('tr');
        calculateRowTotal(row);
        recalculateTotals();
    });

    function calculateRowTotal(row) {
        let qty = parseFloat(row.find('.item-qty').val()) || 0;
        let price = parseFloat(row.find('.item-price').val()) || 0;
        let disc = parseFloat(row.find('.item-disc').val()) || 0;
        let tax = parseFloat(row.find('.item-tax').val()) || 0;

        let sub = qty * price;
        let discAmt = sub * (disc / 100);
        let taxable = sub - discAmt;
        let taxAmt = taxable * (tax / 100);
        let total = taxable + taxAmt;

        row.find('.row-total').text(total.toFixed(2));
    }

    function recalculateTotals() {
        let subTotal = 0;
        let taxTotal = 0;
        let grandTotal = 0;

        $('#items_tbody tr').each(function() {
            let qty = parseFloat($(this).find('.item-qty').val()) || 0;
            let price = parseFloat($(this).find('.item-price').val()) || 0;
            let disc = parseFloat($(this).find('.item-disc').val()) || 0;
            let tax = parseFloat($(this).find('.item-tax').val()) || 0;

            let sub = qty * price;
            let discAmt = sub * (disc / 100);
            let taxable = sub - discAmt;
            let taxAmt = taxable * (tax / 100);
            let total = taxable + taxAmt;

            subTotal += taxable;
            taxTotal += taxAmt;
            grandTotal += total;

            $(this).find('.row-total').text(total.toFixed(2));
        });

        let cur = $('#currency_select option:selected').data('code') || 'TRY';

        $('#summary_sub_total').text(subTotal.toFixed(2) + ' ' + cur);
        $('#summary_tax_total').text(taxTotal.toFixed(2) + ' ' + cur);
        $('#summary_total_amount').text(grandTotal.toFixed(2) + ' ' + cur);
    }

    $('#currency_select').on('change', function() {
        recalculateTotals();
    });

    let duplicateChecked = false;
    $('#invoice_form').on('submit', function(e) {
        if (duplicateChecked) {
            return true;
        }

        e.preventDefault();

        let supplierId = $('#supplier_select').val();
        let invoiceNumber = $('#invoice_number').val();

        if (!invoiceNumber || !supplierId || supplierId === 'new') {
            duplicateChecked = true;
            $('#invoice_form').submit();
            return;
        }

        $.ajax({
            url: "{{ route('supplier-invoices.check-duplicate', app('current_company')->uuid) }}",
            type: "GET",
            data: {
                supplier_id: supplierId,
                invoice_number: invoiceNumber
            },
            success: function(response) {
                if (response.exists) {
                    Swal.fire({
                        title: 'Aynı Fatura Mevcut!',
                        text: 'Sistemde bu tedarikçiye ait aynı fatura numarası ile kayıtlı bir fatura zaten bulunuyor. Yine de kaydetmek istiyor musunuz?',
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Evet, Kaydet',
                        cancelButtonText: 'İptal Et'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            duplicateChecked = true;
                            $('#invoice_form').submit();
                        }
                    });
                } else {
                    duplicateChecked = true;
                    $('#invoice_form').submit();
                }
            },
            error: function() {
                duplicateChecked = true;
                $('#invoice_form').submit();
            }
        });
    });
});
</script>
@endpush