@extends('layouts.users.main')

@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') }}"
                                    logoHeight="60px" class="btn btn-primary" />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body" id="printable-content">
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-4">
                        <h1 class="card-title mb-0">{{ __('Used machine details') }}</h1>
                    </div>
                    <div class="mb-4">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <th class="bg-light" style="width: 200px;">{{ __('ID') }}</th>
                                        <td>{{ $machine->sale_ticket_id ?? 'N/A' }}</td>
                                    </tr>
                                    <tr>
                                        <th class="bg-light">{{ __('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_enum_label($machine->type_of_machine) }}</td>
                                    </tr>
                                    {{-- Staff ve el Ticket Status (+ Stage / Approved At) en el bloque de abajo.
                                         Aquí solo mostramos el indicador de 4 estados para el cliente. --}}
                                    @if ($ticket && ! $isStaff)
                                        @php $customerStatus = \App\Enums\CustomerSaleStatusEnum::fromTicket($ticket); @endphp
                                        <tr>
                                            <th class="bg-light">{{ __('Status') }}</th>
                                            <td>
                                                <span class="badge {{ $customerStatus->color() }}">
                                                    <i class="ti {{ $customerStatus->icon() }} me-1"></i>{{ $customerStatus->label() }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <th class="bg-light">{{ __('Sales user') }}</th>
                                        <td>
                                            @if ($machine->saleTicket?->user)
                                                @can('view_user_info')
                                                    <a href="{{ route('users.show', $machine->saleTicket->user->id) }}">
                                                        {{ $machine->saleTicket->user->name }}
                                                        ({{ $machine->saleTicket->user->email }})
                                                    </a>
                                                @else
                                                    {{ $machine->saleTicket->user->name }}
                                                    ({{ $machine->saleTicket->user->email }})
                                                @endcan
                                            @else
                                                {{ __('No user assigned') }}
                                            @endif
                                        </td>
                                    </tr>
                                    @if ($isStaff)
                                        <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">{{ __('Ticket status') }}</th>
                                            <td><span class="badge {{ $ticket->status->color() }}">{{ $ticket->status->label() }}</span></td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light">{{ __('Approved at') }}</th>
                                            <td>
                                                @if ($ticket->isApproved())
                                                    {{ \Carbon\Carbon::parse($ticket->approved_at)->format('d/m/Y H:i') }}
                                                @else
                                                    {{ __('Not approved') }}
                                                @endif
                                            </td>
                                        </tr>
                                    @endif
                                </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 small fw-semibold text-center text-uppercase px-4 py-2 border-top">
                                            {{-- Str::headline() da Title Case ("General Info") y esas keys no existen:
                                                 las cabeceras viven en lang/*/used_machine.php. El fallback cubre las
                                                 secciones que no están mapeadas ahí (techDetail, priceInfo...). --}}
                                            @php
                                                $sectionLabelKey = 'used_machine.sections.' . $sectionKey;
                                            @endphp
                                            {{ \Illuminate\Support\Facades\Lang::has($sectionLabelKey)
                                                ? __($sectionLabelKey)
                                                : __(Str::headline($sectionKey)) }}
                                        </th>
                                    </tr>

                                    @if ($sectionKey === 'generalInfo')
                                        @foreach ($extraGeneralFields as $extraKey => $extraValue)
                                            <tr>
                                                <th class="bg-light text-capitalize px-4 py-2 text-start" style="width: 35%;">
                                                    {{-- Sentence case, no headline(): la key es "Type of machine",
                                                         no "Type Of Machine". --}}
                                                    {{ __(Str::ucfirst(str_replace('_', ' ', $extraKey))) }}
                                                </th>
                                                <td class="px-4 py-2 fw-bold text-main-two">
                                                    {{-- type_of_machine guarda el enum en minúscula ("weaving"); marca,
                                                         modelo y año son texto libre y el helper los deja intactos. --}}
                                                    {{ machine_enum_label($extraValue ?? '-') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif

                                    @foreach ($sectionData as $key => $value)
                                        @if ($isStaff || is_bool($value) || is_array($value) || !is_placeholder_value($value))
                                            <tr>
                                                <th class="bg-light text-capitalize px-4 py-2 text-start" 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>
                                        @endif
                                    @endforeach
                                @endif
                            @endforeach

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

                    {{-- Owner: mismo diseño de tabla que el resto del detalle y DENTRO de
                         #printable-content para que salga en la impresión. --}}
                    @can('view_machine_owner')
                        @if ($machine->owners->isNotEmpty())
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    @foreach ($machine->owners as $owner)
                                        <tr>
                                            <th colspan="2"
                                                class="bg-light small fw-semibold text-center text-uppercase px-4 py-2 border-top">
                                                <i class="ti tabler-user-square-rounded me-1"></i>{{ __('Owner') }}
                                            </th>
                                        </tr>
                                        <tr>
                                            <th class="bg-light text-capitalize px-4 py-2 text-start" style="width: 35%;">{{ __('Name') }}</th>
                                            <td class="px-4 py-2">{{ $owner->name }}</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light text-capitalize px-4 py-2 text-start">{{ __('Country') }}</th>
                                            <td class="px-4 py-2">{{ $owner->country ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light text-capitalize px-4 py-2 text-start">{{ __('Phone') }}</th>
                                            <td class="px-4 py-2">{{ $owner->phone ?? '-' }}</td>
                                        </tr>
                                        <tr>
                                            <th class="bg-light text-capitalize px-4 py-2 text-start">{{ __('Email') }}</th>
                                            <td class="px-4 py-2">{{ $owner->mail ?? '-' }}</td>
                                        </tr>
                                        @if ($owner->additional_information)
                                            <tr>
                                                <th class="bg-light text-capitalize px-4 py-2 text-start">{{ __('Additional information') }}</th>
                                                <td class="px-4 py-2">{!! nl2br(e($owner->additional_information)) !!}</td>
                                            </tr>
                                        @endif
                                    @endforeach
                                </table>
                            </div>
                        @endif
                    @endcan

                </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">
                                                <x-used-machine.image :path="$media->media_path"
                                                    :alt="__('Machine image')" lightbox="machine-gallery"
                                                    class="border" />
                                            </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 element.') }}
                                            </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-fit-cover w-100 h-100 rounded">
                                </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