@extends('layouts.guest.general')

@section('main_content')
    {{-- nav --}}
    <section class="page-title"
             style="background-image: url('{{ asset('images/used-machine/Header.png') }}')"
             id="about">
        <h1 class="d-none">Our Exclusive Products - ITG Group</h1>
        <div class="auto-container">
            <ul class="bread-crumb clearfix">
                <li><a href="{{ route('home.index') }}">{{ __('messages.home') }} </a></li>
                <li><a href="{{ route('guest.sale-used-machines.index') }}">{{ __('List of used machines') }} </a></li>
            </ul>
            <h2>{{ $machine->name }} </h2>
        </div>
    </section>

    {{-- SECTION OF PRODUCTS --}}
    <div class="sidebar-page-container">
        <div class="auto-container">
            <div class="row clearfix">
                <!-- Sidebar Side -->
                <div class="sidebar-side left-sidebar col-lg-4 col-md-12 col-sm-12">
                    <aside class="sidebar sticky-top">
                        <div class="sidebar-widget support-widget">
                            <div class="support-content">
                                <div class="title-box">
                                    <h2 class="_h4 text-white"> {{ __('messages.product-title-form') }} </h2>
                                    <div class="text">{{ __('messages.product-subtitle-form') }} </div>
                                </div>
                                <!-- Support Form -->
                                <div class="support-form">
                                    @livewire('contact-form.contact-used-machine-post', ['division_id' => $division->id,
                                    'machine_id' => $machine->id])
                                </div>
                            </div>
                        </div>
                            <!-- Download Widget -->
                            <div class="sidebar-widget download-widget">
                                <div class="widget-content">
                                    <div class="sidebar-title">
                                        <h2 class="_h4 color-green1">{{ __('messages.download-now') }} </h2>
                                    </div>
                                    <ul class="download-list">
                                        <li>
                                            <a data-toggle="modal" href="#" data-target="#catalogueContact">
                                                {{ __('messages.catalogue') }} <span class="icon flaticon-edit"></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                    </aside>
                </div>
                <!-- Content Side -->
                <div class="content-side right-sidebar col-lg-8 col-md-12 col-sm-12">
                    <div class="service-detail">
                        <div class="inner-box">
                            <div class="image">
                                <img
                                    src="{{ Storage::url($machine->mainImage?->media_path) }}"
                                    class="img-fluid d-block mx-auto"
                                    style=" max-height: 500px;"
                                    alt="Image products"/>
                            </div>


                            @if (!empty($machine->secondaryImages))
                                <div class="products-section bg-white products-section2 products-section3">
                                    <div class="products-carousel owl-carousel owl-theme products-carousel3">
                                        @foreach ($machine->secondaryImages as  $imgData)
                                            <!-- Product Block -->
                                            <div class="product-block">
                                                <div class="inner-box">
                                                    <div class="color-layer color-layer2"></div>
                                                    <div class="image-box">
                                                        <div class="image image2">
                                                            <a href="javascript:void(0)"><img
                                                                    src="{{ Storage::url($imgData->media_path) }}"
                                                                    alt="Product image"/></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <div class="lower-content">
                                <h3>{{ $machine->name }} </h3>
                                <div class="text">
                                    {!! $machine->additional_information !!}
                                </div>
                            </div>


                            <div
                                class=""
                            >
                                <h2> {{ __('Technical information of the machine') }} </h2>
                                <table class="table table-bordered w-100 mt-5">
                                    {{-- Información General --}}
                                    <tbody>
                                    @if (!empty($machine->general_information))
                                        <tr>
                                            <th colspan="2"
                                                class="text-sm font-semibold text-center uppercase px-4 py-2 border-top bg-green3 ">
                                                {{ __('General Information') }}
                                            </th>
                                        </tr>
                                        @foreach (json_decode($machine->general_information, true) as $key => $value)
                                            <tr>
                                                <th class="bg-light px-4 py-2 text-capitalize">
                                                    {{ str_replace('_', ' ', $key) }}
                                                </th>
                                                <td class="px-4 py-2">
                                                    {{ $value !== null && $value !== '' ? $value : 'N/A' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    {{-- Información Técnica --}}
                                    @if (!empty($machine->technical_details))
                                        <tr>
                                            <th colspan="2"
                                                class="bg-green3  text-sm font-semibold text-center uppercase px-4 py-2 border-top">
                                                {{ __('Technical Details') }}
                                            </th>
                                        </tr>
                                        @foreach (json_decode($machine->technical_details, true) as $key => $value)
                                            <tr>
                                                <th class="bg-light px-4 py-2 text-capitalize">
                                                    {{ str_replace('_', ' ', $key) }}
                                                </th>
                                                <td class="px-4 py-2">
                                                    {{ $value !== null && $value !== '' ? $value : 'N/A' }}
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                </table>
                            </div>


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


    <!-- show modal catalogue  -->
    @livewire('contact-form.catalogue-contact-form', ['product_name' => $machine->name, '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