@extends('adminlte::page')
@section('title', 'Yeni Stok Transferi')

@section('content')
<div class="container-fluid pt-4">
    <div class="d-flex align-items-center mb-4 gap-3">
        <a href="{{ route('stock-transfers.index') }}" class="btn btn-outline-secondary mr-3">
            <i class="fas fa-arrow-left"></i>
        </a>
        <h2 class="fw-bold mb-0">Yeni Stok Transferi</h2>
    </div>

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

    <form action="{{ route('stock-transfers.store') }}" method="POST" id="transferForm">
        @csrf

        {{-- Üst Bilgiler --}}
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-warning text-dark fw-bold">
                <i class="fas fa-exchange-alt mr-2"></i> Transfer Bilgileri
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Kaynak Şube <span class="text-danger">*</span></label>
                        <select name="from_branch_id" id="fromBranch" class="form-select form-control" required>
                            <option value="">Seçiniz...</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }} ({{ $branch->type }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-bold">Hedef Şube <span class="text-danger">*</span></label>
                        <select name="to_branch_id" id="toBranch" class="form-select form-control" required>
                            <option value="">Seçiniz...</option>
                            @foreach($branches as $branch)
                                <option value="{{ $branch->id }}">{{ $branch->name }} ({{ $branch->type }})</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label fw-bold">Tarih <span class="text-danger">*</span></label>
                        <input type="date" name="transfer_date" class="form-control"
                               value="{{ date('Y-m-d') }}" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-bold">Not</label>
                        <input type="text" name="note" class="form-control" placeholder="İsteğe bağlı...">
                    </div>
                </div>
            </div>
        </div>

        {{-- Ürün + Lot Seçimi --}}
        <div class="row g-4">

            {{-- Sol: Ürün + Lot Seç --}}
            <div class="col-md-5">
                <div class="card shadow-sm">
                    <div class="card-header fw-bold bg-success text-white">
                        <i class="fas fa-plus mr-2"></i> Ürün Ekle
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Ürün</label>
                            <select id="productSelect" class="form-select form-control">
                                <option value="">Önce kaynak şube seçin...</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Lot Listesi --}}
                        <div id="lotContainer" style="display:none">
                            <label class="form-label fw-bold">Lot Seç <small class="text-muted">(FIFO sırası)</small></label>
                            <div id="lotList"></div>
                        </div>

                        <div id="lotLoading" style="display:none" class="text-center text-muted py-3">
                            <i class="fas fa-spinner fa-spin mr-2"></i> Lotlar yükleniyor...
                        </div>

                        <div id="noLot" style="display:none" class="alert alert-warning mt-2">
                            Bu ürün için kaynak şubede aktif lot bulunamadı.
                        </div>

                        {{-- Seçilen lot: sadece çuval girişi --}}
                        <div id="selectedLotInfo" style="display:none" class="mt-3">
                            <hr>
                            <div class="mb-2">
                                <label class="form-label fw-bold">Çuval Sayısı</label>
                                <input type="number" id="inputPackageCount" class="form-control"
                                       min="1" step="1" placeholder="0">
                                <small class="text-muted">
                                    Mevcut: <span id="availablePackages" class="fw-bold text-success">-</span> çuval
                                    (<span id="availableKg" class="text-info">-</span> kg)
                                </small>
                            </div>
                            <div class="alert alert-light border p-2 mb-3" id="kgPreview" style="display:none">
                                <small>
                                    Tahmini: <strong id="calculatedKg">-</strong> kg
                                    <span class="text-muted">(çuval başına <span id="kgPerPackage">-</span> kg)</span>
                                </small>
                            </div>
                            <button type="button" id="addItemBtn" class="btn btn-success w-100 fw-bold">
                                <i class="fas fa-plus mr-2"></i> Listeye Ekle
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Sağ: Eklenecek Kalemler --}}
            <div class="col-md-7">
                <div class="card shadow-sm">
                    <div class="card-header fw-bold">
                        <i class="fas fa-list mr-2"></i> Transfer Kalemleri
                    </div>
                    <div class="card-body p-0">
                        <table class="table table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Ürün</th>
                                    <th>Lot</th>
                                    <th>Çuval</th>
                                    <th>Tahmini kg</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="itemsBody">
                                <tr id="emptyRow">
                                    <td colspan="5" class="text-center text-muted py-4">
                                        Henüz ürün eklenmedi.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="mt-3 d-flex justify-content-end gap-2">
                    <button type="submit" class="btn btn-warning px-5 fw-bold mr-3" id="submitBtn" disabled>
                        <i class="fas fa-exchange-alt mr-2"></i> Transferi Gerçekleştir
                    </button>
                    <a href="{{ route('stock-transfers.index') }}" class="btn btn-outline-secondary px-4">
                        İptal
                    </a>
                </div>
            </div>
        </div>

        <div id="hiddenInputs"></div>
    </form>
