@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'))
                        <div class="mb-4"><x-alert title="{{ session('success') }}" positive solid /></div>
                    @endif
                    @if (session('error'))
                        <div class="mb-4"><x-alert title="{{ session('error') }}" negative solid /></div>
                    @endif
                </div>
                {{-- Header: Title & Status Badges --}}
                <div class="mb-6">
                    @if ($machine->saleTicket)
                        @php $ticket = $machine->saleTicket; @endphp
                        <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() }}">
                                {{ 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>
                        @else
                            <div>
                                <h1 class="text-xl font-bold text-gray-800 dark:text-white m-0">Machine #{{ $machine->id }}
                                </h1>
                            </div>
                    @endif

                    <span class="px-3 py-1 text-xs rounded-full font-bold shadow-sm {{ $machine->sale_status->color() }}">
                        {{ ucfirst($machine->sale_status->label()) }}
                    </span>
                </div>
            </div>

            {{-- Livewire Component --}}
            <div class="dark:prose-invert">
                <livewire:sale-used-machine.used-machine-edit-form :machine="$machine" />
            </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);
        });
    </script>
@endpush