@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('order-templates.show', $orderTemplate->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('order-templates.update', $orderTemplate->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 me-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', $orderTemplate->name) }}">
                    </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>
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}" {{ $orderTemplate->type == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Sipariş Veren Şube <span class="text-danger">*</span></label>
                        <select name="from_branch_id" class="form-select form-control" required>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ $orderTemplate->from_branch_id == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }}  {{ $branch->type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Gönderen Şube <span class="text-danger">*</span></label>
                        <select name="to_branch_id" class="form-select form-control" required>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ $orderTemplate->to_branch_id == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }}  {{ $branch->type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <div class="form-check">
                            <input type="checkbox" name="is_active" id="isActive" class="form-check-input"
                                   {{ $orderTemplate->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 me-2"></i> Şablon Ürünleri
            </div>
            <div class="card-body">
                {{-- Ürün Ekle --}}
                <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">Ürün</label>
                        <select id="addProductSelect" class="form-select form-control">
                            <option value="">Ürün seçiniz...</option>
                            @foreach($products as $product)
                                <option value="{{ $product->id }}"
                                        data-name="{{ $product->name }}"
                                        data-unit="{{ optional($product->baseUnit)->symbol ?? '' }}">
                                    {{ $product->name }}
                                </option>
                            @endforeach
                        </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">
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="addItemBtn" class="btn btn-success w-100">
                            <i class="fas fa-plus me-1"></i> Ekle
                        </button>
                    </div>
                </div>

                <table class="table table-hover" id="itemsTable">
                    <thead class="table-light">
                        <tr>
                            <th>Ü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 gap-2">
            <button type="submit" class="btn btn-warning px-5 fw-bold">
                <i class="fas fa-save me-2"></i> Güncelle
            </button>
            <a href="{{ route('order-templates.show', $orderTemplate->id) }}" class="btn btn-outline-secondary px-4">
                İptal
            </a>
        </div>
    </form>
</div>
@endsection

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
    // Mevcut kalemleri yükle
    let items = @json($existingItems);

    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.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}][product_id]"      value="${item.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}">
            `);
        });
    }

    renderItems();

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

        if (!productSelect.val() || !packageSelect.val() || qty === undefined || isNaN(qty) || qty < 0) {
            alert('Lütfen ürün, ambalaj türü ve miktar giriniz.');
            return;
        }

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

        items.push({
            product_id:        productSelect.val(),
            product_name:      productSelect.find(':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