@extends('layouts.users.app')

@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-12 col-md-6 mb-3 mb-md-0">
                            <x-breadcrumb :links="$breadcrumbLinks"/>
                        </div>
                        <div class="col-12 col-md-6 d-flex justify-content-start justify-content-md-end">
                            <div class="d-flex gap-3">
                                <a href="{{ url()->previous() }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i>{{ __('Back') }}
                                </a>
                                <x-print-button
                                    targetId="printable-content"
                                    title="Ticket Details"
                                    :logoUrl="asset('/images/main/logo-short/logo-main.png')"
                                    logoHeight="60px"
                                    class="btn btn-primary"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="printable-content">
                    <h1 class="card-title mb-4">{{ __('Sale ticket details') }}</h1>

                    {{-- Ticket Info Table --}}
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <th class="bg-light">{{ __('Ticket ID') }}</th>
                                    <td>{{ $ticket->id }}</td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('User') }}</th>
                                    <td>
                                        @if($ticket->user)
                                            @can('view_user_info')
                                                <a href="{{ route('users.show', $ticket->user) }}">
                                                    {{ $ticket->user->name }} ({{ $ticket->user->email }})
                                                </a>
                                            @else
                                                {{ $ticket->user->name }} ({{ $ticket->user->email }})
                                            @endcan
                                        @else
                                            {{ __('No User Assigned') }}
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Type') }}</th>
                                    <th class="fw-bold">{{ __($ticket->request->machine_type) }}</th>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Stage') }}</th>
                                    <td>
                                        <span class="badge {{ $ticket->stage->color() }}">{{ $ticket->stage->label() }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Approved At') }}</th>
                                    <td>
                                        @if ($ticket->approvet_at)
                                            {{ \Carbon\Carbon::parse($ticket->approvet_at)->format('d/m/Y H:i') }}
                                        @else
                                            {{ __('Not Approved') }}
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Status') }}</th>
                                    <td>
                                        <span class="badge {{ $ticket->status->color() }}">{{ $ticket->status->label() }}</span>
                                    </td>
                                </tr>
                                <tr>
                                    <th class="bg-light">{{ __('Created At') }}</th>
                                    <td>{{ $ticket->created_at->format('d/m/Y H:i') }}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Machine Details Table --}}
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            @php
                                $machineDetails = $ticket->request->machine_details ?? [];

                                $ordered = collect($sectionOrder)
                                    ->filter(fn($key) => isset($machineDetails[$key]))
                                    ->mapWithKeys(fn($key) => [$key => $machineDetails[$key]]);

                                $remaining = collect($machineDetails)->except($sectionOrder);

                                $sections = $ordered->merge($remaining);
                            @endphp

                            @foreach($sections as $sectionKey => $sectionData)
                                @if(is_array($sectionData) && !empty($sectionData))
                                    <tr>
                                        <th colspan="2" class="bg-light text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                            {{ __(Str::headline($sectionKey)) }}
                                        </th>
                                    </tr>

                                    {{-- Inyectar brand/model/year al inicio de generalInfo --}}
                                    @if($sectionKey === 'generalInfo')
                                        @foreach($extraGeneralFields as $extraKey => $extraValue)
                                            <tr>
                                                <th class="bg-light capitalize px-4 py-2 text-left">
                                                    {{ __(Str::headline($extraKey)) }}
                                                </th>
                                                <td class="px-4 py-2">{{ $extraValue ?? '-' }}</td>
                                            </tr>
                                        @endforeach
                                    @endif

                                    @foreach($sectionData as $key => $value)
                                        <tr>
                                            <th class="bg-light capitalize px-4 py-2 text-left">
                                                {{ __(str_replace('_', ' ', $key)) }}
                                            </th>
                                            <td class="px-4 py-2">
                                                @if($key === 'currency_id')
                                                    {{ \App\Models\Currency::getLabelById($value) }}
                                                @elseif(is_bool($value))
                                                    {{ $value ? __('Yes') : __('No') }}
                                                @elseif(is_array($value))
                                                    {{ implode(', ', array_map(fn($item) => __($item), $value)) }}
                                                @else
                                                    {{ __($value) }}
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                            @endforeach
                        </table>
                    </div>
                </div>

                {{-- Media Section --}}
                <div class="px-5 pt-4">
                    @if($ticket->media->isNotEmpty())
                        <div class="mt-4">
                            @if($images->isNotEmpty())
                                <div class="mb-4">
                                    <h4 class="mb-3">{{ __('Images') }}</h4>
                                    <div class="row g-3">
                                        @foreach($images as $media)
                                            <div class="col-6 col-md-4 col-lg-3">
                                                <a href="{{ Storage::url($media->media_path) }}"
                                                   class="glightbox"
                                                   data-gallery="ticket-gallery">
                                                    <img src="{{ Storage::url($media->media_path) }}"
                                                         class="img-fluid rounded border"
                                                         alt="Ticket Image"
                                                         style="object-fit: cover; width: 100%; height: 150px;">
                                                </a>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            @if($video)
                                <div>
                                    <h4 class="mb-3">{{ __('Video') }}</h4>
                                    <div class="row g-3">
                                        <div class="col-12 col-md-6">
                                            <video controls class="w-100 rounded border">
                                                <source src="{{ Storage::url($video->media_path) }}" type="video/mp4">
                                                {{ __('Your browser does not support the video tag.') }}
                                            </video>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="mt-4">
                            <h3 class="card-title mb-4">{{ __('Media') }}</h3>
                            <p>{{ __('No media available for this ticket.') }}</p>
                        </div>
                    @endif
                </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>
        document.addEventListener('DOMContentLoaded', function () {
            const lightbox = GLightbox({
                selector: '.glightbox',
                touchNavigation: true,
                loop: true,
                gallery: 'ticket-gallery'
            });
        });
    </script>
@endpush