@extends('layouts.guest.general')

@section('main_content')

    <x-page-header
        section="Second-hand machinery header"
        image="images/used-machine/Header.png"
        :h1="__('Sale of - :name', ['name' => $machineName])"
        :title="$machineName"
        :crumbs="[
            ['label' => __('messages.home'), 'url' => '/'],
            ['label' => __('Second-hand machinery'), 'url' => 'used-machines-for-sale'],
        ]"
    />

    @push('styles')
        <style>
            /* Imagen principal un poco más pequeña: se limita el ancho del bloque completo
               (imagen + tarjeta de detalles) y se centra, así la tarjeta sigue pegada al
               borde derecho de la imagen. Mantiene el formato uniforme 4/3 + object-fit. */
            .project-detail-section .upper-box {
                max-width: 960px;
                margin-inline: auto;
            }
        </style>
    @endpush

    <div class="project-detail-section py-5">
        <div class="auto-container">
            <div class="upper-box">
                <div class="image">
                    <x-used-machine.image :path="$machine->mainImage?->media_path" :alt="$machineName"
                        lightbox="machine-gallery" class="shadow-sm border" />
                </div>
                <div class="info-box umd-details border-0 shadow-sm">
                    <div class="umd-details-head">
                        <span class="umd-details-icon"><i class="ti ti-clipboard-list"></i></span>
                        <div class="umd-details-title">{{ __('messages.details') }}</div>
                    </div>
                    @php
                        $details = [
                            ['icon' => 'ti-hash', 'label' => __('ID'), 'value' => $machine->sale_ticket_id, 'keep' => true],
                            ['icon' => 'ti-award', 'label' => __('Brand'), 'value' => $machine->brand],
                            ['icon' => 'ti-cpu', 'label' => __('Model'), 'value' => $machine->model],
                            ['icon' => 'ti-calendar-event', 'label' => __('Year'), 'value' => $machine->year],
                            ['icon' => 'ti-settings', 'label' => __('Technology'), 'value' => $machine->type_of_machine ? machine_enum_label($machine->type_of_machine) : null],
                        ];
                    @endphp
                    <ul class="umd-details-list">
                        @foreach ($details as $d)
                            @if (($d['keep'] ?? false) || ! is_placeholder_value($d['value']))
                                <li>
                                    <span class="k"><i class="ti {{ $d['icon'] }}"></i>{{ $d['label'] }}</span>
                                    <span class="v">{{ $d['value'] ?? 'N/A' }}</span>
                                </li>
                            @endif
                        @endforeach
                    </ul>
                </div>
            </div>

            <div class="middle-box mt-5">
                <h3 class="fw-bold mb-4 border-left border-success border-5 pl-3"
                    style="border-left: 5px solid #198754; padding-left: 15px;"> {{ $machineName }} </h3>
                <div class="mb-5 text-muted" style="line-height: 1.8; font-size: 16px;">
                    {!! $machine->description !!}
                </div>

                @if ($machine->secondaryImages->isNotEmpty())
                    <div class="gallery-box mt-5 pt-4 border-top">
                        <h4 class="mb-4">{{ __('Gallery') }}</h4>
                        <div class="row clearfix mb-4">
                            @foreach ($machine->secondaryImages as $imgData)
                                <div class="col-lg-4 col-md-4 col-sm-12 mb-4">
                                    <x-used-machine.image :path="$imgData->media_path"
                                        :alt="$machineName . ' Image'" lightbox="machine-gallery"
                                        class="shadow-sm border border-light" />
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                @php
                    // Icono por sección conocida (fallback genérico para extra/custom).
                    $sectionIcon = function ($key) {
                        return [
                            'generalInfo'     => 'ti-info-circle',
                            'machineSpecs'    => 'ti-settings',
                            'jacquardDetails' => 'ti-grid-dots',
                            'loomAccessories' => 'ti-tools',
                            'beamsAndRollers' => 'ti-cylinder',
                        ][$key] ?? 'ti-list-details';
                    };

                    // Normalizamos TODO a tarjetas y descartamos filas placeholder (null, '', '0', '-').
                    // Una sección solo entra si le queda al menos una fila visible → oculta títulos vacíos.
                    $specCards = [];

                    foreach ($technicalSpecifications as $sectionKey => $sectionData) {
                        $rows = [];
                        foreach ($sectionData as $key => $val) {
                            if (is_array($val) || is_placeholder_value($val)) {
                                continue;
                            }
                            $rows[] = [
                                'label' => Lang::has("used_machine.$sectionKey.$key") ? __("used_machine.$sectionKey.$key") : str_replace('_', ' ', $key),
                                'value' => $val,
                            ];
                        }
                        if (! empty($rows)) {
                            $specCards[] = [
                                'title' => Lang::has("used_machine.sections.$sectionKey") ? __("used_machine.sections.$sectionKey") : str_replace('_', ' ', Str::snake($sectionKey)),
                                'icon'  => $sectionIcon($sectionKey),
                                'rows'  => $rows,
                            ];
                        }
                    }

                    foreach ($extraFields as $section => $fields) {
                        $rows = [];
                        foreach ($fields as $field) {
                            if (is_placeholder_value($field['value'] ?? null)) {
                                continue;
                            }
                            $rows[] = ['label' => $field['key'] ?? '', 'value' => $field['value']];
                        }
                        if (! empty($rows)) {
                            $specCards[] = ['title' => str_replace('_', ' ', $section), 'icon' => 'ti-list-details', 'rows' => $rows];
                        }
                    }

                    foreach ($customSections as $cSec) {
                        $rows = [];
                        foreach ($cSec['fields'] ?? [] as $field) {
                            if (is_placeholder_value($field['value'] ?? null)) {
                                continue;
                            }
                            $rows[] = ['label' => $field['key'] ?? '', 'value' => $field['value']];
                        }
                        if (! empty($rows)) {
                            $specCards[] = ['title' => $cSec['name'] ?? '', 'icon' => 'ti-list-details', 'rows' => $rows];
                        }
                    }
                @endphp

                @if (! empty($specCards))
                    <div class="umd-specs mt-5 pt-4 border-top">
                        <h4 class="umd-specs-title mb-4">
                            <i class="ti ti-checklist"></i>{{ __('Technical specifications') }}
                        </h4>
                        <div class="umd-grid">
                            @foreach ($specCards as $card)
                                <div class="umd-card">
                                    <div class="umd-card-head">
                                        <span class="umd-card-icon"><i class="ti {{ $card['icon'] }}"></i></span>
                                        <span class="umd-card-title">{{ $card['title'] }}</span>
                                    </div>
                                    <ul class="umd-rows">
                                        @foreach ($card['rows'] as $row)
                                            <li class="umd-row">
                                                <span class="umd-key">{{ $row['label'] }}</span>
                                                <span class="umd-val">
                                                    @if (is_bool($row['value']))
                                                        <span class="umd-pill {{ $row['value'] ? 'is-yes' : 'is-no' }}">
                                                            <i class="ti {{ $row['value'] ? 'ti-check' : 'ti-x' }}"></i>{{ $row['value'] ? __('Yes') : __('No') }}
                                                        </span>
                                                    @else
                                                        {{ machine_enum_label($row['value']) }}
                                                    @endif
                                                </span>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif


                @if ($video)
                    <div class="gallery-box mt-5 pt-4 border-top">
                        <h4 class="mb-4">{{ __('Video demonstration') }}</h4>
                        <div class="d-flex justify-content-center mt-3 mb-5">
                            <video controls preload="metadata" class="um-video shadow-sm">
                                <source src="{{ Storage::url($video->media_path) }}" type="video/mp4">
                                {{ __('Your browser does not support the video element.') }}
                            </video>
                        </div>
                    </div>
                @endif


                @if (!is_placeholder_value($other['additional_information'] ?? null))
                    <div class="mt-5 pt-4 border-top">
                        <h4 class="mb-4">{{ __('Additional information') }}</h4>
                        <div class="mb-5 p-4 shadow-sm"
                            style="background-color: #f6fdf9; border-left: 5px solid #198754; border-radius: 4px;">
                            <p class="text-muted mb-0" style="line-height: 1.8;">
                                {!! nl2br(e($other['additional_information'])) !!}</p>
                        </div>
                    </div>
                @endif


                <div class="mt-5 border-top pt-5">
                    <h3 class="mb-4 text-center">{{ __('messages.more-information') }} </h3>
                    <div class="d-flex justify-content-center mb-5 pb-4 gap-3 flex-wrap" style="gap: 15px;">
                        <div>
                            <a href="#" data-toggle="modal" class="btn-web-catalog px-5 py-3 shadow-sm text-uppercase"
                                style="color: var(--white-color) !important; background-color: var(--color-green-one); border: none; letter-spacing: 1px; font-weight: bold; border-radius: 50px;"
                                data-target="#catalogueContact">{{ __('messages.data-sheet') }} </a>
                        </div>
                        <div>
                            <a href="#" data-toggle="modal" data-target="#contactUsedMachine"
                                class="btn-web-catalog px-5 py-3 shadow-sm text-uppercase"
                                style="color: var(--white-color) !important; background-color: #1d49a3; border: none; letter-spacing: 1px; font-weight: bold; border-radius: 50px;">
                                {{ __('messages.contact-now') }}
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!-- Contact Modal -->
    <div class="modal fade" id="contactUsedMachine" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="border-radius: 8px; border: none; overflow: hidden;">
                <div class="modal-body p-0">
                    <div class="sidebar-widget support-widget m-0">
                        <div class="support-content" style="border-radius: 0;">
                            <div class="title-box">
                                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close"
                                    style="position: absolute; right: 0; top: -10px; opacity: 0.8; z-index: 10;">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                                <h2 class="_h4 text-white text-uppercase" style="font-weight: 600;">
                                    {{ __('messages.product-title-form') }} </h2>
                                <div class="text" style="color: rgba(255,255,255,0.8);">
                                    {{ __('messages.product-subtitle-form') }} </div>
                            </div>
                            <div class="support-form">
                                @livewire('contact-form.contact-used-machine-post', ['division_id' => $division->id, 'machine_id' => $machine->id])
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    </div>

    @livewire('contact-form.catalogue-contact-form', [
        'product_name' => $machineName,
        'product_type' => 'Used machine',
        'dataDivision' => $division,
        'isUsedMachine' => true,
        'product_id' => $machine->id,
    ])

