@extends('admin.layout') @section('title','QR Dizaynlar')
@section('content')
<h1 class="text-2xl font-bold text-ink mb-6">QR Dizaynlar</h1>

<div class="card mb-6 border-2 border-primarysoft bg-primarysoft">
    <h3 class="font-semibold text-ink mb-4">Yeni QR dizayn</h3>
    <form method="POST" action="{{ route('admin.qr-designs.store') }}" enctype="multipart/form-data" class="space-y-3">
        @csrf
        <div class="grid grid-cols-3 gap-3">
            <div><label class="label">Ad</label><input type="text" name="name" class="input" required></div>
            <div><label class="label">Logo (PNG tövsiyə olunur)</label><input type="file" name="logo" accept="image/*" class="input"></div>
            <div><label class="label">Fon şəkli (poster)</label><input type="file" name="background_image" accept="image/*" class="input"></div>
        </div>
        <div class="grid grid-cols-4 gap-3">
            <div><label class="label">Ön rəng</label><input type="color" name="foreground_color" value="#000000" class="input" style="height:42px;padding:4px;"></div>
            <div><label class="label">Fon rəngi</label><input type="color" name="background_color" value="#ffffff" class="input" style="height:42px;padding:4px;"></div>
            <div><label class="label">Eni (px)</label><input type="number" name="width" value="800" min="200" max="2000" class="input"></div>
            <div><label class="label">Hündürlüyü (px)</label><input type="number" name="height" value="800" min="200" max="2000" class="input"></div>
        </div>
        <div class="grid grid-cols-3 gap-3">
            <div><label class="label">QR ölçüsü (px)</label><input type="number" name="qr_size" value="300" min="50" max="1000" class="input"></div>
            <div><label class="label">QR X mövqeyi (px, boş — mərkəz)</label><input type="number" name="qr_x" class="input" placeholder="avtomatik"></div>
            <div><label class="label">QR Y mövqeyi (px, boş — mərkəz)</label><input type="number" name="qr_y" class="input" placeholder="avtomatik"></div>
        </div>
        <button class="btn btn-primary">Yarat</button>
    </form>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
@foreach($designs as $d)
<div class="card">
    @if($d->background_image_url)<img src="{{ $d->background_image_url }}" class="w-full h-32 object-cover rounded-lg border mb-3">@endif
    <div class="font-medium text-ink">{{ $d->name }}</div>
    <div class="text-xs text-muted mt-1">{{ $d->width }}×{{ $d->height }} · QR {{ $d->qr_size }}px · {{ $d->foreground_color }}/{{ $d->background_color }}{{ $d->logo_url ? ' · logo' : '' }}</div>
    <div class="mt-3"><form method="POST" action="{{ route('admin.qr-designs.destroy', $d) }}" onsubmit="return confirm('Silinsin?')">@csrf @method('DELETE')
        <button class="btn btn-danger" style="padding:4px 8px;font-size:12px;"><x-icon name="trash-2" class="w-5 h-5" /> Sil</button>
    </form></div>
</div>
@endforeach
</div>
@endsection