@extends('layouts.users.main')

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

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

            {{-- ------------- ALERTS ------------- --}}
            @if (session('success'))
                <div class="alert alert-success alert-dismissible d-flex align-items-center mb-4" role="alert">
                    <i class="ti tabler-circle-check me-2"></i><span>{{ session('success') }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible d-flex align-items-center mb-4" role="alert">
                    <i class="ti tabler-alert-circle me-2"></i><span>{{ session('error') }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            {{-- ------------- HEADER: Title & Status ------------- --}}
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
                <div class="d-flex flex-column justify-content-center">
                    <h4 class="mb-1 mt-3">{{ __('Ticket #:id', ['id' => $ticket->id]) }}</h4>
                    <p class="text-muted mb-0">{{ __('Update the machine request, manage its status and collaborate with the team.') }}</p>
                </div>
                <div class="d-flex align-content-center flex-wrap gap-2">
                    <span class="badge {{ $ticket->status->color() }}">{{ ucfirst($ticket->status->label()) }}</span>
                    <span class="badge {{ $ticket->stage->color() }}">{{ ucfirst($ticket->stage->label()) }}</span>
                </div>
            </div>

            <div class="row g-4">
                {{-- ===================== STATIC SIDEBAR (tabs) ===================== --}}
                <div class="col-xl-3 col-lg-4">
                    <div class="position-sticky" style="top: 5.5rem;">
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-4">
                                    <div class="avatar avatar-lg me-3">
                                        <span class="avatar-initial rounded bg-label-primary"><i class="ti tabler-shopping-cart ti-lg"></i></span>
                                    </div>
                                    <div>
                                        <h5 class="mb-0 fw-bold">{{ __('Ticket setup') }}</h5>
                                        <small class="text-muted">{{ __('Control panel') }}</small>
                                    </div>
                                </div>

                                <ul class="nav nav-pills flex-column gap-1" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#tab-details" role="tab">
                                            <i class="ti tabler-list-details me-2"></i>{{ __('Ticket details') }}
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tab-workflow" role="tab">
                                            <i class="ti tabler-arrows-exchange me-2"></i>{{ __('Workflow') }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- ===================== TAB CONTENT ===================== --}}
                <div class="col-xl-9 col-lg-8">
                    <div class="tab-content p-0 bg-transparent shadow-none border-0">

                        {{-- ===== TAB 1: Ticket Details (form maestro con su botón dentro del card) ===== --}}
                        <div class="tab-pane fade show active" id="tab-details" role="tabpanel">
                            <livewire:purchase-ticket.edit.purchase-ticket-edit-form :purchaseTicket="$ticket"
                                :editContext="$ticket->status->value" />
                        </div>

                        {{-- ===== TAB 2: Management (status + channels, controles admin de purchase) ===== --}}
                        {{-- ===== TAB 2: Workflow (status + channels + secciones en offcanvas + danger zone) ===== --}}
                        <div class="tab-pane fade" id="tab-workflow" role="tabpanel">

                            {{-- Status Management --}}
                            @if ($statusOptions)
                                <div class="card shadow-sm mb-4">
                                    <div class="card-header border-bottom d-flex align-items-center">
                                        <span class="badge bg-label-warning rounded p-2 me-3"><i class="ti tabler-refresh ti-sm"></i></span>
                                        <div>
                                            <h5 class="card-title mb-0 fw-bold">{{ __('Ticket status') }}</h5>
                                            <small class="text-muted">{{ __('Manage the lifecycle and administrative status of this purchase record.') }}</small>
                                        </div>
                                    </div>
                                    <div class="card-body mt-3">
                                        <div class="alert alert-info d-flex align-items-center mb-3" role="alert">
                                            <i class="ti tabler-info-circle me-2"></i>
                                            <span class="small">{{ __('Changing status will be recorded in history.') }}</span>
                                        </div>

                                        <form method="POST" action="{{ route('purchase-tickets.update-status', $ticket->id) }}" id="updateStatusForm">
                                            @csrf
                                            @method('PATCH')
                                            <div class="row align-items-end g-3">
                                                <div class="col-md-8">
                                                    <label class="form-label fw-bold small text-uppercase" for="status">{{ __('Update current status') }}</label>
                                                    <select name="status" id="status" class="form-select">
                                                        @foreach ($statusOptions as $status)
                                                            <option value="{{ $status->value }}" {{ $ticket->status === $status ? 'selected' : '' }}>
                                                                {{ ucfirst($status->labelWithIcon()) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn btn-warning w-100"
                                                        onclick="event.preventDefault(); const f = document.getElementById('updateStatusForm'); Swal.fire({ title: '{{ __('Update status?') }}', text: '{{ __('Are you sure you want to update the status of this ticket?') }}', icon: 'question', showCancelButton: true, confirmButtonText: '{{ __('Yes, update') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((r) => { if (r.isConfirmed) f.submit(); });">
                                                        <i class="ti tabler-circle-check me-1"></i>{{ __('Update') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            @endif

                            {{-- Social Channels (solo en etapa de búsqueda de máquina) --}}
                            @if ($ticket->stage === App\Enums\PurchaseTicketStageEnum::MACHINE_SEARCH)
                                <div class="card shadow-sm mb-4">
                                    <div class="card-header border-bottom d-flex align-items-center">
                                        <span class="badge bg-label-info rounded p-2 me-3"><i class="ti tabler-share ti-sm"></i></span>
                                        <div>
                                            <h5 class="card-title mb-0 fw-bold">{{ __('Social channels') }}</h5>
                                            <small class="text-muted">{{ __('Select the channels where this machine is being actively searched.') }}</small>
                                        </div>
                                    </div>
                                    <div class="card-body mt-3">
                                        <form method="POST" action="{{ route('purchase-tickets.update-channels', $ticket->id) }}" id="updateChannelsForm">
                                            @csrf
                                            @method('PATCH')
                                            <div class="d-flex flex-column gap-2 mb-3">
                                                @foreach ($channelOptions as $channel)
                                                    <div class="form-check border rounded p-3 ps-5">
                                                        <input class="form-check-input" type="checkbox" name="channels_key[]"
                                                            value="{{ $channel->value }}" id="channel_{{ $channel->value }}"
                                                            @checked(in_array($channel->value, $channelKeys ?? []))>
                                                        <label class="form-check-label fw-medium" for="channel_{{ $channel->value }}">
                                                            {{ $channel->label() }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </form>

                                        <button type="button" class="btn btn-primary w-100"
                                            onclick="event.preventDefault(); const f = document.getElementById('updateChannelsForm'); Swal.fire({ title: '{{ __('Update channels?') }}', text: '{{ __('Are you sure you want to update the search channels?') }}', icon: 'question', showCancelButton: true, confirmButtonText: '{{ __('Yes, update') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((r) => { if (r.isConfirmed) f.submit(); });">
                                            <i class="ti tabler-device-floppy me-1"></i>{{ __('Update channels') }}
                                        </button>
                                    </div>
                                </div>
                            @endif

                            {{-- Quick actions: return with comments (no aprobado) + activity + team hub --}}
                            <div class="row g-4 mb-4">
                                @if (! $ticket->isApproved())
                                    <div class="col-md-4">
                                        <button type="button" class="card shadow-sm h-100 w-100 border-0 text-start"
                                            data-bs-toggle="offcanvas" data-bs-target="#offcanvasReturnComments">
                                            <div class="card-body d-flex align-items-center">
                                                <span class="badge bg-label-warning rounded p-2 me-3"><i class="ti tabler-message-circle-exclamation ti-sm"></i></span>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-0 fw-bold">{{ __('Return with comments') }}</h6>
                                                    <small class="text-muted">{{ __('Send back to customer') }}</small>
                                                </div>
                                                <i class="ti tabler-chevron-right text-muted"></i>
                                            </div>
                                        </button>
                                    </div>
                                @endif
                                <div class="{{ $ticket->isApproved() ? 'col-md-6' : 'col-md-4' }}">
                                    <button type="button" class="card shadow-sm h-100 w-100 border-0 text-start"
                                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasActivity">
                                        <div class="card-body d-flex align-items-center">
                                            <span class="badge bg-label-primary rounded p-2 me-3"><i class="ti tabler-history ti-sm"></i></span>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0 fw-bold">{{ __('Activity timeline') }}</h6>
                                                <small class="text-muted">{{ __('Status & stage changes') }}</small>
                                            </div>
                                            <i class="ti tabler-chevron-right text-muted"></i>
                                        </div>
                                    </button>
                                </div>
                                <div class="{{ $ticket->isApproved() ? 'col-md-6' : 'col-md-4' }}">
                                    <button type="button" class="card shadow-sm h-100 w-100 border-0 text-start"
                                        data-bs-toggle="offcanvas" data-bs-target="#offcanvasComments">
                                        <div class="card-body d-flex align-items-center">
                                            <span class="badge bg-label-success rounded p-2 me-3"><i class="ti tabler-messages ti-sm"></i></span>
                                            <div class="flex-grow-1">
                                                <h6 class="mb-0 fw-bold">{{ __('Team hub') }}</h6>
                                                <small class="text-muted">{{ __('Internal team notes') }}</small>
                                            </div>
                                            <i class="ti tabler-chevron-right text-muted"></i>
                                        </div>
                                    </button>
                                </div>
                            </div>

                            {{-- Danger zone: system actions.
                                 El carril del stage ya está garantizado (para abrir esta página el
                                 controller autoriza `edit`, que usa el mismo carril que `archived`),
                                 así que aquí solo falta el permiso plano de archivar. --}}
                            @if (! $ticket->isApproved() && $ticket->status != \App\Enums\PurchaseTicketStatusEnum::ARCHIVED && auth()->user()->can('archive_purchase_ticket'))
                                <div class="card shadow-sm border-danger">
                                    <div class="card-header border-bottom d-flex align-items-center">
                                        <span class="badge bg-label-danger rounded p-2 me-3"><i class="ti tabler-shield-lock ti-sm"></i></span>
                                        <div>
                                            <h5 class="card-title mb-0 fw-bold text-danger">{{ __('System actions') }}</h5>
                                            <small class="text-muted">{{ __('Critical operations. Use with caution.') }}</small>
                                        </div>
                                    </div>
                                    <div class="card-body mt-3">
                                        <form id="markAsArchivedForm" method="POST"
                                            action="{{ route('purchase-tickets.archived.mark-as-archived', $ticket->id) }}" class="d-none">
                                            @csrf
                                            @method('PATCH')
                                        </form>
                                        <button type="button" class="btn btn-label-danger w-100"
                                            onclick="event.preventDefault(); const f = document.getElementById('markAsArchivedForm'); Swal.fire({ title: '{{ __('Are you sure you want to archive this ticket?') }}', text: '{{ __('This ticket will disappear from the ticket list, but you can restore it later if needed.') }}', icon: 'warning', showCancelButton: true, confirmButtonText: '{{ __('Yes, archive') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((r) => { if (r.isConfirmed) f.submit(); });">
                                            <i class="ti tabler-archive me-1"></i>{{ __('Archive ticket') }}
                                        </button>
                                    </div>
                                </div>
                            @endif
                        </div>

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

            {{-- ===================== OFFCANVAS: Return / Activity / Team Hub ===================== --}}
            @if (! $ticket->isApproved())
                <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasReturnComments" aria-labelledby="offcanvasReturnCommentsLabel">
                    <div class="offcanvas-header border-bottom">
                        <h5 class="offcanvas-title fw-bold" id="offcanvasReturnCommentsLabel">
                            <i class="ti tabler-message-circle-exclamation text-warning me-2"></i>{{ __('Return with comments') }}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <p class="text-muted small mb-4">{{ __('Send back to customer for corrections. Visible to the client.') }}</p>
                        @include('purchase-ticket.partials._observations-list')

                        @if ($ticket->status !== \App\Enums\PurchaseTicketStatusEnum::RETURNED)
                            <div class="mt-4 pt-4 border-top">
                                @include('purchase-ticket.observations.create')
                            </div>
                        @endif
                    </div>
                </div>
            @endif

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasActivity" aria-labelledby="offcanvasActivityLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasActivityLabel">
                        <i class="ti tabler-history text-primary me-2"></i>{{ __('Activity timeline') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body">
                    @include('components.tickets.activity-history', ['activities' => $activities, 'bootstrap' => true])
                </div>
            </div>

            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasComments" aria-labelledby="offcanvasCommentsLabel">
                <div class="offcanvas-header border-bottom">
                    <h5 class="offcanvas-title fw-bold" id="offcanvasCommentsLabel">
                        <i class="ti tabler-messages text-success me-2"></i>{{ __('Team hub') }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body d-flex flex-column p-0">
                    <div class="flex-grow-1 overflow-y-auto p-4">
                        <livewire:purchase-ticket.team-comment.purchase-ticket-comment-list :purchaseTicketId="$ticket->id" :key="'pt-comments-list-' . $ticket->id" />
                    </div>
                    <div class="border-top p-4">
                        <livewire:purchase-ticket.team-comment.purchase-ticket-create-comment-form
                            :purchaseTicketId="$ticket->id" :currentStage="$ticket->stage->value" :key="'pt-comments-form-' . $ticket->id" />
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection