@extends('layouts.public')
@include('partials.back', ['fallback' => route('admin.menu.index')])

@php $editing = $item->exists; @endphp

@section('title', $editing ? 'Edit item' : 'Add item')

@push('head')
<style>
    body { background:var(--soft); }
    .admin { max-width:560px; margin:0 auto; padding:28px 20px 60px; }
    form.card { background:#fff; border-radius:18px; padding:20px; display:flex; flex-direction:column; gap:14px; margin-top:16px; }
    label.l { font-weight:700; font-size:14px; }
    .in { width:100%; height:48px; border-radius:12px; border:1.5px solid #CBD3CC; padding:0 14px; font-size:15px; background:#fff; }
    .err { color:#B3261E; font-size:13px; margin:0; }
    .check { display:flex; align-items:center; gap:8px; font-size:14px; }
    .preview { width:140px; height:140px; border-radius:14px; background:var(--soft); object-fit:cover; display:flex; align-items:center; justify-content:center; color:#717786; font-size:13px; }
    .back { color:var(--ink); font-weight:700; text-decoration:none; }
    .hint { font-size:13px; color:var(--muted); margin:0; }
</style>
@endpush

@section('content')
<div class="admin">
    <a class="back" href="{{ route('admin.menu.index') }}">‹ Menu items</a>
    <h1 style="font-size:28px;margin-top:8px">{{ $editing ? 'Edit item' : 'Add item' }}</h1>

    <form class="card" method="POST" enctype="multipart/form-data"
          action="{{ $editing ? route('admin.menu.update', $item) : route('admin.menu.store') }}">
        @csrf
        @if ($editing) @method('PUT') @endif

        <label class="l" for="name">Name</label>
        <input class="in" id="name" name="name" value="{{ old('name', $item->name) }}" required maxlength="255">
        @error('name') <p class="err">{{ $message }}</p> @enderror

        <label class="l" for="description">Description</label>
        <input class="in" id="description" name="description" value="{{ old('description', $item->description) }}" maxlength="255" placeholder="Short line shown under the name">
        @error('description') <p class="err">{{ $message }}</p> @enderror

        <label class="l" for="price">Price (USD)</label>
        <input class="in" id="price" name="price" type="number" step="0.01" min="0" max="9999" value="{{ old('price', $item->price) }}" required>
        @error('price') <p class="err">{{ $message }}</p> @enderror

        <label class="l" for="category_id">Category</label>
        <select class="in" id="category_id" name="category_id">
            <option value="">— choose —</option>
            @foreach ($categories as $category)
                <option value="{{ $category->id }}" @selected((string) old('category_id', $item->category_id) === (string) $category->id)>{{ $category->name }}</option>
            @endforeach
        </select>
        <input class="in" name="new_category" value="{{ old('new_category') }}" maxlength="100" placeholder="…or type a new category name">
        @error('category_id') <p class="err">{{ $message }}</p> @enderror
        @error('new_category') <p class="err">{{ $message }}</p> @enderror

        <label class="l" for="image">Photo</label>
        @if ($editing && $item->image)
            <img class="preview" id="preview" src="{{ $item->image }}" alt="Current photo">
        @else
            <div class="preview" id="previewEmpty">No photo</div>
            <img class="preview" id="preview" style="display:none" alt="Selected photo">
        @endif
        <input id="image" name="image" type="file" accept="image/png,image/jpeg,image/webp">
        <p class="hint">JPG, PNG or WebP up to 5 MB. It is resized and saved inside the database.</p>
        @error('image') <p class="err">{{ $message }}</p> @enderror

        @if ($editing && $item->image)
            <label class="check"><input type="checkbox" name="remove_image" value="1"> Remove the current photo</label>
        @endif

        <label class="check">
            <input type="checkbox" name="is_available" value="1" @checked(old('is_available', $item->is_available ?? true))>
            Available to order
        </label>

        <button class="btn" type="submit">{{ $editing ? 'Save changes' : 'Add to menu' }}</button>
    </form>
</div>
@endsection

@push('scripts')
<script>
    document.getElementById('image').addEventListener('change', function () {
        const file = this.files[0];
        if (!file) return;
        const img = document.getElementById('preview');
        const empty = document.getElementById('previewEmpty');
        img.src = URL.createObjectURL(file);
        img.style.display = 'flex';
        if (empty) empty.style.display = 'none';
    });
</script>
@endpush