@extends('layouts.app')

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

    <form action="{{ route('fractionals.update', $fractional) }}" method="POST" class="form-base">
        @csrf @method('PUT')

        <div class="mb-3">
            <label>Nombre:</label>
            <input type="text" name="name" value="{{ $fractional->name }}" class="form-control" required>
        </div>

        <div class="mb-3">
            <label>Proyecto:</label>
            <select name="project_id" class="form-control">
                @foreach ($projects as $project)
                    <option value="{{ $project->id }}" {{ $fractional->project_id == $project->id ? 'selected' : '' }}>
                        {{ $project->name }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="mb-3">
            <label>SVG Data (JSON):</label>
            <textarea name="svg_data" class="form-control" rows="4">{{ $fractional->svg_data }}</textarea>
        </div>

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

            </select>
        </div>


        {{-- Imagen seleccionada actualmente --}}
            @if($fractional->image)
                <div class="mb-6">
                    <h3 class="font-semibold text-gray-700 mb-2">Imagen seleccionada actualmente</h3>
                    <img src="{{ asset('storage/' . $fractional->image->path) }}"
                        alt="{{ $fractional->image->alt }}"
                        class="w-48 h-48 object-cover rounded border-2 border-blue-600 shadow">
                </div>
            @endif

            {{-- Selector visual de nueva imagen --}}
            <div class="mb-6">
                <label class="block font-medium text-sm text-gray-700 mb-2">Seleccionar nueva imagen</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', $fractional->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>Estatus:</label>
            <select name="status" class="form-control">
                <option value="available" {{ $fractional->status == 'available' ? 'selected' : '' }}>Disponible</option>
                <option value="reserved" {{ $fractional->status == 'reserved' ? 'selected' : '' }}>Reservado</option>
                <option value="sold" {{ $fractional->status == 'sold' ? 'selected' : '' }}>Vendido</option>
            </select>
        </div>

        <button type="submit" class="btn btn-success">Actualizar</button>
    </form>
</div>
@endsection
