@extends('layouts.users.main')

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

            {{-- Breadcrumb (barra de navegación) --}}
            <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-wrap justify-content-between align-items-center gap-2 mb-4">
                <h4 class="fw-bold mb-0">{{ __('Ticket #:id', ['id' => $ticket->id]) }}</h4>
                <div class="d-flex flex-wrap gap-1">
                    {{-- Cliente: solo ve el status (p.ej. Returned), NO el stage interno ni el
                         indicador con ícono de flecha (que parecía un botón de regresar). --}}
                    <span class="badge {{ $ticket->status->color() }}">{{ ucfirst($ticket->status->label()) }}</span>
                </div>
            </div>

            <div class="row g-4">
                {{-- ===== Left column (2/3) ===== --}}
                <div class="col-lg-8">
                    <div class="card mb-4">
                        <div class="card-header border-bottom">
                            <h5 class="card-title mb-1 fw-bold text-uppercase">{{ __('Update ticket information') }}</h5>
                            <p class="text-muted small mb-0">
                                {{ __('Modify the machine\'s technical specifications, pricing, and availability details.') }}
                                {{ __('Ensure all changes are saved to keep the equipment record up to date.') }}
                            </p>
                        </div>
                        <div class="card-body">
                            <livewire:purchase-ticket.edit.purchase-ticket-edit-form :purchaseTicket="$ticket" :editContext="$ticket->status->value" />

                            @if ($ticket->status === \App\Enums\PurchaseTicketStatusEnum::RETURNED)
                                <div class="d-flex justify-content-end pt-4 mt-4 border-top">
                                    <form id="returnCorrectedForm" method="POST"
                                        action="{{ route('purchase-tickets.observations.update-returned-ticket', $ticket) }}">
                                        @csrf
                                        @method('PATCH')
                                    </form>
                                    <button type="button" class="btn btn-warning"
                                        onclick="event.preventDefault(); const f = document.getElementById('returnCorrectedForm'); Swal.fire({ title: '{{ __('Send corrected information?') }}', text: '{{ __('Are you sure you want to send the corrected information? This action will notify the team.') }}', icon: 'question', showCancelButton: true, confirmButtonText: '{{ __('Yes, send') }}', 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-send me-1"></i>{{ __('Return corrected ticket') }}
                                    </button>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- ===== Right column (1/3) ===== --}}
                <div class="col-lg-4">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h5 class="card-title mb-1 fw-bold text-uppercase">{{ __('Administrative observations') }}</h5>
                            <p class="text-muted small mb-0">
                                {{ __('Please review the feedback left by the administration. Follow these instructions to provide the necessary information.') }}
                            </p>
                        </div>
                        <div class="card-body">
                            @include('purchase-ticket.partials._observations-list', ['showStage' => false])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection