@extends('adminlte::page')
@section('title', 'Teslim Al — Sipariş #' . $order->id)

@section('css')
    <link rel="stylesheet" href="{{ asset('css/order_card.css') }}">
@endsection

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

<style>:root { --order-color: {{ $color }}; }</style>

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

    {{-- Başlık --}}
    <div class="order-header shadow-sm">
        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route('incoming-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.25rem;">
                        <i class="fas fa-truck-loading mr-2"></i>Teslim Al — Sipariş #{{ $order->id }}
                    </div>
                    <small style="opacity: 0.85;">
                        <i class="fas fa-warehouse mr-1"></i> {{ $order->toBranch->name }}
                        <i class="fas fa-long-arrow-alt-right mx-1"></i>
                        <i class="fas fa-store mr-1"></i> {{ $order->fromBranch->name }}
                        <span class="ml-2">· {{ $order->order_date->format('d.m.Y') }}</span>
                    </small>
                </div>
            </div>
            <span class="badge bg-{{ $status['badge'] }}" style="font-size: 0.95rem; padding: 0.4rem 0.8rem;">
                {{ $status['label'] }}
            </span>
        </div>
        @if($order->note)
            <div class="mt-2" style="opacity: 0.85; font-size: 0.9rem;">
                <i class="fas fa-sticky-note mr-1"></i> {{ $order->note }}
            </div>
        @endif
    </div>

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

    <form action="{{ route('incoming-orders.receive', $order->id) }}" method="POST" id="receiveForm">
        @csrf

        {{-- Kalemler --}}
        <div class="card shadow-sm mb-3" style="border-radius: 12px; border: none;">
            <div class="card-body p-3">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="fw-bold">
                        <i class="fas fa-boxes mr-2" style="color: {{ $color }};"></i>
                        Gelen Ürünler
                    </span>
                    <div class="d-flex gap-2">
                        <button type="button" id="selectAllBtn" class="btn btn-sm btn-outline-secondary mr-2">
                            Tümü Geldi
                        </button>
                        <button type="button" id="deselectAllBtn" class="btn btn-sm btn-outline-secondary">
                            Tümünü Kaldır
                        </button>
                    </div>
                </div>

                @foreach($order->items as $i => $item)
                @php
                    $sentKg  = (float) $item->quantity_sent_kg;
                    $sentPkg = (float) $item->quantity_sent;
                    $hasSent = $sentKg > 0;
                @endphp
                <div class="product-card {{ $hasSent ? 'active' : 'inactive' }}" data-index="{{ $i }}">

                    {{-- Kart Üstü: toggle + ürün adı + referans badge --}}
                    <div class="card-top">
                        <button type="button"
                                class="toggle-btn {{ $hasSent ? 'on' : 'off' }}"
                                data-index="{{ $i }}">
                        </button>

                        <div class="flex-grow-1">
                            <div class="product-name">{{ optional($item->product)->name }}</div>
                            <div class="product-meta">
                                @if($hasSent)
                                    <span class="ref-badge ref-badge-sent">
                                        Gönderilen: {{ $sentPkg > 0 ? $sentPkg . ' ' . optional($item->packageType)->name : '' }}
                                        {{ number_format($sentKg, 2) }} kg
                                    </span>
                                @else
                                    <span class="ref-badge ref-badge-mismatch">Gönderilmedi</span>
                                @endif
                            </div>
                        </div>

                        {{-- Uyuşmazlık göstergesi (JS ile doldurulur) --}}
                        <div class="mismatch-indicator" id="mismatch-{{ $i }}" style="display:none;">
                            <span class="ref-badge ref-badge-mismatch">
                                <i class="fas fa-exclamation-triangle"></i> Fark var
                            </span>
                        </div>
                    </div>

                    {{-- Teslim Alma Giriş Alanları --}}
                    <div class="card-body-inner item-inputs" id="inputs-{{ $i }}"
                         style="{{ $hasSent ? '' : 'display:none;' }}">

                        <div class="receive-input-group">
                            {{-- Paket adedi --}}
                            <div class="receive-field">
                                <label>Paket Adedi</label>
                                <div class="qty-control">
                                    <button type="button" class="qty-btn pkg-minus" data-index="{{ $i }}">−</button>
                                    <input type="number"
                                           class="receive-input pkg-input"
                                           id="pkg-{{ $i }}"
                                           name="items[{{ $i }}][actual_package_count]"
                                           value="{{ $sentPkg }}"
                                           min="0" step="1"
                                           data-index="{{ $i }}">
                                    <button type="button" class="qty-btn pkg-plus" data-index="{{ $i }}">+</button>
                                </div>
                            </div>

                            {{-- Fiili kg --}}
                            <div class="receive-field">
                                <label>Fiili Miktar (kg)</label>
                                <div class="qty-control">
                                    <button type="button" class="qty-btn kg-minus" data-index="{{ $i }}">−</button>
                                    <input type="number"
                                           class="receive-input kg-input"
                                           id="kg-{{ $i }}"
                                           name="items[{{ $i }}][actual_kg]"
                                           value="{{ $sentKg }}"
                                           min="0" step="1"
                                           data-sent="{{ $sentKg }}"
                                           data-index="{{ $i }}">
                                    <button type="button" class="qty-btn kg-plus" data-index="{{ $i }}">+</button>
                                </div>
                            </div>

                            {{-- Fark göstergesi --}}
                            <div class="receive-field" id="diff-field-{{ $i }}" style="display:none;">
                                <label>Fark</label>
                                <div id="diff-{{ $i }}" class="fw-bold" style="font-size: 1rem; padding: 0.4rem 0;"></div>
                            </div>
                        </div>

                        {{-- Lot Referansı (gizlenebilir) --}}
                        @if($item->lots->isNotEmpty())
                        <div>
                            <button type="button" class="lot-ref-toggle" data-target="lot-ref-{{ $i }}">
                                <i class="fas fa-list mr-1"></i> Gönderilen lot detaylarını göster
                            </button>
                            <div id="lot-ref-{{ $i }}" style="display:none;">
                                <table class="table table-sm lot-ref-table mt-2 mb-0">
                                    <thead>
                                        <tr>
                                            <th>Lot No</th>
                                            <th>Paket</th>
                                            <th>Miktar (kg)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($item->lots as $itemLot)
                                        <tr>
                                            <td><span class="badge bg-secondary">{{ optional($itemLot->lot)->lot_number ?? '-' }}</span></td>
                                            <td>{{ optional($itemLot->lot->packageType)->name ?? '-' }} × {{ $itemLot->package_count }}</td>
                                            <td>{{ number_format($itemLot->quantity_kg, 2) }} kg</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        @endif
                    </div>

                    {{-- Hidden Inputs --}}
                    <input type="hidden" name="items[{{ $i }}][order_item_id]" value="{{ $item->id }}">
                    <input type="hidden" name="items[{{ $i }}][received]" value="{{ $hasSent ? '1' : '0' }}" class="received-input" data-index="{{ $i }}">
                </div>
                @endforeach

            </div>
        </div>

        {{-- Alt Bar --}}
        <div class="submit-bar shadow-sm">
            <div>
                <span class="counter-badge" id="receivedCount">
                    {{ $order->items->where('quantity_sent_kg', '>', 0)->count() }} ürün teslim alınacak
                </span>
                <span id="mismatchWarning" class="ref-badge ref-badge-mismatch ml-2" style="display:none;">
                    <i class="fas fa-exclamation-triangle"></i> Uyuşmazlık var
                </span>
            </div>
            <div class="d-flex align-items-center" style="gap: 1.5rem;">
                <a href="{{ route('incoming-orders.index') }}" class="btn btn-outline-secondary px-4">
                    İptal
                </a>
                <button type="submit" class="btn fw-bold px-4" id="submitBtn"
                        style="background: {{ $color }}; color: white; border: none; border-radius: 8px;">
                    <i class="fas fa-check-circle mr-2"></i> Teslimi Onayla
                </button>
            </div>
        </div>

    </form>
</div>
@endsection

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

    // Toggle: geldi / gelmedi
    $(document).on('click', '.toggle-btn', function () {
        const index  = $(this).data('index');
        const card   = $(`.product-card[data-index="${index}"]`);
        const isOn   = $(this).hasClass('on');
        const inputs = $(`#inputs-${index}`);

        if (isOn) {
            $(this).removeClass('on').addClass('off');
            card.removeClass('active').addClass('inactive');
            inputs.slideUp(150);
            $(`.received-input[data-index="${index}"]`).val('0');
        } else {
            $(this).removeClass('off').addClass('on');
            card.removeClass('inactive').addClass('active');
            inputs.slideDown(150);
            $(`.received-input[data-index="${index}"]`).val('1');
        }
        updateCounter();
    });

    // Paket +/-
    $(document).on('click', '.pkg-plus', function () {
        const index = $(this).data('index');
        const input = $(`#pkg-${index}`);
        input.val((parseFloat(input.val()) || 0) + 1);
    });
    $(document).on('click', '.pkg-minus', function () {
        const index = $(this).data('index');
        const input = $(`#pkg-${index}`);
        input.val(Math.max(0, (parseFloat(input.val()) || 0) - 1));
    });

    // Kg +/-
    $(document).on('click', '.kg-plus', function () {
        const index = $(this).data('index');
        const input = $(`#kg-${index}`);
        input.val((parseFloat(input.val()) || 0) + 1);
        input.trigger('input');
    });
    $(document).on('click', '.kg-minus', function () {
        const index = $(this).data('index');
        const input = $(`#kg-${index}`);
        input.val(Math.max(0, (parseFloat(input.val()) || 0) - 1));
        input.trigger('input');
    });

    // Fiili kg değişince fark hesapla
    $(document).on('input', '.kg-input', function () {
        const index   = $(this).data('index');
        const sentKg  = parseFloat($(this).data('sent')) || 0;
        const actual  = parseFloat($(this).val()) || 0;
        const diff    = actual - sentKg;
        const diffEl  = $(`#diff-${index}`);
        const inputEl = $(this);

        if (Math.abs(diff) > 0.01) {
            const sign  = diff > 0 ? '+' : '';
            const color = diff > 0 ? '#198754' : '#dc3545';
            diffEl.html(`<span style="color:${color}">${sign}${diff.toFixed(2)} kg</span>`);
            $(`#diff-field-${index}`).show();
            inputEl.addClass('mismatch');
            $(`#mismatch-${index}`).show();
        } else {
            $(`#diff-field-${index}`).hide();
            inputEl.removeClass('mismatch');
            $(`#mismatch-${index}`).hide();
        }

        updateMismatchWarning();
    });

    // Lot referansı aç/kapat
    $(document).on('click', '.lot-ref-toggle', function () {
        const target = $(this).data('target');
        $(`#${target}`).slideToggle(150);
        const isVisible = $(`#${target}`).is(':visible');
        $(this).html(isVisible
            ? '<i class="fas fa-times mr-1"></i> Gizle'
            : '<i class="fas fa-list mr-1"></i> Gönderilen lot detaylarını göster'
        );
    });

    // Tümü Geldi
    $('#selectAllBtn').on('click', function () {
        $('.toggle-btn.off').each(function () {
            const index = $(this).data('index');
            $(this).removeClass('off').addClass('on');
            $(`.product-card[data-index="${index}"]`).removeClass('inactive').addClass('active');
            $(`#inputs-${index}`).slideDown(150);
            $(`.received-input[data-index="${index}"]`).val('1');
        });
        updateCounter();
    });

    // Tümünü Kaldır
    $('#deselectAllBtn').on('click', function () {
        $('.toggle-btn.on').each(function () {
            const index = $(this).data('index');
            $(this).removeClass('on').addClass('off');
            $(`.product-card[data-index="${index}"]`).removeClass('active').addClass('inactive');
            $(`#inputs-${index}`).slideUp(150);
            $(`.received-input[data-index="${index}"]`).val('0');
        });
        updateCounter();
    });

    function updateCounter() {
        const count = $('.toggle-btn.on').length;
        $('#receivedCount').text(count + ' ürün teslim alınacak');
    }

    function updateMismatchWarning() {
        const hasMismatch = $('.kg-input.mismatch').length > 0;
        $('#mismatchWarning').toggle(hasMismatch);
    }

    // Form gönder kontrolü
    $('#receiveForm').on('submit', function (e) {
        const hasMismatch = $('.kg-input.mismatch').length > 0;
        if (hasMismatch && !confirm('Miktar uyuşmazlığı var. WhatsApp grubuna bildirim gönderilecek. Devam etmek istiyor musunuz?')) {
            e.preventDefault();
        }
    });

});
</script>
@endsection