@extends('layouts.admin.base')

@section('page.title', isset($item) ? 'Édition d\'un objet' : 'Création d\'un objet')

@section('page.content')
    <div class="flex mb-4">
        <a href="{{ route('admin.calculator.list') }}" class="px-3 py-1 text-sm bg-gray-600 text-white rounded shadow"><i class="bi bi-arrow-left"></i> Retour</a>

        @isset($item)
            <a href="{{ route('admin.calculator.delete', ['calculatorItem' => $item]) }}" class="px-3 py-1 text-sm bg-red-600 text-white rounded shadow ml-2">Supprimer</a>
        @endisset
    </div>

    <form action="{{ isset($item) ? route('admin.calculator.update', ['calculatorItem' => $item]) : route('admin.calculator.store') }}" method="POST" class="grid md:grid-cols-3 gap-4">
        @csrf

        <div class="md:col-span-2 mb-auto grid gap-4">
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.classic-light', [
                    'id' => 'title',
                    'label' => 'Titre',
                    'value' => $item->title ?? null
                ])

                @include('components.forms.inputs.classic-light', [
                    'id' => 'tonnage',
                    'type' => 'number',
                    'label' => 'Volume (m³)',
                    'value' => $item->tonnage ?? null
                ])

                @include('components.forms.inputs.select-light', [
                    'id' => 'category',
                    'label' => "Catégorie de l'objet",
                    'value' => $item->category,
                    'options' => \App\Models\CalculatorItem::CATEGORIES
                ])
            </div>
        </div>

        <div class="mb-auto grid gap-4">
            <div class="bg-slate-50 rounded shadow-sm border p-4">
                @include('components.forms.inputs.image', [
                    'id' => 'image_id',
                    'image_id' => $item->image_id ?? null,
                    'image_url' => $item->image->url_optimized ?? null
                ])
            </div>
        </div>

        {{-- Bottom --}}
        <div class="md:col-span-3 border-t mt-4 pt-4 flex">
            <button type="submit" class="bg-green-500 text-white px-3 py-1 rounded shadow">Sauvegarder</button>
        </div>
    </form>
@endsection