@extends('adminlte::page')
@section('title', 'Yeni Sipariş Şablonu')

@section('content')
<div class="container-fluid pt-4">
    <div class="d-flex align-items-center mb-4 gap-3">
        <a href="{{ route('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 Sipariş Şablonu</h2>
    </div>

    <form action="{{ route('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 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"
                               placeholder="örn. Mağaza A Günlük Şablonu" required
                               value="{{ old('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>
                            <option value="">Seçiniz...</option>
                            @foreach($types as $value => $label)
                                <option value="{{ $value }}" {{ old('type') == $value ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <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>
                            <option value="">Seçiniz...</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('from_branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }} {{ $branch->type }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <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>
                            <option value="">Seçiniz...</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}" {{ old('to_branch_id') == $branch->id ? 'selected' : '' }}>
                                    {{ $branch->name }} {{ $branch->type }}
                                </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 me-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">Ü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" placeholder="0">
                    </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>

                {{-- Ürün Listesi --}}
                <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">
                        <tr id="emptyRow">
                            <td colspan="4" class="text-center text-muted py-4">
                                Henüz ürün eklenmedi.
                            </td>
                        </tr>
                    </tbody>
                </table>

                {{-- Hidden inputs - form submit için --}}
                <div id="hiddenInputs"></div>
            </div>
        </div>

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

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

        if (items.length === 0) {
            body.append('<tr id="emptyRow"><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 w-auto d-inline qty-input"
                                   data-index="${index}" value="${item.default_quantity}" min="0" step="0.01"
                                   style="width:100px!important">
                        </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}">
            `);
        });
    }

    // Ürün Ekle
    $('#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;
        }

        // Aynı ürün + ambalaj kombinasyonu varsa ekleme
        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();
    });

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

    // Ürün sil
    $(document).on('click', '.remove-btn', function () {
        const index = $(this).data('index');
        items.splice(index, 1);
        renderItems();
    });

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