@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  ---------------------------------------------------------- --}}
            <div class="tw-wrapper">
                @if (session('success'))
                    <x-alert title="{{ session('success') }}" positive solid />
                @endif
                @if (session('error'))
                    <x-alert title="{{ session('error') }}" negative solid />
                @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>
        <!-- Grid principal de 2 columnas ------------------------------------------------------------------------->
        <div class="tw-wrapper">

            <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">
                    <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 Ticket Information') }}
                                </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 the machine\'s technical specifications, pricing, and availability details.') }}
                                <span class="text-main-two dark:text-main-one font-bold">
                                    {{ __('Ensure all changes are saved to keep the equipment record up to date.') }}
                                </span>
                            </p>
                        </div>

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

                            @if ($ticket->status === \App\Enums\PurchaseTicketStatusEnum::RETURNED)
                                <div x-data class="flex justify-end pt-6 border-t border-gray-100 dark:border-gray-700">
                                    <form x-ref="returnCorrectedForm" method="POST"
                                        action="{{ route('purchase-tickets.observations.update-returned-ticket', $ticket) }}">
                                        @csrf
                                        @method('PATCH')
                                    </form>

                                    <div class="w-full md:w-fit">
                                        <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="green" form-ref="returnCorrectedForm"
                                            class="inline-flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-10 py-3 rounded-xl shadow-lg shadow-amber-500/20 font-black transform transition hover:scale-[1.02] active:scale-95 uppercase text-[10px] tracking-widest whitespace-nowrap w-full md:w-fit">
                                            <i class="fas fa-paper-plane text-xs"></i>
                                            <span>{{ __('Return corrected ticket') }}</span>
                                        </x-confirm-button>
                                    </div>
                                </div>
                            @endif



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

                <!--------------------------- Columna derecha (1 columna de 3) ------------------------------------->
                <div class="lg:col-span-1 space-y-6">
                    <!------ 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"></div>

                        <div class="mb-8 ">
                            <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">
                                    {{ __('Administrative Observations') }}
                                </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">
                                {{ __('Please review the feedback left by the administration. Follow these instructions to provide the necessary information.') }}
                            </p>
                        </div>

                        <!-- Lista de observaciones existentes -------------------------------------------------------->
                        @include('purchase-ticket.partials._observations-list')
                    </div>
                </div>
            </div>

        </div>
    </div>
    </div>
@endsection