@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/products/show-products.css') }}">
    <!-- Lightbox para galería de imágenes -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">

    <style>
        /* ===== Used Machine Detail (guest) — rediseño scoped ===== */
        .project-detail-section {
            --umd-green: #198754;
            --umd-green-dark: #12633f;
            --umd-ink: #1f2937;
            --umd-muted: #6b7280;
            --umd-line: #eef0f2;
        }

        /* ---- Tarjeta Details (hero) ---- */
        .umd-details {
            padding: 0;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            border: 1px solid #eceff1;
        }

        .umd-details-head {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 20px 22px;
            background: linear-gradient(135deg, var(--umd-green), var(--umd-green-dark));
            color: #fff;
        }

        .umd-details-icon {
            display: grid;
            place-items: center;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: rgba(255, 255, 255, .18);
            font-size: 24px;
            flex: none;
        }

        .umd-details-title {
            font-size: 20px;
            font-weight: 800;
            line-height: 1.1;
        }

        .umd-details-list {
            list-style: none;
            margin: 0;
            padding: 8px 22px 18px;
        }

        .umd-details-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 0;
            border-bottom: 1px solid var(--umd-line);
        }

        .umd-details-list li:last-child {
            border-bottom: 0;
        }

        .umd-details-list .k {
            display: flex;
            align-items: center;
            gap: 9px;
            color: var(--umd-muted);
            font-weight: 600;
            font-size: 14px;
        }

        .umd-details-list .k i {
            color: var(--umd-green);
            font-size: 18px;
        }

        .umd-details-list .v {
            color: var(--umd-ink);
            font-weight: 700;
            text-align: right;
        }

        /* ---- Sección de especificaciones ---- */
        .umd-specs-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            color: var(--umd-ink);
        }

        .umd-specs-title i {
            color: var(--umd-green);
        }

        .umd-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 22px;
        }

        @media (max-width: 768px) {
            .umd-grid {
                grid-template-columns: 1fr;
            }
        }

        .umd-card {
            border: 1px solid #eceff1;
            border-radius: 16px;
            background: #fff;
            overflow: hidden;
            box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }

        .umd-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(16, 24, 40, .10);
            border-color: #d8efe4;
        }

        .umd-card-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 18px;
            border-bottom: 1px solid var(--umd-line);
            background: linear-gradient(90deg, rgba(25, 135, 84, .08), rgba(25, 135, 84, 0));
        }

        .umd-card-icon {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 10px;
            background: var(--umd-green);
            color: #fff;
            font-size: 20px;
            flex: none;
        }

        .umd-card-title {
            font-weight: 800;
            font-size: 15px;
            letter-spacing: .3px;
            text-transform: capitalize;
            color: var(--umd-ink);
        }

        .umd-rows {
            list-style: none;
            margin: 0;
            padding: 6px 18px 10px;
        }

        .umd-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 11px 0;
            border-bottom: 1px dashed var(--umd-line);
        }

        .umd-row:last-child {
            border-bottom: 0;
        }

        .umd-key {
            color: var(--umd-muted);
            font-size: 13.5px;
            font-weight: 600;
            text-transform: capitalize;
        }

        .umd-val {
            color: var(--umd-ink);
            font-weight: 700;
            text-align: right;
            font-size: 14px;
        }

        .umd-pill {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 3px 10px;
            border-radius: 999px;
            font-size: 12.5px;
            font-weight: 700;
        }

        .umd-pill i {
            font-size: 15px;
        }

        .umd-pill.is-yes {
            background: rgba(25, 135, 84, .12);
            color: var(--umd-green-dark);
        }

        .umd-pill.is-no {
            background: #f1f3f5;
            color: #98a2b3;
        }
    </style>
@endpush

@push('scripts')
    <!-- Lightbox para galería de imágenes -->
    <script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            GLightbox({
                touchNavigation: true,
                loop: true,
            });
        });
    </script>
@endpush