@extends('layouts.app')

@section('title', 'Ver Fractional')

@section('content')
<div class="max-w-3xl mx-auto bg-white shadow-md rounded-lg p-6">

    {{-- Título --}}
    <h1 class="text-2xl font-bold text-gray-800 mb-6">{{ $fractional->name }}</h1>

    {{-- Imagen destacada --}}
    @if($fractional->image)
        <div class="mb-6">
            <img src="{{ asset('storage/' . $fractional->image->path) }}"
                 alt="{{ $fractional->image->alt }}"
                 class="w-full h-64 object-cover rounded border-2 border-blue-600 shadow">
        </div>
    @endif

    {{-- Proyecto relacionado --}}
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Proyecto:</label>
        <p class="text-gray-700">{{ $fractional->project->name ?? 'N/A' }}</p>
    </div>

    {{-- Estatus --}}
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Estatus:</label>
        <p class="text-gray-700 capitalize">{{ $fractional->status }}</p>
    </div>

    {{-- Formulario asignado (si aplica) --}}
    @if($fractional->formTemplate)
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Plantilla de formulario:</label>
        <p class="text-gray-700">{{ $fractional->formTemplate->name }}</p>
    </div>
    @endif

    {{-- SVG Data (raw JSON) --}}
    <div class="mb-4">
        <label class="block text-sm font-medium text-gray-500">Datos SVG:</label>
        <pre class="bg-gray-100 text-sm text-gray-800 p-3 rounded overflow-auto whitespace-pre-wrap">
{{ json_encode($fractional->svg_data, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}
        </pre>
    </div>

    {{-- Botón volver --}}
    <div class="mt-6 flex justify-end">
        <a href="{{ route('fractionals.index') }}"
           class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm font-semibold">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24"
                 stroke="currentColor" stroke-width="1.5">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
            </svg>
            Volver
        </a>
    </div>
</div>
@endsection
