@extends('adminlte::page')
@section('title', 'Şablon Düzenle')

@section('content')
<div class="container-fluid pt-4">
    <div class="d-flex align-items-center mb-4 gap-3">
        <a href="{{ route('supplier-order-templates.show', $supplierOrderTemplate->id) }}" class="btn btn-outline-secondary mr-3">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="fw-bold mb-0">Şablon Düzenle</h2>
    </div>

    <form action="{{ route('supplier-order-templates.update', $supplierOrderTemplate->id) }}" method="POST" id="templateForm">
        @csrf
        @method('PUT')

        {{-- Şablon Bilgileri --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-bold bg-warning text-dark">
                <i class="fas fa-cog mr-2"></i> Şablon Bilgileri
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Şablon Adı <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control" required
                               value="{{ old('name', $supplierOrderTemplate->name) }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Şube <span class="text-danger">*</span></label>
                        <select name="branch_id" class="form-select form-control" required>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}"
                                    {{ $supplierOrderTemplate->branch_id == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }} ({{ $branch->type }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Tedarikçi <span class="text-danger">*</span></label>
                        <select name="supplier_id" id="supplierSelect" class="form-select form-control" required>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}"
                                    {{ $supplierOrderTemplate->supplier_id == $supplier->id ? 'selected' : '' }}>
                                    {{ $supplier->name }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-warning"><i class="fas fa-exclamation-triangle mr-1"></i>
                            Tedarikçi değiştirilirse ürün listesi sıfırlanır.
                        </small>
                    </div>
                    <div class="col-md-1">
                        <label class="form-label fw-bold">Tür</label>
                        <select name="type" class="form-select form-control" required>
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}"
                                    {{ $supplierOrderTemplate->type == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-1 d-flex align-items-end pb-4">
                        <div class="form-check">
                            <input type="checkbox" name="is_active" id="isActive" class="form-check-input"
                                   {{ $supplierOrderTemplate->is_active ? 'checked' : '' }}>
                            <label for="isActive" class="form-check-label fw-bold">Aktif</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Ürünler --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-bold">
                <i class="fas fa-boxes mr-2"></i> Şablon Ürünleri
            </div>
            <div class="card-body">
                <div class="row g-2 align-items-end mb-3 p-3 bg-light rounded">
                    <div class="col-md-5">
                        <label class="form-label fw-bold">Tedarikçi Ürünü</label>
                        <select id="addProductSelect" class="form-select form-control">
                            <option value="">Yükleniyor...</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Ambalaj Türü</label>
                        <select id="addPackageTypeSelect" class="form-select form-control">
                            <option value="">Seçiniz...</option>
                            @foreach($packageTypes as $pt)
                                <option value="{{ $pt->id }}" data-name="{{ $pt->name }}">{{ $pt->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Varsayılan Miktar</label>
                        <input type="number" id="addDefaultQty" class="form-control" min="0" step="0.01" placeholder="0">
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="addItemBtn" class="btn btn-success w-100">
                            <i class="fas fa-plus mr-1"></i> Ekle
                        </button>
                    </div>
                </div>

                <table class="table table-hover">
                    <thead class="table-light">
                        <tr>
                            <th>Tedarikçi Ürünü</th>
                            <th>Ambalaj</th>
                            <th>Varsayılan Miktar</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody"></tbody>
                </table>

                <div id="hiddenInputs"></div>
            </div>
        </div>

        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('supplier-order-templates.show', $supplierOrderTemplate->id) }}"
               class="btn btn-outline-secondary px-4 mr-5">İptal</a>
            <button type="submit" class="btn btn-warning px-5 fw-bold">
                <i class="fas fa-save mr-2"></i> Güncelle
            </button>
        </div>
    </form>
</div>
@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    let items          = @json($existingItems);
    const GET_PRODUCTS = "{{ route('supplier-order-templates.get_products') }}";
    const currentSupplierId = "{{ $supplierOrderTemplate->supplier_id }}";

    // Sayfa açılınca mevcut tedarikçinin ürünlerini yükle
    loadSupplierProducts(currentSupplierId, false);

    function loadSupplierProducts(supplierId, resetItems) {
        if (!supplierId) return;
        $.get(GET_PRODUCTS, { supplier_id: supplierId }, function (products) {
            let html = '<option value="">Ürün seçiniz...</option>';
            products.forEach(p => {
                html += `<option value="${p.id}"
                                 data-name="${p.name}"
                                 data-product-name="${p.product_name}">
                            ${p.name} (${p.product_name})
                         </option>`;
            });
            $('#addProductSelect').html(html).prop('disabled', false);
            if (resetItems) {
                items = [];
            }
            renderItems();
        });
    }

    $('#supplierSelect').on('change', function () {
        loadSupplierProducts($(this).val(), true);
    });

    function renderItems() {
        const body = $('#itemsBody');
        body.empty();

        if (items.length === 0) {
            body.append('<tr><td colspan="4" class="text-center text-muted py-4">Henüz ürün eklenmedi.</td></tr>');
        } else {
            items.forEach((item, index) => {
                body.append(`
                    <tr>
                        <td>${item.supplier_product_name}</td>
                        <td>${item.package_type_name}</td>
                        <td>
                            <input type="number" class="form-control form-control-sm qty-input"
                                   data-index="${index}" value="${item.default_quantity}"
                                   min="0" step="0.01" style="width:100px">
                        </td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-danger remove-btn" data-index="${index}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>`);
            });
        }
        renderHiddenInputs();
    }

    function renderHiddenInputs() {
        const container = $('#hiddenInputs');
        container.empty();
        items.forEach((item, index) => {
            container.append(`
                <input type="hidden" name="items[${index}][supplier_product_id]" value="${item.supplier_product_id}">
                <input type="hidden" name="items[${index}][package_type_id]"     value="${item.package_type_id}">
                <input type="hidden" name="items[${index}][default_quantity]"    value="${item.default_quantity}" class="hidden-qty" data-index="${index}">
            `);
        });
    }

    $('#addItemBtn').on('click', function () {
        const productSelect = $('#addProductSelect');
        const packageSelect = $('#addPackageTypeSelect');
        const qty           = parseFloat($('#addDefaultQty').val()) || 0;

        if (!productSelect.val() || !packageSelect.val()) {
            alert('Lütfen tedarikçi ürünü ve ambalaj türü seçiniz.');
            return;
        }

        const exists = items.find(i => i.supplier_product_id == productSelect.val() && i.package_type_id == packageSelect.val());
        if (exists) {
            alert('Bu ürün ve ambalaj kombinasyonu zaten ekli.');
            return;
        }

        const selected = productSelect.find(':selected');
        items.push({
            supplier_product_id:   productSelect.val(),
            supplier_product_name: selected.data('name'),
            package_type_id:       packageSelect.val(),
            package_type_name:     packageSelect.find(':selected').data('name'),
            default_quantity:      qty,
        });

        productSelect.val('');
        packageSelect.val('');
        $('#addDefaultQty').val('');
        renderItems();
    });

    $(document).on('change', '.qty-input', function () {
        const index = $(this).data('index');
        items[index].default_quantity = parseFloat($(this).val()) || 0;
        $(`.hidden-qty[data-index="${index}"]`).val(items[index].default_quantity);
    });

    $(document).on('click', '.remove-btn', function () {
        items.splice($(this).data('index'), 1);
        renderItems();
    });

    $('#templateForm').on('submit', function (e) {
        if (items.length === 0) {
            e.preventDefault();
            alert('En az bir ürün eklemelisiniz.');
        }
    });
});
</script>
@endsection