@extends('layouts.app')

@section('content')
<div class="w-full px-4 mx-auto py-10 max-w-[1000px]">
    <h2 class="text-2xl font-semibold mb-6">Crear Sección</h2>

    @if ($errors->any())
        <div class="mb-4 p-3 rounded bg-red-50 text-red-700">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $e)
                    <li>{{ $e }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('sections.store') }}" method="POST" enctype="multipart/form-data" class="form-base space-y-6">
        @csrf

        {{-- Proyecto + Código --}}
        <div class="grid lg:grid-cols-2 gap-4">
            <div>
                <label for="project_id" class="block text-sm text-gray-600 mb-1">Proyecto</label>
                <select name="project_id" id="project_id" class="w-full border-gray-300 rounded-md shadow-sm" required>
                    <option value="">Selecciona un Proyecto</option>
                    @foreach ($projects as $project)
                        <option value="{{ $project->id }}"
                            data-image="{{ $project->image_url ?? '' }}"
                            {{ old('project_id') == $project->id ? 'selected' : '' }}>
                            {{ $project->name }}
                        </option>
                    @endforeach
                </select>
                @error('project_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="code" class="block text-sm text-gray-600 mb-1">Código de Sección</label>
                <input type="text" id="code" name="code" value="{{ old('code') }}" 
                    class="w-full border-gray-300 rounded-md shadow-sm" required>
                @error('code') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Descripción --}}
        <div>
            <label for="description" class="block text-sm text-gray-600 mb-1">Descripción</label>
            <textarea id="description" name="description" rows="3"
                class="w-full border-gray-300 rounded-md shadow-sm">{{ old('description') }}</textarea>
        </div>

        {{-- Imagen (opcional, extra distinta al mapa del proyecto) --}}
        <div>
            <label for="image" class="block text-sm text-gray-600 mb-1">Imagen Representativa (opcional)</label>
            <input type="file" id="image" name="image" class="w-full border-gray-300 rounded-md shadow-sm">
            @error('image') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Editor de Polígonos --}}
       
        <!--div class="max-w-6xl mx-auto py-6">
            <h3 class="text-xl font-semibold mb-4">Editor de Polígonos (Mapa del Proyecto)</h3>

            <canvas id="editor-canvas"
                width="900" height="500"
                class="border"
                data-image="">
            </canvas>

            <div class="mt-4 flex gap-2">
                <button id="generate-svg" type="button" class="bg-indigo-600 text-white px-4 py-2 rounded">Generar SVG</button>
                <button id="reset-canvas" type="button" class="bg-red-600 text-white px-4 py-2 rounded">Reiniciar dibujo</button>
            </div>

            <textarea id="svg-output" name="svg_points" rows="6"
                class="w-full mt-4 border rounded-md p-2"
                placeholder='[{"x":100,"y":120},...]'>{{ old('svg_points') }}</textarea>
        </div-->

        {{-- Botones --}}
        <div class="flex justify-center gap-4 pt-6">
            <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">💾 Guardar</button>
            <a href="{{ route('sections.index') }}" class="bg-gray-200 text-gray-800 px-6 py-2 rounded hover:bg-gray-300 transition">⬅ Cancelar</a>
        </div>
    </form>
</div>
@endsection

{{-- Scripts --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.0/fabric.min.js"></script>
@vite(['resources/js/polygon-editor.js'])