@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">
                            {{-- Breadcrumb Component --}}
                            <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="Machine 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">{{ __('Used Machine Details') }}</h1>
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th class="bg-light" style="width: 200px;">{{ __('Name') }}</th>
                                        <td>{{ $machine->brand . $machine->model }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Brand') }}</th>
                                        <td>{{ $machine->brand }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Model') }}</th>
                                        <td>{{ $machine->model }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Year') }}</th>
                                        <td>{{ $machine->year }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Type of Machine') }}</th>
                                        <td>{{ __($machine->type_of_machine) }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Status') }}</th>
                                        <td><span
                                                class="badge {{ $machine->sale_status->color() }}">{{ $machine->sale_status->label() }}</span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('Sales user') }}</th>
                                        <td>
                                            @if ($machine->saleTicket?->user)
                                                <a href="{{ route('users.show', $machine->saleTicket->user->id) }}">
                                                    {{ $machine->saleTicket->user->name }}
                                                    ({{ $machine->saleTicket->user->email }})
                                                </a>
                                            @else
                                                {{ __('No User Assigned') }}
                                            @endif
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>


                    {{-- Machine Details Table Dinámica --}}
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            @php
                                $ordered = collect($sectionOrder)
                                    ->filter(fn($key) => isset($machineData[$key]))
                                    ->mapWithKeys(fn($key) => [$key => $machineData[$key]]);

                                $remaining = collect($machineData)->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>

                                    @if ($sectionKey === 'generalInfo')
                                        @foreach ($extraGeneralFields as $extraKey => $extraValue)
                                            <tr>
                                                <th class="bg-light capitalize px-4 py-2 text-left" style="width: 35%;">
                                                    {{ __(Str::headline($extraKey)) }}
                                                </th>
                                                <td class="px-4 py-2 fw-bold text-main-two">
                                                    {{ __($extraValue ?? '-') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif

                                    @foreach ($sectionData as $key => $value)
                                        <tr>
                                            <th class="bg-light capitalize px-4 py-2 text-left" style="width: 35%;">
                                                {{ __(str_replace('_', ' ', $key)) }}
                                            </th>
                                            <td class="px-4 py-2">
                                                @if ($key === 'currency_id')
                                                    {{ \App\Models\Currency::getLabelById($value) ?? $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

                            @if (!empty($machine->additional_information))
                                <tr>
                                    <th colspan="2"
                                        class="bg-light text-left text-sm font-semibold text-center uppercase px-4 py-2 border-t">
                                        {{ __('Additional Information') }}
                                    </th>
                                </tr>
                                <tr>
                                    <td colspan="2" class="px-4 py-2">{!! nl2br(e($machine->additional_information)) !!}</td>
                                </tr>
                            @endif
                        </table>
                    </div>


                </div>

                <div class="p-5">

                    @if ($machine->media && $machine->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">
                                                {{-- Enlace GLightbox para la galería --}}
                                                <a href="{{ Storage::url($media->media_path) }}" class="glightbox"
                                                    data-gallery="machine-gallery">
                                                    <img src="{{ Storage::url($media->media_path) }}" alt="Machine Image"
                                                        class="img-fluid rounded border"
                                                        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>
                    @endif

                    @if ($machine->promo_flyer_path)
                        <div class="mt-4">
                            <h3 class="mb-3">{{ __('Promotional Flyer') }}</h3>
                            <div class="relative aspect-square" wire:key="promo_flyer_preview"
                                style="width: 300px; height: auto">
                                <a href="{{ Storage::url($machine->promo_flyer_path) }}" class="glightbox"
                                    data-gallery="gallery">
                                    <img src="{{ Storage::url($machine->promo_flyer_path) }}" alt="Promotional Flyer"
                                        class="object-cover w-full h-full rounded-lg">
                                </a>
                            </div>
                        </div>
                    @endif
                </div>


            </div>
        </div>
    </div>
@endsection

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


@push('scripts')
    <!--  Lightbox for images-->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        document.addEventListener('livewire:initialized', () => {
            const lightbox = GLightbox({
                touchNavigation: true,
                loop: true,
                autoplayVideos: true
            });
        });
    </script>
@endpush