@extends('layouts.users.app')

@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 flex gap-3 items-center">

                <div>
                    <span class="h5">Ticket #{{$ticket->id}} </span>
                </div>
                <div>
                    <span
                        class="px-2 py-1 text-xs rounded-full badge fw-bold {{ $ticket->status->color() }}">
                        {{ ucfirst($ticket->status->label() ) }}
                    </span>
                </div>
                <div>
                    <span
                        class="px-2 py-1 text-xs rounded-full badge fw-bold {{ $ticket->stage->color() }}">
                        {{ ucfirst($ticket->stage->label() ) }}
                    </span>
                </div>
                @if($ticket->status ===  \App\Enums\SellTicketStatusEnum::RETURNED)
                    <div x-data>
                        <form x-ref="returnCorrectedForm"
                              method="POST"
                              action="{{ route('sell-tickets.observations.update-returned-ticket', $ticket->id) }}"
                        >
                            @csrf
                            @method('PATCH')
                        </form>

                        <x-confirm-button
                            type="warning"
                            title="Send corrected information?"
                            description="Are you sure you want to send the corrected information? This action will notify the team."
                            acceptLabel="Yes, send"
                            acceptColor="blue"
                            form-ref="returnCorrectedForm"
                            class="ml-2 px-4 py-2 bg-main-one text-white rounded hover:bg-main-two"
                        >
                            Return corrected ticket
                        </x-confirm-button>
                    </div>
                @endif
            </div>
            <!-- Grid principal de 2 columnas ------------------------------------------------------------------------->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                <!-- Columna izquierda (2 columnas de 3) -------------------------------------------------------------->
                <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">
                        <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">
                            Ticket details
                        </h2>
                        <div class=" dark:prose-invert">
                            <livewire:sale-tickets.edit-sale-ticket.edit-sell-form :sellTicket="$ticket"
                                                                                   :editContext="$ticket->status->value"/>

                        </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="$ticket->status->value"/>
                        <!-- Sección de video si existe -->
                        <livewire:sale-tickets.edit-sale-ticket.edit-sale-ticket-component.video-list :ticket="$ticket"
                                                                                                      :status="$ticket->status->value"/>
                    </div>
                </div>

                <!--------------------------- Columna derecha (1 columna de 3) ------------------------------------->
                <div class="lg:col-span-1 space-y-6">
                    <!------ Observaciones -------------------------------------------------------------------------->
                    <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">
                            Comments
                        </h2>
                        <!-- Lista de observaciones existentes -------------------------------------------------------->
                        @include('sale-tickets.observation-sale-ticket.list-observation')
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection