@extends('layouts.buy-and-sell.general-form')

@section('content')
    <div class="min-h-screen  dark:bg-gray-900 py-6 px-4">

        <div class="mx-auto">
            {{-- -------------  ALERTS THIS VIEW  ---------------------------------------------------------- --}}
            @if (session('success'))
                <x-alert title="{{ session('success') }}" positive solid/>
            @endif
            @if (session('error'))
                <x-alert title="{{ session('error') }}" negative solid/>
            @endif
            <div class="mb-6">

                <div class="mb-4">
                    <a href="{{ route('sell-tickets.create',['view' => 'machine-type-step'] ) }}"
                       class="inline-flex items-center gap-2 text-gray-700 hover:text-main-one transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" class="w-5 h-5">
                            <path stroke-linecap="round" stroke-linejoin="round"
                                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                        </svg>
                        <span class="font-medium">Back to tickets</span>
                    </a>
                </div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-1 gap-6">

                <div class="lg:col-span-1">
                    <!-- Título del Ticket -------------------------------------------------------------------------->
                    <div class="bg-m-yellow dark:bg-gray-800 rounded-lg shadow-md p-6 mb-6">
                        <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">
                            {{ __('Edit Ticket Draft')}}
                        </h1>
                        <p class="text-gray-600 dark:text-gray-400">
                            {{ __('You are editing a draft ticket. Please review and complete the details below.') }}
                        </p>
                    </div>

                <div class="lg:col-span-2 space-y-6">
                    <!-- Detalles del Ticket -------------------------------------------------------------------------->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <div class=" dark:prose-invert">
                            <livewire:sale-tickets.edit-sale-ticket.edit-sell-form :sellTicket="$ticket"
                                                                               edit-context="draft"/>

                            <!-- button back -->
                            <div class="mt-6 lg:mt-0 lg:-translate-y-10 lg:inline-block">
                                <a href="{{ route('sell-tickets.create', ['view' => 'machine-type-step']) }}"
                                   class="w-full lg:w-auto btn btn-secondary px-4 py-3 bg-gray-200 rounded dark:bg-gray-700 inline-flex items-center justify-center">
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5" stroke="currentColor" class="w-5 h-5 mr-2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                              d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                                    </svg>
                                    {{ __('back to create ticket') }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Sección de Multimedia ------------------------------------------------------------------------>
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
                            Multimedia
                        </h2>
                        <!-- Grid para fotos -------------------------------------------------------------------------->
                        <livewire:sale-tickets.edit-sale-ticket.edit-sale-ticket-component.photo-list :ticket="$ticket" status="draft"/>


                        <!-- Sección de video si existe -->
                        <livewire:sale-tickets.edit-sale-ticket.edit-sale-ticket-component.video-list :ticket="$ticket" status="draft"/>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection