@extends($layout ?? 'layouts.guest.general')

@section('main_content')

    {{-- NAVIGATION --}}
    <x-page-header
        section="Machinery header"
        image="images/machinery/general/General-Machinery/Header.png"
        :h1="'Sale of - ' . $machine->translation->name"
        :title="$machine->translation->name"
        :crumbs="[
            ['label' => __('messages.home'), 'url' => '/'],
            ['label' => __('messages.machinery'), 'url' => 'machinery'],
        ]"
        :extra="$machine->machineCategory
            ? [['label' => $machine->machineCategory->translation->name ?? '', 'url' => $machine->machineCategory->publicPath()]]
            : []"
    />

    <!-- End Page Title -->
    <div class="project-detail-section">
        <div class="auto-container">
            <!-- Upper Box -->
            <div class="upper-box">
                <div class="image">
                    <img src="{{ Storage::url($machine->main_image) }}" alt="Image main machinery" />
                </div>
                <!-- Info Box -->
                <div class="info-box">
                    <div class="title">{{ __('messages.details') }} </div>
                    <ul class="info-list list-value">
                        <p class="model-title">{{ __('messages.model') }} </p>
                        @forelse($machine->machineDetails as  $detail)
                            <li class="color-black1">{{ $detail->description }}</li>
                        @empty
                            <li class="color-black1"> {{ __('messages.no-detail') }}</li>
                        @endforelse
                    </ul>
                </div>
            </div>
            <!-- End Upper Box -->

            <!-- Middle Box -->
            <div class="middle-box">

                <h3> {{ $machine->translation->name }} </h3>

                <!-- Description machine -->
                {!! tiptap_converter()->asHTML($machine->translation->description) !!}

                <div class="gallery-box">
                    <div class="row clearfix">
                        @foreach ($machine->machineImages as $image)
                            <div class="col-lg-4 col-md-4 col-sm-12">
                                <div class="image">
                                    <img src="{{ Storage::url($image->image) }}" alt="Images catalogue" />
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!--------------------------- VIDEO -------------------------->
                @if ($machine->url_video)
                    <x-builder.youtube-video :url_video="$machine->url_video" />
                @endif

                <!--------------------------- FEATURES -------------------------->
                <h4>{{ __('messages.main-features') }} </h4>
                <div class="row clearfix">
                    @forelse ($machine->machineFeatures->chunk(ceil($machine->machineFeatures->count() / 2)) as $div)
                        <div class="col-lg-6 col-md-12 col-sm-12">
                            <ul class="option-list">
                                @foreach ($div as $feature)
                                    <li>{{ $feature->description }} </li>
                                @endforeach
                            </ul>
                        </div>
                    @empty
                        <diV>
                            {{ __('There are no features to display.') }}
                        </diV>
                    @endforelse
                </div>

                <!--------------------------- COMPLEMENTARY ACCESSORIES -------------------------->
                @if ($machine->complementaryAccessory)
                    <div class="col-12 mt-5 mb-5">
                        <div class="row">
                            <div class="col-12 col-md-6 mb-3">
                                <img class="" src="{{ Storage::url($machine->complementaryAccessory->image_url) }}"
                                    alt="Image complementary accesories">
                            </div>
                            <div class="col-12 col-md-6">
                                <h4 class="color-green1">
                                    {{ $machine->complementaryAccessory->title }}
                                </h4>

                                {!! tiptap_converter()->asHTML($machine->complementaryAccessory->description) !!}

                            </div>
                        </div>
                    </div>
                @endif

                <!--------------------------- REPRESENTATIVE -------------------------->
                @php
                    $representative = $machine->activeRepresentatives;
                @endphp

                @if ($representative)
                    @if ($machine->custom)
                        <div class="mt-3">
                            <img src="{{ Storage::url($representative->image_url) }}" alt="Image representatives"
                                style="width: 200px;">
                            <div>
                                <p class="text-dark font-weight-bold m-0">
                                    {{ $representative->title }}
                                </p>
                                <p>
                                    {{ $representative->description }}
                                </p>
                            </div>
                        </div>
                    @else
                        <div class="welcome-section style-two">
                            <div class="row clearfix">
                                <div class="content-column col-lg-7 col-md-7 col-sm-12">
                                    <div class="inner-column">
                                        <div class="quality-box">
                                            <div class="quality-inner">
                                                <span class="icon flaticon-trophy-2"></span>
                                                <h4>
                                                    {{ $representative->title }}
                                                </h4>
                                                <div class="text">
                                                    {{ $representative->description }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                @endif

                <!--------------------------- MORE INFORMATION -------------------------->
                <div>
                    <h3>{{ __('messages.more-information') }} </h3>
                    <div class="row py-3">
                        <div class="col-6 col-md-3">
                            <a href="#" data-toggle="modal" class="btn-web-catalog"
                                style="color: var(--white-color) !important;"
                                data-target="#catalogueContact">{{ __('messages.data-sheet') }} </a>

                        </div>
                        <div class="col-6 col-md-3">
                            <a class="btn-web-catalog" style="color: var(--white-color) !important;"
                                href="{{ page_url('contact') }}#contactform">{{ __('messages.ask-quotation') }} </a>
                        </div>
                    </div>

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

    <!-- show modal catalogue  -->
    @livewire('contact-form.catalogue-contact-form', ['product_name' => $machine->translation->name, 'product_type' => 'machinery', 'dataDivision' => $division, 'urlCatalogue' => $machine->cataloguePdf->url ?? null])


@endsection

@push('styles')
    <style>
        .model-title {
            font-size: var(--font-20);
            font-weight: bold;
        }

        .btn-style-one {
            background-color: var(--color-green-one);
        }
    </style>
@endpush



@push('scripts')
    <script>
        $('#catalogueContact').on('hidden.bs.modal', function(e) {
            $(this).find('form').trigger('reset');
            $(this).find('.alert-danger').remove();
        });

        Livewire.on('postForm', function() {
            $('#catalogueContact').modal('hide');
            $('#catalogueContact').on('hidden.bs.modal', function() {
                $(this).find('form').trigger('reset');
            });
        });
    </script>
@endpush