@extends('layouts.users.app')

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

            {{-- Breadcrumb Component --}}
            <x-breadcrumb :links="$breadcrumbLinks" />

            <div class="mx-auto">

                <div class="tw-wrapper">
                    {{-- Alerts --}}
                    @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>

                {{-- Grid principal (Bootstrap Row) --}}
                <div class="row gy-4">

                    {{-- Columna izquierda --}}
                    <div class="col-lg-8">
                        <div class="d-flex flex-column gap-4">

                            {{-- Detalles del Ticket --}}
                            <div class="tw-wrapper">
                                <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 Purchase 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 supplier details, unit costs, and quantities received for this acquisition record.') }}
                                            <span class="text-main-two dark:text-main-one font-bold">
                                                {{ __('Updating this data will automatically synchronize your stock levels.') }}
                                            </span>
                                        </p>
                                    </div>

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

                            {{-- Team Comments --}}
                            <div class="tw-wrapper">
                                <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>

                                    <livewire:purchase-ticket.team-comment.purchase-ticket-comment-list
                                        :purchaseTicketId="$ticket->id" />
                                    <livewire:purchase-ticket.team-comment.purchase-ticket-create-comment-form
                                        :purchaseTicketId="$ticket->id" :currentStage="$ticket->stage->value" />
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Columna derecha --}}
                    <div class="col-lg-4">
                        <div class="d-flex flex-column gap-4">

                            {{-- Update Status --}}
                            @if ($statusOptions)
                                <div class="tw-wrapper">
                                    <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" x-data>
                                        <div class="absolute top-0 left-0 w-1.5 h-full bg-main-two"></div>

                                        <form method="POST"
                                            action="{{ route('purchase-tickets.update-status', $ticket->id) }}"
                                            x-ref="updateStatusForm">
                                            @csrf
                                            @method('PATCH')

                                            <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one mb-2">
                                                <i class="fas fa-sync-alt me-2"></i>{{ __('Ticket Status') }}
                                            </h2>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 italic mb-6">
                                                {{ __('Manage the lifecycle and administrative status of this purchase record.') }}
                                            </p>

                                            <x-alert
                                                title="{{ __('Changing status will be recorded in history.') }}"
                                                info />

                                            <select name="status" id="status" class="form-select my-4 dark:bg-gray-900 dark:text-white dark:border-gray-700">
                                                @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-4 py-3 bg-amber-500 hover:bg-amber-600 text-white w-full rounded-xl transition-all font-black uppercase text-xs tracking-widest shadow-lg active:scale-95">
                                            <i class="fas fa-check-circle mr-2"></i>
                                            <span>Update Status</span>
                                        </x-confirm-button>
                                    </div>
                                </div>
                            @endif

                            {{-- Update Channels --}}
                            @if ($ticket->stage === App\Enums\PurchaseTicketStageEnum::MACHINE_SEARCH)
                                <div class="tw-wrapper">
                                    <div class="bg-emerald-50/50 dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-100 dark:border-gray-700 p-6" x-data>
                                        <form method="POST"
                                            action="{{ route('purchase-tickets.update-channels', $ticket->id) }}"
                                            x-ref="updateChannelsForm">
                                            @csrf
                                            @method('PATCH')

                                            <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one mb-2">
                                                <i class="fas fa-share-alt me-2"></i>{{ __('Social Channels') }}
                                            </h2>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 italic mb-6">
                                                {{ __('Select the channels where this machine is being actively searched.') }}
                                            </p>

                                            <div class="space-y-3 mb-6">
                                                @foreach ($channelOptions as $channel)
                                                    <div class="flex items-center gap-3 bg-white/50  dark:bg-gray-900/50 p-3 rounded-xl border border-gray-100 dark:border-gray-700 transition-all hover:border-main-two">
                                                        <input class="form-check-input mt-0" type="checkbox"
                                                            name="channels_key[]" value="{{ $channel->value }}"
                                                            id="channel_{{ $channel->value }}"
                                                            @checked(in_array($channel->value, $channelKeys ?? []))>
                                                        <label class="text-sm font-semibold text-gray-700 dark:text-gray-300 cursor-pointer"
                                                            for="channel_{{ $channel->value }}">
                                                            {{ $channel->label() }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </form>

                                        <x-confirm-button type="info" title="Update channels?"
                                            description="Are you sure you want to update the search channels?"
                                            accept-label="Yes, update" accept-color="blue" form-ref="updateChannelsForm"
                                            :action-params="[$ticket->id]"
                                            class="inline-flex items-center justify-center px-4 py-3 bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white w-full rounded-xl transition-all font-black uppercase text-xs tracking-widest shadow-lg active:scale-95">
                                            <i class="fas fa-save mr-2"></i>
                                            <span>Update Channels</span>
                                        </x-confirm-button>
                                    </div>
                                </div>
                            @endif

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

                            @if (!$ticket->isAproved())
                                <div class="tw-wrapper">
                                    <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-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('purchase-ticket.partials._observations-list')

                                        @if ($ticket->status !== \App\Enums\PurchaseTicketStatusEnum::RETURNED)
                                            @include('purchase-ticket.observations.create')
                                        @endif
                                    </div>
                                </div>
                            @endif

                            @if (!$ticket->isAproved())
                                <div class="tw-wrapper">
                                    <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-all">
                                        <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 mb-6">
                                            {{ __('Critical management operations. Use with caution as these actions may affect ticket visibility or archival status.') }}
                                        </p>

                                        @if ($ticket->status != \App\Enums\PurchaseTicketStatusEnum::ARCHIVED)
                                            <div x-data>
                                                <form x-ref="markAsArchived" method="POST"
                                                    action="{{ route('purchase-tickets.archived.mark-as-archived', $ticket->id) }}"
                                                    class="d-none">
                                                    @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="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-xs 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>
                                                    <span>Archive Ticket</span>
                                                </x-confirm-button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection