@extends('layouts.users.main')

@section('content')
    @php
        // Candado de solo-lectura para staff (draft/returned/archived/rejected). Se respalda con
        // abort_if(...isLockedFor...) en el backend de cada componente que muta.
        $editLocked = $ticket->isLockedFor(auth()->user());
    @endphp
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">

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

            @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-triangle 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 Badges. Antes de que la máquina esté aprobada esto se muestra
                 como edición de ticket (todavía no hay nada de catálogo que editar); una vez
                 aprobada/publicada se muestra como edición de máquina de catálogo. --}}
            <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">
                    @if (! $isApproved)
                        <h4 class="mb-1 mt-3">{{ __('Edit sales ticket #:id', ['id' => $ticket->id]) }}</h4>
                        <p class="text-muted mb-0">{{ __('Update transaction details, machine information and customer collaboration.') }}</p>
                    @else
                        <h4 class="mb-1 mt-3">{{ __('Edit machine for ticket #:id', ['id' => $ticket->id]) }}</h4>
                        <p class="text-muted mb-0">{{ __('Update the machine\'s technical specifications, pricing, and availability details.') }}</p>
                    @endif
                </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-engine ti-lg"></i></span>
                                    </div>
                                    <div>
                                        <h5 class="mb-0 fw-bold">{{ __('Machine 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-specs" role="tab">
                                            <i class="ti tabler-list-details me-2"></i>{{ __('Machine specs') }}
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#tab-media" role="tab">
                                            <i class="ti tabler-photo-star me-2"></i>{{ __('Multimedia') }}
                                        </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>
                                    @if ($isApproved)
                                        <li class="nav-item">
                                            <a class="nav-link" data-bs-toggle="tab" href="#tab-sales" role="tab">
                                                <i class="ti tabler-currency-dollar me-2"></i>{{ __('Sales tracking') }}
                                            </a>
                                        </li>
                                    @endif
                                </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: Machine Specs (wizard) ===== --}}
                        <div class="tab-pane fade show active" id="tab-specs" role="tabpanel">
                            <livewire:sale-used-machine.used-machine-edit-form :machine="$machine" :ticket="$ticket" />
                        </div>

                        {{-- ===== TAB 2: Multimedia. La galería de la máquina (used_machine_media) se
                             administra igual desde el día 1, sin importar si el ticket ya fue aprobado;
                             el flyer promocional solo tiene sentido una vez la máquina fue aceptada. ===== --}}
                        <div class="tab-pane fade" id="tab-media" role="tabpanel">
                            <div class="card shadow-sm mb-4">
                                <div class="card-header border-bottom">
                                    <h5 class="card-title mb-0"><i class="ti tabler-photo-star text-primary me-2"></i>{{ __('Media & promotional assets') }}</h5>
                                </div>
                                <div class="card-body mt-3">
                                    <p class="text-muted mb-4">{{ __('Manage the visual presentation of this machine. High-quality assets increase customer engagement.') }}</p>

                                    <div class="row g-4">
                                        <div class="{{ $isApproved ? 'col-md-6' : 'col-md-12' }}">
                                            <div class="border border-primary rounded p-5 text-center h-100 d-flex flex-column justify-content-center align-items-center bg-label-secondary {{ $editLocked ? 'opacity-50' : 'cursor-pointer' }}"
                                                style="border-style: dashed !important; border-width: 2px !important;"
                                                x-data
                                                @if (! $editLocked) x-on:click.prevent="$dispatch('openModal', { component: 'sale-used-machine.used-machine-edit-media-form', arguments: { machineId: {{ $machine->id }} } })" @endif>
                                                <div class="avatar avatar-xl mb-3">
                                                    <span class="avatar-initial rounded-circle bg-primary shadow-sm"><i class="ti tabler-camera ti-lg text-white"></i></span>
                                                </div>
                                                <h5 class="mb-1 fw-bold">{{ __('Machine gallery') }}</h5>
                                                <p class="text-muted small mb-4">{{ __('Upload, reorder, and set primary images & videos.') }}</p>
                                                @if ($editLocked)
                                                    <span class="badge bg-label-secondary rounded-pill px-4"><i class="ti tabler-lock me-1"></i>{{ __('View only') }}</span>
                                                @else
                                                    <button type="button" class="btn btn-primary rounded-pill px-4 shadow-sm"><i class="ti tabler-edit me-2"></i>{{ __('Manage gallery') }}</button>
                                                @endif
                                            </div>
                                        </div>

                                        @if ($isApproved)
                                            <div class="col-md-6">
                                                <div class="border border-info rounded p-5 text-center h-100 d-flex flex-column justify-content-center align-items-center bg-label-info {{ $editLocked ? 'opacity-50' : 'cursor-pointer' }}"
                                                    style="border-style: dashed !important; border-width: 2px !important;"
                                                    x-data
                                                    @if (! $editLocked) x-on:click.prevent="$dispatch('openModal', { component: 'sale-used-machine.used-machine-edit-promo-flyer-form', arguments: { machineId: {{ $machine->id }} } })" @endif>
                                                    <div class="avatar avatar-xl mb-3">
                                                        <span class="avatar-initial rounded-circle bg-info shadow-sm"><i class="ti tabler-file-invoice ti-lg text-white"></i></span>
                                                    </div>
                                                    <h5 class="mb-1 fw-bold">{{ __('Promotional flyer') }}</h5>
                                                    <p class="text-muted small mb-4">{{ __('Upload and manage the PDF/Image flyer for customers.') }}</p>
                                                    @if ($editLocked)
                                                        <span class="badge bg-label-secondary rounded-pill px-4"><i class="ti tabler-lock me-1"></i>{{ __('View only') }}</span>
                                                    @else
                                                        <button type="button" class="btn btn-info rounded-pill px-4 shadow-sm"><i class="ti tabler-upload me-2"></i>{{ __('Manage flyer') }}</button>
                                                    @endif
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- ===== TAB 3: Workflow ===== --}}
                        <div class="tab-pane fade" id="tab-workflow" role="tabpanel">

                                {{-- Quick actions: return with comments (draft only) + activity + team comments --}}
                                <div class="row g-4 mb-4">
                                    @if (! $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="{{ $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="{{ $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->status != \App\Enums\SaleTicketStatusEnum::ARCHIVED && auth()->user()->can('archive_sales_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 method="POST" action="{{ route('sale-tickets.archived.mark-as-archived', $ticket->id) }}" id="archiveForm">
                                                @csrf
                                                @method('PATCH')
                                            </form>
                                            <button type="button" class="btn btn-label-danger w-100"
                                                onclick="Swal.fire({ title: '{{ __('Archive this ticket?') }}', text: '{{ __('It will be hidden from the main list but can be restored later.') }}', icon: 'warning', showCancelButton: true, confirmButtonText: '{{ __('Yes, archive') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-danger', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((r) => { if (r.isConfirmed) document.getElementById('archiveForm').submit(); });">
                                                <i class="ti tabler-archive me-1"></i>{{ __('Archive ticket') }}
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>

                        {{-- ===== TAB 4: Sales Tracking (solo si ya está aprobada/publicada) ===== --}}
                        @if ($isApproved)
                            <div class="tab-pane fade" id="tab-sales" role="tabpanel">
                                @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-arrows-exchange ti-sm"></i></span>
                                        <h5 class="card-title mb-0 fw-bold">{{ __('Ticket status management') }}</h5>
                                    </div>
                                    <div class="card-body mt-3">
                                        <form method="POST" action="{{ route('sale-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">{{ __('Update current stage status') }}</label>
                                                    <select name="status" class="form-select">
                                                        @foreach ($statusOptions as $status)
                                                            <option value="{{ $status->value }}" {{ $ticket->status === $status ? 'selected' : '' }}>
                                                                {{ ucfirst($status->label()) }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-4">
                                                    <button type="button" class="btn btn-warning w-100"
                                                        onclick="event.preventDefault(); const f = this.closest('form'); Swal.fire({ title: '{{ __('Are you sure?') }}', text: '{{ __('You are about to update the status of this ticket.') }}', icon: 'warning', showCancelButton: true, confirmButtonText: '{{ __('Yes, update') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((result) => { if (result.isConfirmed) { f.submit(); } });">
                                                        <i class="ti tabler-check me-1"></i>{{ __('Update') }}
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                                @endif

                                <div class="row g-4">
                                    <div class="col-md-12">
                                        <a href="{{ route('used-machine-requests.index', $machine->id) }}"
                                            class="card shadow-sm h-100 text-decoration-none text-body">
                                            <div class="card-body d-flex align-items-center">
                                                <span class="badge bg-label-secondary rounded p-2 me-3"><i class="ti tabler-table ti-sm"></i></span>
                                                <div class="flex-grow-1">
                                                    <h6 class="mb-0 fw-bold">{{ __('Customer requests') }}</h6>
                                                    <small class="text-muted">{{ __('View the requests table') }}</small>
                                                </div>
                                                <i class="ti tabler-chevron-right text-muted"></i>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endif

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

            {{-- Offcanvas: Return with Comments, Activity Timeline & Team Hub (compartidos por los tabs Workflow/Sales Tracking) --}}
            @if (! $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('sale-ticket.partials._observations_list')

                            @if ($ticket->status !== \App\Enums\SaleTicketStatusEnum::RETURNED && ! $editLocked)
                                <div class="mt-4 pt-4 border-top">
                                    @include('sale-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:sale-ticket.team-comment.sale-ticket-comment-list :saleTicketId="$ticket->id" :bootstrap="true" :key="'comments-list-' . $ticket->id" />
                        </div>
                        <div class="border-top p-4">
                            <livewire:sale-ticket.team-comment.sale-ticket-create-comment-form :saleTicketId="$ticket->id" :currentStage="$ticket->stage->value" :bootstrap="true" :key="'comments-form-' . $ticket->id" />
                        </div>
                    </div>
                </div>

        </div>
    </div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        let glb;

        function initGlightbox() {
            if (glb && typeof glb.destroy === 'function') glb.destroy();
            glb = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true,
                autoplayVideos: true
            });
        }
        initGlightbox();
        window.addEventListener('openModal', () => {
            initGlightbox();
            setTimeout(initGlightbox, 500);
        });
        Livewire.on('mediaUpdated', () => {
            initGlightbox();
            setTimeout(initGlightbox, 500);
        });
        Livewire.on('promoFlyerUpdated', () => {
            initGlightbox();
            setTimeout(initGlightbox, 500);
        });

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