@extends('adminlte::page')
@section('title', 'Sipariş Hazırla #' . $order->id)

@section('content')
@php
    $typeColors = ['daily' => '#27ae60', 'weekly' => '#2980b9', 'manual' => '#8e44ad'];
    $color      = $typeColors[$order->type] ?? '#e67e22';
    $status     = $statuses[$order->status] ?? ['label' => $order->status, 'badge' => 'secondary'];
@endphp

<style>
.prepare-header {
    background: linear-gradient(135deg, {{ $color }}, {{ $color }}bb);
    border-radius: 16px;
    color: white;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}
.item-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 1rem;
    overflow: hidden;
    background: white;
}
.item-card-header {
    background: #f8f9fa;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.item-card-body {
    padding: 1rem 1.2rem;
}
.requested-badge {
    background: #fff3cd;
    color: #856404;
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #ffc107;
}
.lot-row {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.lot-select {
    min-width: 200px;
    flex: 1;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    padding: 0.4rem 0.6rem;
}
.lot-select:focus { border-color: {{ $color }}; outline: none; }
.lot-input {
    width: 100px;
    border-radius: 8px;
    border: 2px solid #dee2e6;
    padding: 0.4rem 0.6rem;
    text-align: center;
}
.lot-input:focus { border-color: {{ $color }}; outline: none; }
.add-lot-btn {
    background: white;
    border: 2px dashed {{ $color }};
    color: {{ $color }};
    border-radius: 8px;
    padding: 0.4rem 1rem;
    cursor: pointer;
    font-size: 0.85rem;
    width: 100%;
    transition: all 0.15s;
}
.add-lot-btn:hover { background: {{ $color }}15; }
.remove-lot-btn {
    background: none;
    border: none;
    color: #dc3545;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.remove-lot-btn:hover { background: #dc354515; }
.submit-bar {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 2px solid #e9ecef;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
    border-radius: 0 0 12px 12px;
}
.fifo-tag {
    background: #d4edda;
    color: #155724;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 600;
}
</style>

<div class="container-fluid pt-3" style="max-width: 920px;">

    {{-- Başlık --}}
    <div class="prepare-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('prepare-orders.index') }}"
               class="btn btn-sm text-white mr-3"
               style="background: rgba(255,255,255,0.2); border: none; border-radius: 8px;">
                <i class="fas fa-arrow-left"></i>
            </a>
            <div>
                <div class="fw-bold" style="font-size: 1.3rem;">
                    Sipariş Hazırla #{{ $order->id }}
                </div>
                <small style="opacity: 0.85;">
                    <i class="fas fa-store mr-1"></i>
                    {{ optional($order->fromBranch)->name }}
                    <i class="fas fa-arrow-right mx-2"></i>
                    {{ optional($order->toBranch)->name }}
                    · {{ $order->order_date?->format('d.m.Y') }}
                </small>
            </div>
        </div>
        <span class="badge bg-{{ $status['badge'] }}"
              style="font-size: 0.9rem; padding: 0.5rem 1rem;">
            {{ $status['label'] }}
        </span>
    </div>

    @if(session('error'))
        <div class="alert alert-danger mb-3">{{ session('error') }}</div>
    @endif

    @if($order->note)
        <div class="alert alert-light border mb-3" style="border-radius: 10px;">
            <i class="fas fa-sticky-note mr-2 text-muted"></i> {{ $order->note }}
        </div>
    @endif

    <form action="{{ route('prepare-orders.send', ['order' => $order->id]) }}" method="POST" id="prepareForm">
        @csrf

        @foreach($order->items as $itemIndex => $item)
        @php
            $lots       = $productLots[$item->product_id] ?? collect();
            $alreadySent= $item->quantity_sent_kg > 0;
        @endphp
        <div class="item-card" id="item-card-{{ $itemIndex }}">
            <div class="item-card-header">
                <div class="d-flex align-items-center gap-2">
                    <span class="fw-bold" style="font-size: 1rem;">
                        {{ optional($item->product)->name }}
                    </span>
                    <span class="requested-badge">
                        <i class="fas fa-info-circle mr-1"></i>
                        İstenen: {{ $item->quantity_ordered }} {{ optional($item->packageType)->name }}
                        @if($item->quantity_ordered_kg)
                            (≈ {{ number_format($item->quantity_ordered_kg, 1) }} kg)
                        @endif
                    </span>
                    @if($alreadySent)
                        <span class="badge bg-info ml-1">
                            Önceki: {{ number_format($item->quantity_sent_kg, 1) }} kg gönderildi
                        </span>
                    @endif
                </div>
                @if($lots->isEmpty())
                    <span class="badge bg-danger">Stok Yok</span>
                @else
                    <span class="text-muted" style="font-size: 0.8rem;">
                        Toplam: {{ number_format($lots->sum('current_total_quantity'), 1) }} kg stok
                    </span>
                @endif
            </div>

            <input type="hidden" name="items[{{ $itemIndex }}][order_item_id]" value="{{ $item->id }}">

            <div class="item-card-body">
                @if($lots->isEmpty())
                    <div class="text-muted text-center py-2">
                        <i class="fas fa-exclamation-triangle mr-1 text-warning"></i>
                        Bu ürün için stokta lot bulunamadı.
                    </div>
                @else
                    {{-- Lot satırları --}}
                    <div class="lot-rows" id="lot-rows-{{ $itemIndex }}">
                        {{-- İlk lot satırı varsayılan olarak FIFO --}}
                        @php $firstLot = $lots->first(); @endphp
                        <div class="lot-row" data-item="{{ $itemIndex }}" data-lot-index="0">
                            <div style="min-width: 180px; flex: 2;">
                                <select class="lot-select lot-selector"
                                        name="items[{{ $itemIndex }}][lots][0][lot_id]"
                                        data-item="{{ $itemIndex }}" data-lot-index="0">
                                    @foreach($lots as $li => $lot)
                                        <option value="{{ $lot->id }}"
                                                data-kg="{{ $lot->current_total_quantity }}"
                                                data-pkg="{{ $lot->current_package_count }}"
                                                data-pkg-type="{{ $lot->package_type_id }}"
                                                data-kg-per-pkg="{{ $lot->current_package_count > 0 ? round($lot->current_total_quantity / $lot->current_package_count, 4) : 0 }}"
                                                {{ $li === 0 ? 'selected' : '' }}>
                                            @if($li === 0)<span class="fifo-tag">FIFO</span> @endif
                                            {{ $lot->lot_number }}
                                            · {{ optional($lot->packageType)->name }}
                                            · {{ number_format($lot->current_total_quantity, 1) }} kg
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden"
                                   name="items[{{ $itemIndex }}][lots][0][package_type_id]"
                                   value="{{ $firstLot->package_type_id }}"
                                   class="pkg-type-input">
                            <div>
                                <label style="font-size:0.75rem; color:#6c757d; display:block;">Çuval</label>
                                <input type="number" class="lot-input pkg-input"
                                       name="items[{{ $itemIndex }}][lots][0][package_count]"
                                       min="0" step="0.01" value="0"
                                       data-item="{{ $itemIndex }}" data-lot-index="0">
                            </div>
                            <div>
                                <label style="font-size:0.75rem; color:#6c757d; display:block;">Miktar (kg)</label>
                                <input type="number" class="lot-input kg-input"
                                       name="items[{{ $itemIndex }}][lots][0][quantity_kg]"
                                       min="0" step="0.0001" value="0"
                                       data-item="{{ $itemIndex }}" data-lot-index="0">
                            </div>
                            <div style="min-width:60px; font-size:0.8rem; color:#6c757d; padding-top:1.2rem;">
                                Maks: <strong class="max-kg">{{ number_format($firstLot->current_total_quantity, 1) }}</strong> kg
                            </div>
                            <button type="button" class="remove-lot-btn" style="display:none;">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Lot ekle --}}
                    <button type="button" class="add-lot-btn mt-2"
                            data-item="{{ $itemIndex }}"
                            data-branch="{{ $order->to_branch_id }}"
                            data-product="{{ $item->product_id }}">
                        <i class="fas fa-plus mr-1"></i> Başka Lot Ekle
                    </button>

                    {{-- Lot şablonu (JS için) --}}
                    <template id="lot-template-{{ $itemIndex }}">
                        <div class="lot-row" data-item="{{ $itemIndex }}">
                            <div style="min-width: 180px; flex: 2;">
                                <select class="lot-select lot-selector"
                                        name="items[{{ $itemIndex }}][lots][0][lot_id]"
                                        data-item="{{ $itemIndex }}">
                                    @foreach($lots as $li => $lot)
                                        <option value="{{ $lot->id }}"
                                                data-kg="{{ $lot->current_total_quantity }}"
                                                data-pkg="{{ $lot->current_package_count }}"
                                                data-pkg-type="{{ $lot->package_type_id }}"
                                                data-kg-per-pkg="{{ $lot->current_package_count > 0 ? round($lot->current_total_quantity / $lot->current_package_count, 4) : 0 }}">
                                            @if($li === 0)FIFO · @endif
                                            {{ $lot->lot_number }}
                                            · {{ optional($lot->packageType)->name }}
                                            · {{ number_format($lot->current_total_quantity, 1) }} kg
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" class="pkg-type-input"
                                   name="items[{{ $itemIndex }}][lots][0][package_type_id]"
                                   value="{{ $firstLot->package_type_id }}">
                            <div>
                                <label style="font-size:0.75rem; color:#6c757d; display:block;">Çuval</label>
                                <input type="number" class="lot-input pkg-input"
                                       name="items[{{ $itemIndex }}][lots][0][package_count]"
                                       min="0" step="0.01" value="0">
                            </div>
                            <div>
                                <label style="font-size:0.75rem; color:#6c757d; display:block;">Miktar (kg)</label>
                                <input type="number" class="lot-input kg-input"
                                       name="items[{{ $itemIndex }}][lots][0][quantity_kg]"
                                       min="0" step="0.0001" value="0">
                            </div>
                            <div style="min-width:60px; font-size:0.8rem; color:#6c757d; padding-top:1.2rem;">
                                Maks: <strong class="max-kg">{{ number_format($firstLot->current_total_quantity, 1) }}</strong> kg
                            </div>
                            <button type="button" class="remove-lot-btn">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </template>
                @endif
            </div>
        </div>
        @endforeach

        <div class="submit-bar shadow-sm mt-3" style="border-radius: 12px;">
            <div class="text-muted" style="font-size: 0.9rem;">
                <i class="fas fa-info-circle mr-1"></i>
                Miktar girilmeyen ürünler gönderilmez.
            </div>
            <div class="d-flex gap-2">
                <a href="{{ route('prepare-orders.index') }}" class="btn btn-outline-secondary">
                    Geri
                </a>
                <button type="submit" class="btn fw-bold px-4"
                        style="background: {{ $color }}; color: white; border: none; border-radius: 8px;">
                    <i class="fas fa-paper-plane mr-2"></i> Gönder
                </button>
            </div>
        </div>
    </form>
