@extends('adminlte::page')
@section('title', 'Yeni Toptancı Şablonu')

@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.index') }}" class="btn btn-outline-secondary mr-3">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="fw-bold mb-0">Yeni Toptancı Sipariş Şablonu</h2>
    </div>

    <form action="{{ route('supplier-order-templates.store') }}" method="POST" id="templateForm">
        @csrf

        {{-- Şablon Bilgileri --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header fw-bold bg-success text-white">
                <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"
                               placeholder="örn. Yayanlar Haftalık Şablonu" required
                               value="{{ old('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>
                            <option value="">Seçiniz...</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('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>
                            <option value="">Seçiniz...</option>
                            @foreach($suppliers as $supplier)
                                <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                    {{ $supplier->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Tür <span class="text-danger">*</span></label>
                        <select name="type" class="form-select form-control" required>
                            <option value="">Seçiniz...</option>
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}" {{ old('type') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- Ürün Ekleme --}}
        <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">

                {{-- Ürün Ekle Satırı --}}
                <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" disabled>
                            <option value="">Önce tedarikçi seçin...</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>

                {{-- Ürün Listesi --}}
                <table class="table table-hover" id="itemsTable">
                    <thead class="table-light">
                        <tr>
                            <th>Tedarikçi Ürünü</th>
                            <th>İç Ürün</th>
                            <th>Ambalaj</th>
                            <th>Varsayılan Miktar</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                        <tr id="emptyRow">
                            <td colspan="5" class="text-center text-muted py-4">
                                Önce tedarikçi seçin, ardından ürün ekleyin.
                            </td>
                        </tr>
                    </tbody>
                </table>

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

        <div class="d-flex justify-content-end gap-2">
            <a href="{{ route('supplier-order-templates.index') }}" class="btn btn-outline-secondary px-4 mr-5">
                İptal
            </a>
            <button type="submit" class="btn btn-success px-5 fw-bold">
                <i class="fas fa-save mr-2"></i> Kaydet
            </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 = [];
    const GET_PRODUCTS_URL = "{{ route('supplier-order-templates.get_products') }}";

    // Tedarikçi seçince ürünleri yükle
    $('#supplierSelect').on('change', function () {
        const supplierId = $(this).val();
        const productSelect = $('#addProductSelect');

        items = [];
        renderItems();

        if (!supplierId) {
            productSelect.html('<option value="">Önce tedarikçi seçin...</option>').prop('disabled', true);
            return;
        }

        productSelect.html('<option value="">Yükleniyor...</option>').prop('disabled', true);

        $.get(GET_PRODUCTS_URL, { 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}"
                                 data-price="${p.unit_price}">
                            ${p.name} (${p.product_name})
                         </option>`;
            });
            productSelect.html(html).prop('disabled', false);
        });
    });

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

        if (items.length === 0) {
            body.append('<tr id="emptyRow"><td colspan="5" 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><small class="text-muted">${item.product_name}</small></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;
        }
        if (qty < 0) {
            alert('Miktar 0 veya daha büyük olmalıdır.');
            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'),
            product_name:          selected.data('product-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