@extends('layouts.users.app')

@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="mx-auto">

                {{-- Header: Breadcrumb & Alerts --}}
                <div class="mb-4">
                    <x-breadcrumb :links="$breadcrumbLinks" />
                </div>

                <div class="tw-wrapper">
                    @if (session('success'))
                        <x-alert title="{{ session('success') }}" positive solid class="mb-4 shadow-lg animate-in fade-in" />
                    @endif
                    @if (session('error'))
                        <x-alert title="{{ session('error') }}" negative solid class="mb-4 shadow-lg animate-in fade-in" />
                    @endif
                </div>

                {{-- Header: Title & Status Badges --}}
                <div class="mb-6">
                    <div>
                        <h1 class="fw-bold text-main-two text-xl m-0">Ticket #{{ $ticket->id }}</h1>
                    </div>
                    <div class="d-flex gap-1">
                        <span
                            class="px-3 py-1 text-xs rounded-full font-bold shadow-sm {{ $ticket->status->color() }} mr-1">
                            {{ ucfirst($ticket->status->label()) }}
                        </span>
                        <span class="px-3 py-1 text-xs rounded-full font-bold shadow-sm {{ $ticket->stage->color() }}">
                            {{ ucfirst($ticket->stage->label()) }}
                        </span>
                    </div>
                </div>





                <div class="tw-wrapper">

                    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

                        <div class="lg:col-span-2 space-y-8">

                            {{-- Formulario de Edición --}}
                            <div
                                class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-100 dark:border-gray-700 p-8 transition-all">
                                <div class="mb-10 border-b border-gray-100 dark:border-gray-700 pb-6">
                                    <div class="flex items-center gap-4 mb-2">
                                        <h2
                                            class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                                            {{ __('Update Sales Ticket') }}
                                        </h2>
                                        <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                                    </div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                                        Modify transaction details and customer information.
                                        <span class="text-main-two dark:text-main-one font-bold">Changes reflect immediately
                                            upon saving.</span>
                                    </p>
                                </div>

                                <div class="dark:prose-invert">
                                    <livewire:sale-ticket.edit.sale-ticket-edit-form :saleTicket="$ticket" :editContext="$ticket->status->value" />
                                </div>
                            </div>

                            {{-- Sección Multimedia --}}
                            <div
                                class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-8">
                                <div class="flex items-center gap-4 mb-8">
                                    <h2
                                        class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one flex items-center gap-2">
                                        <i class="fas fa-photo-video text-sm"></i> {{ __('Multimedia Assets') }}
                                    </h2>
                                    <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                                </div>
                                <p class="text-sm text-gray-500 dark:text-gray-400 italic mb-8">
                                    {{ __('Manage visual documentation including high-resolution photos and demonstration videos of the machinery.') }}
                                </p>

                                <div class="space-y-6">
                                    <livewire:sale-ticket.edit.sections.sale-ticket-photo-list :ticket="$ticket"
                                        :status="$ticket->status->value" />
                                    <livewire:sale-ticket.edit.sections.sale-ticket-video-list :ticket="$ticket"
                                        :status="$ticket->status->value" />
                                </div>
                            </div>
                        </div>

                        <div class="lg:col-span-1 space-y-8">

                            {{-- Actividad (Incluido como componente) --}}
                            @include('components.tickets.activity-history', ['activities' => $activities])

                            {{-- Retorno con Comentarios / Observaciones --}}
                            <div
                                class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-6 relative overflow-hidden">
                                <div class="absolute top-0 left-0 w-1.5 h-full bg-main-two dark:bg-main-one"></div>

                                <div class="mb-6">
                                    <h2
                                        class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one mb-2">
                                        <i class="fas fa-comment-dots mr-2"></i> {{ __('Return with Comments') }}
                                    </h2>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 italic leading-relaxed">
                                        Send back to customer for corrections. Visible to the client.
                                    </p>
                                </div>

                                @include('sale-ticket.partials._observations_list')

                                @if ($ticket->status !== \App\Enums\SaleTicketStatusEnum::RETURNED)
                                    <div class="mt-6 pt-6 border-t border-gray-100 dark:border-gray-700">
                                        @include('sale-ticket.observations.create')
                                    </div>
                                @endif
                            </div>

                            {{-- Administrative Actions --}}
                            <div
                                class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-xl dark:shadow-2xl border border-gray-200 dark:border-gray-700/50 p-6 relative overflow-hidden transition-colors duration-300">

                                {{-- Decorative red bar --}}
                                <div class="absolute top-0 left-0 w-1.5 h-full bg-red-600"></div>

                                <h2
                                    class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one mb-2">
                                    <i class="fas fa-shield-alt mr-2 text-red-500"></i> {{ __('System Actions') }}
                                </h2>
                                <p class="text-sm text-gray-500 dark:text-gray-400 italic leading-relaxed">
                                    {{ __('Critical management operations. Use with caution as these actions may affect ticket visibility or archival status.') }}
                                </p>

                                <div class="space-y-4 mt-6">
                                    @if ($ticket->status != \App\Enums\SaleTicketStatusEnum::ARCHIVED)
                                        <div x-data>
                                            <form x-ref="markAsArchived" method="POST"
                                                action="{{ route('sale-tickets.archived.mark-as-archived', $ticket->id) }}"
                                                class="hidden">
                                                @csrf
                                                @method('PATCH')
                                            </form>

                                            <x-confirm-button type="warning" title="Archive this ticket?"
                                                description="It will be hidden from the main list but can be restored later."
                                                accept-label="Yes, archive" accept-color="red" form-ref="markAsArchived"
                                                :action-params="[$ticket->id]" {{-- Botón ajustado para ser visible en blanco --}}
                                                class="flex w-full items-center justify-center px-4 py-3 bg-red-50 dark:bg-red-600/10 hover:bg-red-600 text-red-600 dark:text-red-500 hover:text-white rounded-xl font-black uppercase text-[10px] tracking-widest transition-all active:scale-95 border border-red-200 dark:border-red-600/20 shadow-sm dark:shadow-lg">
                                                <i class="fas fa-archive mr-2"></i>
                                                {{ __('Archive Ticket') }}
                                            </x-confirm-button>
                                        </div>
                                    @endif
                                </div>
                            </div>

                            {{-- Team Comments --}}
                            <div
                                class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-md border border-gray-100 dark:border-gray-700 p-6">
                                <div class="mb-8 border-b border-gray-100 dark:border-gray-700 pb-4">
                                    <div class="flex items-center gap-4">
                                        <h2
                                            class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one flex items-center gap-2">
                                            <i class="fas fa-users text-sm"></i> {{ __('Team Hub') }}
                                        </h2>
                                        <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                                    </div>
                                    <p class="text-sm text-gray-500 dark:text-gray-400 italic mt-2">
                                        {{ __('Internal collaboration space for team members. Share notes, updates, and private observations about this ticket.') }}
                                    </p>
                                </div>

                                <div class="space-y-8">
                                    <livewire:sale-ticket.team-comment.sale-ticket-comment-list :saleTicketId="$ticket->id" />
                                    <div class="pt-4 border-t border-gray-100 dark:border-gray-700">
                                        <livewire:sale-ticket.team-comment.sale-ticket-create-comment-form :saleTicketId="$ticket->id"
                                            :currentStage="$ticket->stage->value" />
                                    </div>
                                </div>
                            </div>

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


            </div>

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

        </div>
    </div>
@endsection