@extends('adminlte::page')
@section('title', 'Sipariş Ver')

@section('content')
<div class="container-fluid pt-4">
    <div class="align-items-center mb-4 gap-3">
        <h2 class="fw-bold mb-0">Sipariş Ver</h2>
        <small class="text-muted">Hangi sipariş türünü vermek istiyorsunuz?</small>
    </div>

    <div class="row g-4 justify-content-center" style="max-width: 900px;">
        @foreach($templates as $template)
        @php
            $colors = [
                'daily'  => ['bg' => '#27ae60', 'icon' => 'fa-sun',      'label' => 'Günlük'],
                'weekly' => ['bg' => '#2980b9', 'icon' => 'fa-calendar-week', 'label' => 'Haftalık'],
                'manual' => ['bg' => '#8e44ad', 'icon' => 'fa-edit',     'label' => 'Manuel'],
            ];
            $c = $colors[$template->type] ?? ['bg' => '#555', 'icon' => 'fa-box', 'label' => $template->type];
        @endphp
        <div class="col-md-4">
            <a href="{{ route('transfer-orders.select-template', $template->id) }}"
               class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100 template-card"
                     style="border-radius: 16px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s;">
                    {{-- Renkli üst şerit --}}
                    <div style="background: {{ $c['bg'] }}; padding: 2rem; text-align: center;">
                        <i class="fas {{ $c['icon'] }} fa-3x text-white mb-2 d-block"></i>
                        <span class="badge text-white fw-bold"
                              style="background: rgba(255,255,255,0.25); font-size: 0.9rem; padding: 0.4rem 1rem; border-radius: 20px;">
                            {{ $c['label'] }}
                        </span>
                    </div>
                    {{-- Bilgiler --}}
                    <div class="card-body text-center">
                        <h5 class="fw-bold mb-1">{{ $template->name }}</h5>
                        <small class="text-muted d-block mb-3">
                            <i class="fas fa-arrow-right mr-1"></i>
                            {{ optional($template->toBranch)->name }} ({{ optional($template->toBranch)->type }})
                        </small>
                        <div class="d-flex justify-content-center gap-3">
                            <span class="text-muted" style="font-size: 0.85rem;">
                                <i class="fas fa-boxes mr-1"></i>
                                {{ $template->items->count() }} ürün
                            </span>
                        </div>
                    </div>
                    <div class="card-footer border-0 text-center pb-3"
                         style="background: {{ $c['bg'] }}15;">
                        <span class="fw-bold" style="color: {{ $c['bg'] }};">
                            Sipariş Ver <i class="fas fa-arrow-right ml-1"></i>
                        </span>
                    </div>
                </div>
            </a>
        </div>
        @endforeach
    </div>
</div>

<style>
.template-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}
</style>
@endsection