</div>
@endsection

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

    const GET_LOTS_URL = "{{ route('stock-transfers.get_lots') }}";
    let items       = [];
    let selectedLot = null;

    function loadLots() {
        const branchId  = $('#fromBranch').val();
        const productId = $('#productSelect').val();

        if (!branchId || !productId) {
            $('#lotContainer, #selectedLotInfo, #noLot, #kgPreview').hide();
            return;
        }

        $('#lotLoading').show();
        $('#lotContainer, #selectedLotInfo, #noLot').hide();
        selectedLot = null;

        $.get(GET_LOTS_URL, { branch_id: branchId, product_id: productId }, function (lots) {
            $('#lotLoading').hide();

            if (lots.length === 0) {
                $('#noLot').show();
                return;
            }

            let html = '';
            lots.forEach((lot, i) => {
                const fifo = i === 0 ? '<span class="badge bg-success mr-1">FIFO</span>' : '';
                const spName = lot.supplier_product_name
                    ? `<small class="text-info ml-1">(${lot.supplier_product_name})</small>` : '';

                html += `
                    <div class="lot-card border rounded p-2 mb-2 ${i === 0 ? 'border-success' : ''}"
                         data-lot='${JSON.stringify(lot)}' style="cursor:pointer">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                ${fifo}
                                <strong>${lot.lot_number}</strong>
                                <small class="text-muted ml-1">${lot.supplier}</small>
                                ${spName}
                            </div>
                            <span class="badge bg-info">${lot.quantity_kg} kg</span>
                        </div>
                    </div>`;
            });

            $('#lotList').html(html);
            $('#lotContainer').show();
        }).fail(function () {
            $('#lotLoading').hide();
            $('#noLot').show();
        });
    }

    $('#fromBranch, #productSelect').on('change', loadLots);

    // Lot seç
    $(document).on('click', '.lot-card', function () {
        $('.lot-card').removeClass('bg-light border-warning');
        $(this).addClass('bg-light border-warning');
        selectedLot = $(this).data('lot');

        // çuval başına kg hesapla
        const kgPerPackage = selectedLot.package_count > 0
            ? (parseFloat(selectedLot.quantity_kg) / parseFloat(selectedLot.package_count)).toFixed(4)
            : 0;

        selectedLot._kgPerPackage = parseFloat(kgPerPackage);

        $('#availablePackages').text(selectedLot.package_count);
        $('#availableKg').text(selectedLot.quantity_kg);
        $('#kgPerPackage').text(kgPerPackage);
        $('#inputPackageCount').val('').attr('max', selectedLot.package_count);
        $('#kgPreview').hide();
        $('#selectedLotInfo').show();
    });

    // Çuval girince kg otomatik hesapla
    $('#inputPackageCount').on('input', function () {
        if (!selectedLot) return;
        const count = parseFloat($(this).val()) || 0;
        if (count > 0) {
            const kg = (count * selectedLot._kgPerPackage).toFixed(2);
            $('#calculatedKg').text(kg);
            $('#kgPreview').show();
        } else {
            $('#kgPreview').hide();
        }
    });

    // Listeye ekle
    $('#addItemBtn').on('click', function () {
        if (!selectedLot) return;

        const packageCount = parseFloat($('#inputPackageCount').val());

        if (!packageCount || packageCount <= 0) {
            alert('Çuval sayısı giriniz.');
            return;
        }
        if (packageCount > parseFloat(selectedLot.package_count)) {
            alert('Girilen çuval mevcut miktarı aşıyor. Mevcut: ' + selectedLot.package_count + ' çuval');
            return;
        }

        const quantityKg   = (packageCount * selectedLot._kgPerPackage).toFixed(4);
        const productName  = $('#productSelect option:selected').text();

        items.push({
            lot_id:          selectedLot.id,
            lot_number:      selectedLot.lot_number,
            product_name:    productName,
            package_type_id: selectedLot.package_type_id,
            package_count:   packageCount,
            quantity_kg:     quantityKg,
        });

        renderItems();
        $('#selectedLotInfo, #kgPreview').hide();
        $('#productSelect').val('');
        $('#lotContainer').hide();
        selectedLot = null;
    });

    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>');
            $('#submitBtn').prop('disabled', true);
        } else {
            items.forEach((item, index) => {
                body.append(`
                    <tr>
                        <td>${item.product_name}</td>
                        <td><span class="badge bg-secondary">${item.lot_number}</span></td>
                        <td>${item.package_count} çuval</td>
                        <td>${item.quantity_kg} kg</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>`);
            });
            $('#submitBtn').prop('disabled', false);
        }

        renderHiddenInputs();
    }

    function renderHiddenInputs() {
        const container = $('#hiddenInputs');
        container.empty();
        items.forEach((item, index) => {
            container.append(`
                <input type="hidden" name="items[${index}][lot_id]"         value="${item.lot_id}">
                <input type="hidden" name="items[${index}][package_count]"  value="${item.package_count}">
                <input type="hidden" name="items[${index}][quantity_kg]"    value="${item.quantity_kg}">
            `);
        });
    }

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

    $('#transferForm').on('submit', function (e) {
        if ($('#fromBranch').val() === $('#toBranch').val()) {
            e.preventDefault();
            alert('Kaynak ve hedef şube aynı olamaz.');
            return;
        }
        if (items.length === 0) {
            e.preventDefault();
            alert('En az bir ürün eklemelisiniz.');
        }
    });
});
</script>
@endsection