@extends('layouts.guest.general')

@section('main_content')
    {{-- NAVIGATION --}}
    {{-- Banner, breadcrumb and heading come from the "Machinery header" shared section. --}}
    <x-page-header
        section="Machinery header"
        image="images/machinery/general/General-Machinery/Header.png"
        h1="Catalog of Machinery for Sale"
        :fallback-title="__('messages.machinery')"
        :crumbs="[
            ['label' => __('messages.home'), 'url' => '/'],
            ['label' => __('messages.machinery'), 'url' => 'machinery'],
        ]"
    />

    <!-- End Page Title -->

    <!-- Project Page Section -->
    <div class="project-page-section">
        <div class="auto-container">
            <div class="sec-title alternate centered">
                <div class="title style-two text-dark">{{ __('messages.machinery-title') }} </div>
                <h3 class="_h2 color-green1">{{ __('messages.machinery-subtitle') }} </h3>
            </div>
            <!-- MixitUp Galery -->
            <div class="mixitup-gallery">
                <!-- Filter -->
                <div class="filters clearfix">
                    <ul class="filter-tabs text-center clearfix">
                        <li class="active filter custom-filter-li">
                            <a href="{{ route('machinery.index') }}" class="text-white filter-link">
                                {{ __('messages.new') }}
                            </a>
                        </li>
                        <li class="filter custom-filter-li">
                            <a href="{{ route('guest.sale-used-machines.index') }}" class="text-white filter-link">
                                {{ __('messages.used') }}
                            </a>
                        </li>
                    </ul>
                    </ul>
                </div>

                <div class="filters clearfix">
                    <ul class="filter-tabs text-center clearfix">
                        <li class="@if (empty($category)) active @endif filter custom-filter-li">
                            <a href="{{ route('machinery.index') }}" class="text-white filter-link">
                                {{ __('messages.view-all') }}
                            </a>
                        </li>
                        @foreach ($categories as $categoryF)
                            <li class="@if ($category && $categoryF->id == $category->id) active @endif filter custom-filter-li">
                                <a href="{{ $categoryF->publicUrl() }}" class="text-white filter-link">
                                    {{ $categoryF->translation?->name }}
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </div>

                <div class="filter-list row clearfix justify-content-center">
                    @forelse ($machines as $machine)
                        <div class="project-block-two mix all col-lg-6 col-md-6 col-sm-12">
                            <div class="inner-box">
                                <div class="image">
                                    <img src="{{ Storage::url($machine->main_image) }}" alt=""/>
                                    <div class="overlay-box">
                                        <a class="plus flaticon-plus"
                                           href="{{ $machine->publicUrl() }}"></a>
                                        <div class="content">
                                            <div class="title">{{ $machine->machineCategory->translation?->name }} </div>
                                            <div class="pr-5">
                                                <h4>
                                                    <a href="{{ $machine->publicUrl() }}">{{ $machine->translation->name }}
                                                    </a></h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p>{!! __('messages.no-machinery') !!} </p>
                    @endforelse
                </div>

                <div class="mt-10 d-flex justify-content-end">
                    {{ $machines->links('vendor.pagination.blog') }}
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .project-block-two .inner-box .overlay-box:before {
            opacity: 0.52;
            background-color: var(--black-color);
        }

        .project-page-section .filters li {
            background: var(--color-green-one);
            color: var(--white-color);
        }

        .custom-filter-li {
            padding: 0 !important;
            overflow: hidden;
            display: inline-block;
            min-width: 120px;
        }

        .filter-link {
            display: block;
            width: 100%;
            height: 100%;
            padding: 10px 20px;
            text-decoration: none;
            transition: background 0.3s ease;
        }

        .filter-link:hover {
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
        }

    </style>
@endpush