@extends('layouts.guest.general')

@section('main_content')

    <section class="page-title" style="background-image: url('{{ asset('images/used-machine/Header.png') }}')" id="about">
        <div class="auto-container">
            <h1 class="d-none">Sale of - {{ $machineName }}</h1>
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home.index') }}">{{ __('messages.home') }} </a></li>
                <li><a href="{{ route('guest.sale-used-machines.index') }}">{{ __('Used Machines') }}</a></li>
            </ul>
            <h2> {{ $machineName }} </h2>
        </div>
    </section>

    <div class="project-detail-section py-5">
        <div class="auto-container">
            <div class="upper-box">
                <div class="image">
                    <img src="{{ Storage::url($machine->mainImage?->media_path) }}" alt="{{ $machineName }}"
                        style="max-height: 500px; object-fit: contain; width: 100%; border: 1px solid #eee; padding: 10px; background: #fff; border-radius: 8px;" />
                </div>
                <div class="info-box border-0 shadow-sm"
                    style="border-radius: 12px; background-color: #f8f9fa; border-top: 5px solid #198754 !important;">
                    <div class="title bg-transparent text-success border-bottom mb-3 pb-3"
                        style="font-size: 24px; font-weight: bold;">{{ __('messages.details') }} </div>
                    <ul class="info-list list-value">
                        <li class="color-black1"><strong>{{ __('Brand') }}:</strong> {{ $machine->brand ?? 'N/A' }}</li>
                        <li class="color-black1"><strong>{{ __('Model') }}:</strong> {{ $machine->model ?? 'N/A' }}</li>
                        <li class="color-black1"><strong>{{ __('Year') }}:</strong> {{ $machine->year ?? 'N/A' }}</li>
                        <li class="color-black1 text-capitalize"><strong>{{ __('Technology') }}:</strong>
                            {{ __($machine->type_of_machine ?? 'N/A') }}</li>
                    </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">
                                    <div class="image shadow-sm border border-light"
                                        style="height: 250px; overflow: hidden; border-radius: 8px;">
                                        <img src="{{ Storage::url($imgData->media_path) }}"
                                            alt="{{ $machineName }} Image"
                                            style="object-fit: cover; width: 100%; height: 100%; transition: transform 0.3s ease;"
                                            onmouseover="this.style.transform='scale(1.05)'"
                                            onmouseout="this.style.transform='scale(1)'" />
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                @if ($hasFeatures)
                    <div class="mt-5 pt-4 border-top">
                        <h4 class="mb-4">{{ __('Technical Specifications') }} </h4>
                        <div class="row clearfix mt-3">

                            @foreach ($technicalSpecifications as $sectionKey => $sectionData)
                                <div class="col-lg-6 col-md-12 col-sm-12 mb-4">
                                    <h5 class="fw-bold mb-3 text-success">
                                        {{ Lang::has("used_machine.sections.$sectionKey") ? __("used_machine.sections.$sectionKey") : str_replace('_', ' ', Str::snake($sectionKey)) }}
                                    </h5>
                                    <ul class="option-list">
                                        @foreach ($sectionData as $key => $val)
                                            @if (!is_array($val) && $val !== null && $val !== '')
                                                <li class="border-bottom pb-2 mb-2"
                                                    style="border-color: rgba(0,0,0,0.1) !important;">
                                                    <strong style="color: #4a5568;">
                                                        {{ Lang::has("used_machine.$sectionKey.$key") ? __("used_machine.$sectionKey.$key") : str_replace('_', ' ', $key) }}
                                                        :</strong>
                                                    <span class="float-right" style="color: #718096; font-weight: 500;">
                                                        @if (is_bool($val))
                                                            {{ $val ? __('Yes') : __('No') }}
                                                        @else
                                                            {{ __($val) }}
                                                        @endif
                                                    </span>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach

                            @if (!empty($extraFields))
                                @foreach ($extraFields as $section => $fields)
                                    @if (!empty($fields))
                                        <div class="col-lg-6 col-md-12 col-sm-12 mb-4">
                                            <h5 class="fw-bold mb-3 text-success text-capitalize">
                                                {{ str_replace('_', ' ', $section) }}</h5>
                                            <ul class="option-list">
                                                @foreach ($fields as $field)
                                                    <li class="border-bottom pb-2 mb-2"
                                                        style="border-color: rgba(0,0,0,0.1) !important;">
                                                        <strong style="color: #4a5568;">{{ $field['key'] }}:</strong>
                                                        <span class="float-right"
                                                            style="color: #718096; font-weight: 500;">{{ __($field['value']) }}</span>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                @endforeach
                            @endif

                            @foreach ($customSections as $cSec)
                                @if (!empty($cSec['fields']))
                                    <div class="col-lg-6 col-md-12 col-sm-12 mb-4">
                                        <h5 class="fw-bold mb-3 text-success">{{ $cSec['name'] }}</h5>
                                        <ul class="option-list">
                                            @foreach ($cSec['fields'] as $field)
                                                <li class="border-bottom pb-2 mb-2"
                                                    style="border-color: rgba(0,0,0,0.1) !important;">
                                                    <strong style="color: #4a5568;">{{ $field['key'] }}:</strong>
                                                    <span class="float-right"
                                                        style="color: #718096; font-weight: 500;">{{ __($field['value']) }}</span>
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                @endif
                            @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="auto-container d-flex justify-content-center mt-3 mb-5">
                            <div class="video-column col-lg-8 col-md-10 col-sm-12">
                                <video controls class="w-100 shadow-sm"
                                    style="border-radius: 12px; border: 1px solid #ddd; background: #000;">
                                    <source src="{{ Storage::url($video->media_path) }}" type="video/mp4">
                                    {{ __('Your browser does not support the video tag.') }}
                                </video>
                            </div>
                        </div>
                    </div>
                @endif


                @if (!empty($other['additional_information']))
                    <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') }}">
@endpush