@extends('layouts.users.app')

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


        <div class="mx-auto">
            <div class="col-12 col-md-6 mb-3 mb-md-0">
                {{-- Breadcrumb Component --}}
                <x-breadcrumb :links="$breadcrumbLinks"/>
            </div>
            {{---------------  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>
            </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">
                    <!-- Logs de Actividad ------------------------------------------------------------------------->
                    @include('components.tickets.activity-history', ['activities' => $activities])
                    <!------ 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">
                            return with comments
                        </h2>
                        <!-- Lista de observaciones existentes -------------------------------------------------------->
                        @include('sale-tickets.observation-sale-ticket.list-observation')

                        <!-- Formulario para nueva observación -------------------------------------------------------->
                        @if($ticket->status !== \App\Enums\SellTicketStatusEnum::RETURNED)
                            @include('sale-tickets.observation-sale-ticket.create-observation')
                        @endif
                    </div>

                    <!-- Administrative Actions -->
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">

                        <h3 class="text-md font-medium text-gray-700 dark:text-gray-300 ">
                            Administrative Actions
                        </h3>
                        <div class="space-y-4">

                            <!-- Archive Ticket Action -->
                            @if($ticket->status != \App\Enums\SellTicketStatusEnum::ARCHIVED)
                                <div x-data>
                                    <form x-ref="markAsArchived" method="POST"
                                          action="{{ route('sell-tickets.archived.mark-as-archived', $ticket->id) }}"
                                          class="hidden">
                                        @csrf
                                        @method('PATCH')
                                    </form>

                                    <x-confirm-button
                                        type="warning"
                                        title="Are you sure you want to archive this ticket?"
                                        description="This ticket will disappear from the ticket list, but you can restore it later if needed."
                                        accept-label="Yes, archive"
                                        accept-color="red"
                                        form-ref="markAsArchived"
                                        :action-params="[$ticket->id]"
                                        class="inline-flex items-center justify-center px-3 py-2 space-x-2 bg-red-500 hover:bg-red-600 text-white w-full rounded-md"
                                    >
                                        <i class="fas fa-archive mr-2"></i>
                                        Archive Ticket
                                    </x-confirm-button>
                                </div>
                            @endif
                        </div>
                    </div>


                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mt-6">
                        <div class="flex items-center mb-4">
                            <span
                                class="inline-block px-3 py-1 text-sm font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 shadow">
                                <i class="fas fa-users mr-2"></i> Team Comments
                            </span>
                        </div>
                        <div>
                            <livewire:sale-tickets.sell-team-comment.list-sell-team-comments
                                :sellTicketId="$ticket->id"/>
                            <livewire:sale-tickets.sell-team-comment.create-sell-team-comment
                                :sellTicketId="$ticket->id" :currentStage="$ticket->stage->value"/>
                        </div>
                    </div>


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


        <script>
            window.addEventListener('reloadPage', () => {
                location.reload();
            });
        </script>

@endsection