@extends('layouts.users.app')

@section('content')
    <div class="min-h-screen dark:bg-gray-900 py-6 px-4">
        {{-- Breadcrumb Component --}}
        <x-breadcrumb :links="$breadcrumbLinks"/>
        <div class="mx-auto">
            {{-- Alerts --}}
            @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 --}}
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {{-- Columna izquierda --}}
                <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:buy-tickets.edit-buy-ticket.edit-buy-form
                                :buyTicket="$ticket"
                                :editContext="$ticket->status->value"/>
                        </div>
                    </div>
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
                        <p class="text-lg font-semibold text-blue-700 dark:text-blue-300 mb-3 flex items-center gap-2">
                            <i class="fas fa-users mr-2"></i>
                            Team Comments
                        </p>
                        <div>
                            <livewire:buy-tickets.buy-team-comment.list-buy-team-comments :buyTicketId="$ticket->id"/>
                            <livewire:buy-tickets.buy-team-comment.create-buy-team-comment :buyTicketId="$ticket->id"
                                                                                           :currentStage="$ticket->stage->value"/>
                        </div>
                    </div>
                </div>

                {{-- Columna derecha --}}
                <div class="lg:col-span-1 space-y-6">
                    {{-- Update Status --}}
                    @if($statusOptions)
                        <div x-data class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">

                            <form method="POST" action="{{ route('buy-tickets.update-status', $ticket->id) }}"
                                  x-ref="updateStatusForm"
                                  class="space-y-4">
                                @csrf
                                @method('PATCH')
                                <label for="status"
                                       class="block text-lg fw-bold font-medium text-gray-700 dark:text-gray-300">
                                    Update Status of Ticket
                                </label>
                                <x-alert
                                    title=" Changing the ticket status will update it and record it in the activity history."
                                    info/>
                                <select name="status" id="status"
                                        class="my-3 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                                    @foreach($statusOptions as $status)
                                        <option value="{{ $status->value }}"
                                            {{ $ticket->status === $status ? 'selected' : '' }}>
                                            {{ ucfirst($status->labelWithIcon()) }}
                                        </option>
                                    @endforeach
                                </select>
                            </form>

                            <x-confirm-button
                                type="info"
                                title="Update status?"
                                description="Are you sure you want to update the status of this ticket?"
                                accept-label="Yes, update"
                                accept-color="blue"
                                form-ref="updateStatusForm"
                                :action-params="[$ticket->id]"
                                class="inline-flex items-center justify-center px-3 py-2 space-x-2 bg-yellow-500 hover:bg-yellow-600 text-white w-full rounded-md"
                            >
                                <i class="fas fa-sync-alt"></i>
                                <span>Update Status</span>
                            </x-confirm-button>
                        </div>
                    @endif

                    {{-- Activity Log --}}
                    @include('components.tickets.activity-history', ['activities' => $activities])

                    <!------ Observaciones -------------------------------------------------------------------------->
                    @if(!$ticket->isAproved())
                        <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('buy-tickets.observation-buy-ticket.list-observation')

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


                    <div class="space-y-4">
                        <!-- Administrative Actions -->
                        @if(!$ticket->isAproved())
                            <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">
                                    @if($ticket->status != \App\Enums\BuyStatusTicketEnum::ARCHIVED)
                                        <div x-data>
                                            <form x-ref="markAsArchived" method="POST"
                                                  action="{{ route('buy-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>
                        @endif
                    </div>
                </div>
            </div>

@endsection