@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>{{ __('Second-hand machinery') }} </li>
            </ul>
            <h2>{{ __('Second-hand machinery') }} </h2>
        </div>
    </section>

    <section class="mt-5 auto-container">
        <div class="sec-title alternate text-center mb-4">
            <h2 class="text-capitalize">{{ __('Expertise in Every Thread: Premium Second-Hand Solutions') }}</h2>
        </div>
        <p class="text-center">
            {{ __("At ITG Group, we understand that efficiency and reliability are the cornerstones of successful textile production. Our carefully curated selection of second-hand machinery offers a cost-effective way to upgrade your operations without compromising on quality. Each piece of equipment in our inventory undergoes a rigorous evaluation process, ensuring it meets the high standards our global partners expect. Whether you're looking to expand your capacity or find a specific technical solution, our expert team is here to guide you through a seamless acquisition or sale process.") }}
        </p>
    </section>


    <section class="process-section">
        <div class="auto-container">
            <div class="sec-title alternate text-center mb-5">
                <h2 class="text-capitalize">{{ __('messages.nm-title-second') }} </h2>
                <div class="text-justify mt-3">
                    <p>{{ __('messages.nm-text-second') }} </p>
                </div>
            </div>

            <div class="row clearfix">

                <!-- Content Column -->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="blocks-outer py-5">
                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">01</div>
                                    <p class="font-part-list">{!! __('messages.sc-01') !!} </p>
                                </div>
                            </div>
                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">02</div>
                                    <div class="py-4">
                                        <p class="font-part-list">{{ __('messages.sc-02') }} </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Process Block -->
                            <div class="process-block">
                                <div class="inner-box">
                                    <div class="number">03</div>
                                    <div class="py-3">
                                        <p class="font-part-list">{{ __('messages.sc-03') }} </p>
                                    </div>
                                </div>
                            </div>

                            <div class="upper-column info-box d-inline px-2">
                                <div class="outer-box p-0">
                                    <a class="btn-web-catalog text-capitalize c-main"
                                       href="{{ route('contact.index') }}#contactform">{{ __('messages.contacts-us') }}
                                        </span></a>
                                </div>
                            </div>

                        </div>
                        <!-- End Blocks Outer -->
                    </div>
                </div>

                <!-- Images Column -->
                <div class="images-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <div class="image wow fadeInLeft" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/2.png') }}" alt=""/>
                        </div>
                        <div class="image wow fadeInUp p-3" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/3.png') }}" alt=""/>
                        </div>
                        <div class="image-two wow fadeInRight" data-wow-delay="0ms" data-wow-duration="1500ms">
                            <img src="{{ asset('images/machinery/general/General-Machinery/4.png') }}" alt=""/>
                        </div>
                    </div>
                </div>

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


    {{-- BUY & SELL CTA SECTION --}}
    <section class="buy-sell-cta auto-container my-5">
        <div class="sec-title alternate text-center mb-5">
            <h2 class="text-capitalize">{{ __('Buy, Sell & Trade Machinery') }}</h2>
            <div class="text-justify mt-3 text-center">
                <p>{{ __('Connect with a global network of textile manufacturers and upgrade your machinery with confidence.') }}</p>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 mb-4 mb-lg-0">
                <div class="cta-card buy-card p-5 h-100 shadow-lg position-relative overflow-hidden"
                    style="background: linear-gradient(135deg, #1a1e23 0%, #262c33 100%); border-radius: 1.5rem; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.3s ease;">
                    <div class="position-relative" style="z-index: 2;">
                        <div class="icon-wrapper mb-4 d-inline-block p-3 rounded-circle"
                            style="background: rgba(25, 135, 84, 0.1);">
                            <i class="ti ti-shopping-cart text-success" style="font-size: 2.5rem;"></i>
                        </div>
                        <h3 class="text-white mb-3" style="font-weight: 700;">
                            {{ __('Are you looking for specific machinery?') }}</h3>
                        <p class="text-muted mb-4" style="font-size: 1.1rem; line-height: 1.6;">
                            {{ __('Tell us what you need and we will find the best option for your production line.') }}</p>
                        <a href="{{ route('purchase-tickets.create') }}"
                            class="btn btn-outline-success btn-lg rounded-pill px-4 py-2 fw-bold transition-hover">
                            {{ __('Post a Purchase Request') }} &rarr;
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="cta-card sell-card p-5 h-100 shadow-lg position-relative overflow-hidden"
                    style="background: linear-gradient(135deg, #198754 0%, #146c43 100%); border-radius: 1.5rem; transition: transform 0.3s ease;">
                    <div class="position-relative" style="z-index: 2;">
                        <div class="icon-wrapper mb-4 d-inline-block p-3 rounded-circle"
                            style="background: rgba(255, 255, 255, 0.1);">
                            <i class="ti ti-building-factory-2 text-white" style="font-size: 2.5rem;"></i>
                        </div>
                        <h3 class="text-white mb-3" style="font-weight: 700;">
                            {{ __('Do you want to sell your used equipment?') }}</h3>
                        <p class="text-white-50 mb-4" style="font-size: 1.1rem; line-height: 1.6;">
                            {{ __('Reach thousands of potential buyers in the textile industry globally.') }}</p>
                        <a href="{{ route('sale-tickets.create') }}"
                            class="btn btn-light btn-lg rounded-pill px-4 py-2 fw-bold transition-hover text-success">
                            {{ __('List your Machine for Sale') }} &rarr;
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>



    @if($lastMachine)
        <div class="auto-container">
            <section class="my-5 position-relative overflow-hidden shadow-lg p-5" style="background-color: #1a1e23; border-radius: 1.5rem;">
                <div class="row align-items-center position-relative" style="z-index: 2;">
                    <div class="col-lg-6 mb-5 mb-lg-0 order-2 order-lg-1">
                        <div class="pr-lg-5" style="padding-right: 3rem;">
                            <span class="badge badge-success text-uppercase px-3 py-2 mb-4 rounded-pill shadow-sm d-inline-block" style="letter-spacing: 0.1em; font-weight: 600; font-size: 0.85rem">
                                🌟 {{ __('New Arrival') }}
                            </span>
                            
                            <h2 class="display-4 fw-bold text-white mb-3" style="line-height: 1.2;">
                                {{ $lastMachine->brand }} <span class="text-success">{{ $lastMachine->model }}</span>
                            </h2>
                            
                            <p class="text-muted lead mb-5" style="line-height: 1.8; font-size: 1.1rem; color: #a1a9b3 !important;">
                                {{ Str::limit(strip_tags($lastMachine->additional_information), 120) }}
                            </p>
                            
                            <div class="row mb-5">
                                <div class="col-6 mb-3">
                                    <div class="p-3 rounded-lg border h-100 shadow-sm" style="background-color: #262c33; border-color: #373e46 !important; border-radius: 12px;">
                                        <div class="text-muted small text-uppercase mb-1" style="letter-spacing: 1px;">{{ __('Brand') }}</div>
                                        <div class="text-white fw-bold" style="font-size: 1.15rem;">{{ $lastMachine->brand ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="p-3 rounded-lg border h-100 shadow-sm" style="background-color: #262c33; border-color: #373e46 !important; border-radius: 12px;">
                                        <div class="text-muted small text-uppercase mb-1" style="letter-spacing: 1px;">{{ __('Model') }}</div>
                                        <div class="text-white fw-bold" style="font-size: 1.15rem;">{{ $lastMachine->model ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="p-3 rounded-lg border h-100 shadow-sm" style="background-color: #262c33; border-color: #373e46 !important; border-radius: 12px;">
                                        <div class="text-muted small text-uppercase mb-1" style="letter-spacing: 1px;">{{ __('Year') }}</div>
                                        <div class="text-white fw-bold" style="font-size: 1.15rem;">{{ $lastMachine->year ?? 'N/A' }}</div>
                                    </div>
                                </div>
                                <div class="col-6 mb-3">
                                    <div class="p-3 rounded-lg border h-100 shadow-sm" style="background-color: #262c33; border-color: #373e46 !important; border-radius: 12px;">
                                        <div class="text-muted small text-uppercase mb-1" style="letter-spacing: 1px;">{{ __('Technology') }}</div>
                                        <div class="text-white fw-bold text-capitalize" style="font-size: 1.15rem;">{{ $lastMachine->type_of_machine ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <a class="btn btn-success btn-lg rounded-pill px-5 py-3 fw-bold shadow-sm transition-hover"
                               href="{{ route('guest.sale-used-machines.detail', $lastMachine->id) }}" role="button" style="transition: transform 0.3s ease; border-radius: 50px;">
                                {{ __('View Complete Details') }} &rarr;
                            </a>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0 text-center text-lg-right">
                        <div class="position-relative d-inline-block p-4">
                            <!-- Decorate shapes behind image -->
                            <div class="position-absolute" style="background: rgba(25, 135, 84, 0.15); width: 85%; height: 85%; top: 0; right: 0; filter: blur(40px); border-radius: 50%;"></div>
                            <div class="position-absolute" style="background: #198754; width: 100px; height: 100px; bottom: 10%; left: 0; filter: blur(50px); opacity: 0.4;"></div>
                            
                            <img
                                src="{{ Storage::url($lastMachine->mainImage?->media_path) }}"
                                class="img-fluid shadow-lg position-relative" 
                                style="max-height: 480px; object-fit: cover; border-radius: 1.2rem; border: 4px solid rgba(25, 135, 84, 0.3); z-index: 5;"
                                alt="{{ $lastMachine->brand }} {{ $lastMachine->model }}">
                        </div>
                    </div>
                </div>
            </section>
        </div>
    @endif



    <div id="used-machines-filter-section">

        <livewire:sale-used-machine.used-machine-filter />
    </div>


    @push('styles')
        <style>
            .cta-card:hover {
                transform: translateY(-10px);
            }

            .transition-hover {
                transition: all 0.3s ease;
            }

            .transition-hover:hover {
                transform: scale(1.05);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
            }
        </style>
    @endpush
@endsection