@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">Editar Fractional</h2>

    @if (session('success'))
        <div class="mb-4 p-3 rounded bg-green-50 text-green-700">
            {{ session('success') }}
        </div>
    @endif

    @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('fractionals.update', $fractional) }}" method="POST" enctype="multipart/form-data" class="form-base space-y-6">
        @csrf
        @method('PUT')

        {{-- Nombre + Section --}}
        <div class="grid lg:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">Nombre</label>
                <input type="text" name="name" value="{{ old('name', $fractional->name) }}"
                       class="w-full border-gray-300 rounded-md shadow-sm" required>
                @error('name') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <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((int)$currentSectionId === (int)$section->id)>
                            {{ $section->code }}
                            @if($section->description) — {{ $section->description }} @endif
                            @if($section->project) — Proyecto: {{ $section->project->name }} @endif
                        </option>
                    @endforeach
                </select>
                @error('section_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Formulario + Estatus --}}
        <div class="grid lg:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm text-gray-600 mb-1">Formulario</label>
                <select name="form_template_id" class="w-full border-gray-300 rounded-md shadow-sm">
                    <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>
                @error('form_template_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="block text-sm text-gray-600 mb-1">Estatus</label>
                <select name="status" class="w-full border-gray-300 rounded-md shadow-sm">
                    <option value="available" {{ old('status', $fractional->status) == 'available' ? 'selected' : '' }}>Disponible</option>
                    <option value="reserved"  {{ old('status', $fractional->status) == 'reserved'  ? 'selected' : '' }}>Reservado</option>
                    <option value="sold"      {{ old('status', $fractional->status) == 'sold'      ? 'selected' : '' }}>Vendido</option>
                </select>
                @error('status') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
            </div>
        </div>

        {{-- Imagen seleccionada actualmente --}}
        @if($fractional->image)
            <div>
                <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="h-24 w-auto mb-2 rounded border">
            </div>
        @endif

        {{-- Selector visual de nueva imagen --}}
        <div>
            <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>
            @error('image_id') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
        </div>

        {{-- Editor de Polígonos (mismo look&feel que Sections) --}}
        <div class="max-w-6xl mx-auto py-6">
            <h3 class="text-xl font-semibold mb-4">Editor de Polígonos (Mapa de la Section)</h3>

            <canvas id="editor-canvas"
                width="900" height="500"
                class="border"
                data-image="{{ $backgroundImage }}">
            </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>

            {{-- Salida bruta del editor (igual que Sections) --}}
            <label class="block text-sm text-gray-600 mb-1">SVG Data (string "x,y x,y ...")</label>
            <textarea id="svg-output" name="svg_data" rows="6"
                class="w-full mt-4 border rounded-md p-2">{{ old('svg_data', $fractional->svg_data) }}</textarea>
            @error('svg_data')
                <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
            @enderror
        </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">💾 Actualizar</button>
            <a href="{{ route('fractionals.index') }}" class="bg-gray-200 text-gray-800 px-6 py-2 rounded hover:bg-gray-300 transition">⬅ Volver</a>
        </div>
    </form>
</div>
@endsection

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

@push('scripts')
<script>
(function() {
  const svgOutput = document.getElementById('svg-output'); // salida del canvas/editor
  const svgData   = document.getElementById('svg-data');   // campo que se envía
  const genBtn    = document.getElementById('generate-svg');
  const form      = document.querySelector('form');

  function normalizePairsString(s) {
    if (!s) return '';
    s = s.replace(/[\r\n\t;]+/g, ' ');  // quita saltos, tabs, ;
    s = s.replace(/\s+/g, ' ').trim();  // colapsa espacios
    return s;
  }

  // Al hacer clic en "Generar SVG", copia tal cual al textarea svg_data
  genBtn?.addEventListener('click', () => {
    const raw = svgOutput?.value || '';
    const normalized = normalizePairsString(raw);
    if (normalized) svgData.value = normalized;
  });

  // Antes de enviar: si svg_data está vacío y sí hay en svg_output, copia
  form?.addEventListener('submit', () => {
    if ((!svgData.value || !svgData.value.trim()) && svgOutput?.value?.trim()) {
      svgData.value = normalizePairsString(svgOutput.value);
    }
  });
})();
</script>
@endpush