</div>

@section('js')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {

    // Lot seçilince max kg güncelle
    $(document).on('change', '.lot-selector', function () {
        const row      = $(this).closest('.lot-row');
        const selected = $(this).find(':selected');
        const maxKg    = parseFloat(selected.data('kg')) || 0;
        const pkgType  = selected.data('pkg-type');

        row.find('.max-kg').text(maxKg.toFixed(1));
        row.find('.pkg-type-input').val(pkgType);
        row.find('.kg-input').attr('max', maxKg);
    });

    // Çuval girince kg otomatik hesapla
    $(document).on('input', '.pkg-input', function () {
        const row      = $(this).closest('.lot-row');
        const selected = row.find('.lot-selector :selected');
        const kgPerPkg = parseFloat(selected.data('kg-per-pkg')) || 0;
        const count    = parseFloat($(this).val()) || 0;
        if (kgPerPkg > 0) {
            row.find('.kg-input').val((count * kgPerPkg).toFixed(4));
        }
    });

    // Lot ekle butonu
    $(document).on('click', '.add-lot-btn', function () {
        const itemIndex = $(this).data('item');
        const template  = document.getElementById('lot-template-' + itemIndex);
        const clone     = template.content.cloneNode(true);
        const lotRows   = document.getElementById('lot-rows-' + itemIndex);
        const lotIndex  = lotRows.querySelectorAll('.lot-row').length;

        // Input name'lerini güncelle
        clone.querySelectorAll('[name], [data-item]').forEach(el => {
            if (el.name) {
                el.name = el.name
                    .replace(/items\[\d+\]\[lots\]\[\d+\]/, `items[${itemIndex}][lots][${lotIndex}]`);
            }
        });

        lotRows.appendChild(clone);

        // İlk satırda sil butonu gizli, yenilerde görünür
        lotRows.querySelectorAll('.lot-row').forEach((row, i) => {
            row.querySelector('.remove-lot-btn').style.display = i === 0 ? 'none' : 'inline';
        });
    });

    // Lot kaldır
    $(document).on('click', '.remove-lot-btn', function () {
        $(this).closest('.lot-row').remove();
    });

    // Form gönder — name'leri yeniden indeksle
    $('#prepareForm').on('submit', function () {
        document.querySelectorAll('[id^="lot-rows-"]').forEach(rowsContainer => {
            const itemIndex = rowsContainer.id.replace('lot-rows-', '');
            rowsContainer.querySelectorAll('.lot-row').forEach((row, lotIndex) => {
                row.querySelectorAll('[name]').forEach(el => {
                    el.name = el.name.replace(
                        /items\[(\d+)\]\[lots\]\[(\d+)\]/,
                        `items[${itemIndex}][lots][${lotIndex}]`
                    );
                });
            });
        });
    });
});
</script>
@endsection
@endsection