@extends('layouts.app')

@section('content')
<div class="container">
    <h1>Crear nuevo Fractional</h1>

    <form action="{{ route('fractionals.store') }}" method="POST" class="form-base">
        @csrf

        <div class="mb-3">
            <label>Section:</label>
            @php
            $currentSectionId = old('section_id', $fractional->section_id ?? null);
            @endphp
            <select name="section_id" class="form-control" required>
            @foreach ($sections as $section)
               <option value="{{ $section->id }}" 
                @selected(old('section_id', $fractional->section_id ?? null) == $section->id)>
                    {{ $section->code }} 
                    @if($section->description) — {{ $section->description }} @endif
                    @if($section->project) — Proyecto: {{ $section->project->name }} @endif
                </option>

            @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label for="name">Nombre:</label>
            <input type="text" name="name" class="form-control" required>
        </div>

        <div class="mb-3 hidden">
            <label for="svg_data">Datos SVG (JSON):</label>
            <textarea name="svg_data" class="form-control" rows="4"></textarea>
        </div>

        <div class="mb-3">
            <label for="form_template_id">Formulario asociado:</label>
            <select name="form_template_id" class="form-control">
                <option value="">Sin plantilla</option>
                @foreach ($templates as $template)
                    <option value="{{ $template->id }}">{{ $template->name }}</option>
                @endforeach
            </select>
        </div>


        {{-- Selector visual de imagen --}}
            <div class="mb-6">
                <label class="block font-medium text-sm text-gray-700 mb-2">Seleccionar imagen para el Fractional</label>
                <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 gap-3">
                    @foreach ($images as $img)
                    <label class="cursor-pointer block group relative">
                        <input type="radio" name="image_id" value="{{ $img->id }}"
                            class="peer hidden"
                            {{ old('image_id') == $img->id ? 'checked' : '' }}>
                        <div class="border-2 rounded overflow-hidden transition-all duration-200
                                    border-gray-300 peer-checked:border-blue-600 peer-checked:ring peer-checked:ring-blue-300">
                            <img src="{{ asset('storage/' . $img->path) }}" alt="{{ $img->alt }}"
                                class="w-full h-20 object-cover">
                        </div>
                        <p class="text-xs text-center mt-1 text-gray-600 truncate">{{ $img->name }}</p>
                    </label>
                    @endforeach
                </div>
            </div>


        <div class="mb-3">
            <label for="status">Estatus:</label>
            <select name="status" class="form-control">
                <option value="available">Disponible</option>
                <option value="reserved">Reservado</option>
                <option value="sold">Vendido</option>
            </select>
        </div>

        <button type="submit" class="btn btn-primary">Guardar</button>
    </form>
</div>
@endsection