@extends('adminlte::page')
@section('title', 'Sipariş Ver — ' . $template->name)

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

@section('content')
@php
    $typeColors = [
        'daily'  => '#27ae60',
        'weekly' => '#2980b9',
        'manual' => '#8e44ad',
    ];
    $typeLabels = ['daily' => 'Günlük', 'weekly' => 'Haftalık', 'manual' => 'Manuel'];
    $color = $typeColors[$template->type] ?? '#555';
    $label = $typeLabels[$template->type] ?? $template->type;
@endphp

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

<style>
.order-header {
    background: linear-gradient(135deg, {{ $color }}, {{ $color }}cc);
    border-radius: 16px;
    color: white;
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}
.product-card {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    transition: all 0.2s;
    background: #fff;
    overflow: hidden;
}
.product-card.active {
    border-color: {{ $color }};
    background: {{ $color }}08;
}
.product-card.inactive {
    opacity: 0.5;
    background: #f8f9fa;
}
.product-card .card-top {
    display: flex;
    align-items: center;
    padding: 1rem 1.2rem;
    gap: 1rem;
}
.toggle-btn {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    position: relative;
    transition: background 0.2s;
    flex-shrink: 0;
}
.toggle-btn.on  { background: {{ $color }}; }
.toggle-btn.off { background: #ced4da; }
.toggle-btn::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    top: 3px;
    transition: left 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.toggle-btn.on::after  { left: 23px; }
.toggle-btn.off::after { left: 3px; }
.qty-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid {{ $color }};
    background: white;
    color: {{ $color }};
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all 0.15s;
}
.qty-btn:hover { background: {{ $color }}; color: white; }
.qty-input {
    width: 60px;
    text-align: center;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    padding: 0.25rem;
    font-weight: bold;
    font-size: 1rem;
}
.qty-input:focus { border-color: {{ $color }}; outline: none; }
.product-name { font-weight: 600; font-size: 0.95rem; flex: 1; }
.product-meta { font-size: 0.8rem; color: #6c757d; }
.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;
    border-radius: 0 0 12px 12px;
    z-index: 10;
}
.counter-badge {
    background: {{ $color }} ;
    color: white;
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-weight: bold;
    font-size: 0.9rem;
}
</style>

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

    {{-- Başlık --}}
    <div class="order-header d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center gap-3">
            <a href="{{ route('transfer-orders.create') }}"
               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;">{{ $template->name }}</div>
                <small style="opacity: 0.85;">
                    <i class="fas fa-arrow-right mr-1"></i>
                    {{ optional($template->toBranch)->name }}
                    <span class="ml-2 badge" style="background: rgba(255,255,255,0.25);">{{ $label }}</span>
                </small>
            </div>
        </div>
        <div class="text-right" style="opacity: 0.9;">
            <div style="font-size: 1.1rem; font-weight: 600;">{{ now()->format('d.m.Y') }}</div>
            <small>{{ now()->format('l') }}</small>
        </div>
    </div>

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

    <form action="{{ route('transfer-orders.store') }}" method="POST" id="orderForm">
        @csrf
        <input type="hidden" name="template_id" value="{{ $template->id }}">

        {{-- Ürünler --}}
        <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>
                        Ürünler
                    </span>
                    <div class="d-flex gap-2">
                        <button type="button" id="selectAllBtn" class="btn btn-sm btn-outline-secondary mr-3">
                            Tümünü Seç
                        </button>
                        <button type="button" id="deselectAllBtn" class="btn btn-sm btn-outline-secondary">
                            Tümünü Kaldır
                        </button>
                    </div>
                </div>

                <div id="productList" class="d-flex flex-column gap-2">
                    @foreach($template->items as $i => $item)
                    @php $defaultQty = $item->default_quantity > 0 ? $item->default_quantity : 1; @endphp
                    <div class="product-card active" data-index="{{ $i }}">
                        <div class="card-top">
                            {{-- Toggle --}}
                            <button type="button" class="toggle-btn on" data-index="{{ $i }}"></button>

                            {{-- Ürün Bilgisi --}}
                            <div class="flex-grow-1">
                                <div class="product-name">{{ optional($item->product)->name }}</div>
                                <div class="product-meta">
                                    {{ optional($item->packageType)->name }}
                                    @if($item->default_quantity > 0)
                                        · Varsayılan: {{ $item->default_quantity }}
                                    @endif
                                </div>
                            </div>

                            {{-- Miktar --}}
                            <div class="qty-control">
                                <button type="button" class="qty-btn minus-btn" data-index="{{ $i }}">−</button>
                                <input type="number"
                                       class="qty-input"
                                       id="qty-{{ $i }}"
                                       value="{{ $defaultQty }}"
                                       min="0"
                                       step="1">
                                <button type="button" class="qty-btn plus-btn" data-index="{{ $i }}">+</button>
                            </div>
                        </div>

                        {{-- Hidden inputs --}}
                        <input type="hidden" name="items[{{ $i }}][product_id]"      value="{{ $item->product_id }}">
                        <input type="hidden" name="items[{{ $i }}][package_type_id]" value="{{ $item->package_type_id }}">
                        <input type="hidden" name="items[{{ $i }}][enabled]"         value="1" class="enabled-input" data-index="{{ $i }}">
                        <input type="hidden" name="items[{{ $i }}][quantity]"        value="{{ $defaultQty }}" class="qty-hidden" data-index="{{ $i }}">
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        {{-- Not --}}
        <div class="card shadow-sm mb-3" style="border-radius: 12px; border: none;">
            <div class="card-body p-3">
                <label class="fw-bold mb-2 d-block">
                    <i class="fas fa-sticky-note mr-2" style="color: {{ $color }};"></i>
                    Not <small class="text-muted fw-normal">(isteğe bağlı)</small>
                </label>
                <textarea name="note" class="form-control" rows="2"
                          placeholder="Eklemek istediğiniz bir not var mı?"
                          style="border-radius: 8px; resize: none;">{{ old('note') }}</textarea>
            </div>
        </div>

        {{-- Alt bar --}}
        <div class="submit-bar shadow-sm">
            <div>
                <span class="counter-badge" id="selectedCount">
                    {{ $template->items->count() }} ürün seçili
                </span>
            </div>
            <div class="d-flex gap-2 align-items-center">
                <a href="{{ route('transfer-orders.index') }}" class="btn btn-outline-secondary">
                    İ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-paper-plane mr-2"></i> Sipariş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 () {

    // Toggle açma/kapama
    $(document).on('click', '.toggle-btn', function () {
        const index = $(this).data('index');
        const card  = $(`.product-card[data-index="${index}"]`);
        const isOn  = $(this).hasClass('on');

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

    // + butonu
    $(document).on('click', '.plus-btn', function () {
        const index = $(this).data('index');
        const input = $(`#qty-${index}`);
        const newVal = (parseFloat(input.val()) || 0) + 1;
        input.val(newVal);
        $(`.qty-hidden[data-index="${index}"]`).val(newVal);
    });

    // - butonu
    $(document).on('click', '.minus-btn', function () {
        const index = $(this).data('index');
        const input = $(`#qty-${index}`);
        const newVal = Math.max(0, (parseFloat(input.val()) || 0) - 1);
        input.val(newVal);
        $(`.qty-hidden[data-index="${index}"]`).val(newVal);
    });

    // Manuel miktar girişi
    $(document).on('input', '.qty-input', function () {
        const index = $(this).closest('.product-card').data('index');
        $(`.qty-hidden[data-index="${index}"]`).val($(this).val() || 0);
    });

    // Tümünü seç
    $('#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');
            $(`.enabled-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');
            $(`.enabled-input[data-index="${index}"]`).val('0');
        });
        updateCounter();
    });

    function updateCounter() {
        const count = $('.toggle-btn.on').length;
        $('#selectedCount').text(count + ' ürün seçili');
    }

    // Form gönder kontrolü
    $('#orderForm').on('submit', function (e) {
        const enabled = $('.toggle-btn.on').length;
        if (enabled === 0) {
            e.preventDefault();
            alert('En az bir ürün seçmelisiniz.');
        }
    });
});
</script>
@endsection
@endsection