@extends('website.layout.app')

@section('content')
    <div class="flex justify-center h-[700px] relative">
        <img src="{{ asset('assets/images/header-bg.jpg') }}" alt="header-bg"
            class="w-full md:w-[95%] object-cover brightness-[0.5]">
        <div class="absolute top-1/3 md:top-[40%] left-4/2">
            <div class="flex flex-col justify-center items-start text-yellow-500 w-[300px]">
                <span class="text-2xl font-bold">Track a Shipment</span>
                <span class="font-bold mt-2">Enter your shipment tracking number</span>
                <form action="{{ route('website.track') }}" method="GET">
                    <input type="text" name="tracking_uid"
                        class="mt-4 w-[300px] h-[65px] border-s-[12px] border-yellow-500 ps-3 focus:outline-0 rounded-e-xl text-black"
                        placeholder="Track ID">
                    @if ($errors->any())
                        <span class="text-xs text-red-500 bg-white p-2">{{ $errors->first() }}</span>
                    @endif
                    <div class="flex justify-center mt-3 w-full">
                        <button type="submit"
                            class="w-[150px] h-[40px] rounded-lg bg-yellow-500 flex justify-center items-center text-black">
                            Track
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {{-- Services --}}
    <div class="mt-10 mb-14 flex flex-col items-center">
        <div>
            <h1 class="text-3xl text-white">{{ $service->title }}</h1>
            <div class="flex gap-1 w-full">
                <div class="parallelogram w-full"></div>
                <div class="parallelogram w-[5px]"></div>
                <div class="parallelogram w-[5px]"></div>
            </div>
        </div>
        <div class="flex flex-col md:flex-row items-center md:justify-evenly md:mt-14 mt-5 w-full">
            @foreach ($service->images as $img)
                <img src="{{ asset('storage/' . $img->path) }}" alt="service" class="w-[90%] md:w-[24%] rounded-xl mt-10">
            @endforeach
            {{-- <img src="{{ asset($service->images[1]->path) }}" alt="service"
                class="w-[90%] md:w-[24%] rounded-xl mt-4 md:mt-0">
            <img src="{{ asset($service->images[2]->path) }}" alt="service" class="w-[90%] md:w-[24%] rounded-xl mt-10"> --}}
        </div>
    </div>
    {{-- How we do --}}
    <div class="mt-14 mb-14 flex flex-col items-center border border-yellow-500 w-[90%] py-8">
        <div>
            <h1 class="text-2xl text-white">How we do</h1>
            <div class="flex gap-1 w-full">
                <div class="parallelogram w-full"></div>
                <div class="parallelogram w-[5px]"></div>
                <div class="parallelogram w-[5px]"></div>
            </div>
        </div>
        <div class="flex flex-col md:flex-row items-center md:justify-evenly gap-5 text-white w-full md:mt-14 mt-5">
            <div class="flex flex-col justify-center items-center">
                <i class="ri-guide-line text-yellow-500 text-8xl"></i>
                <span class="text-center text-xl">End to End <br> Transportation</span>
            </div>
            <div class="flex flex-col justify-center items-center">
                <i class="ri-home-8-line text-yellow-500 text-8xl"></i>
                <span class="text-xl">Warehousing</span>
            </div>
            <div class="flex flex-col justify-center items-center">
                <i class="ri-money-dollar-circle-line text-yellow-500 text-8xl"></i>
                <span class="text-xl">Payment Service</span>
            </div>
            <div class="flex flex-col justify-center items-center">
                <i class="ri-computer-line text-yellow-500 text-8xl"></i>
                <span class="text-xl">Digital Solution</span>
            </div>
        </div>
    </div>
    {{-- Testimonials --}}
    <div class="mt-14 mb-14 w-[80%] grid grid-cols-1 md:grid-cols-2 h-[300px] bg-white md:mb-0 mb-[200px]">
        <div class="flex flex-col items-center w-full">
            <div class="flex flex-col w-[90%] mt-3">
                <div class="w-max">
                    <span class="text-2xl">{{ $testimonial->title }}</span>
                    <div class="flex gap-1 w-full">
                        <div class="parallelogram w-full"></div>
                        <div class="parallelogram w-[5px]"></div>
                        <div class="parallelogram w-[5px]"></div>
                    </div>
                </div>
                <span class="mt-3">
                    {!! $testimonial->description !!}
                </span>
            </div>
            <div id="controls-carousel" class="relative w-full" data-carousel="static">
                <!-- Carousel wrapper -->
                <div class="relative h-[160px] md:h-56 overflow-hidden rounded-lg md:h-48">
                    <!-- Item 1 -->
                    @foreach ($testimonial->messages as $message)
                        <div class="hidden duration-700 ease-in-out" data-carousel-item>
                            <div class="flex flex-col justify-center items-center">
                                <div class="flex flex-col gap-3 text-center w-[75%] mt-3">
                                    <p>{!! $message->message !!}
                                    </p>
                                    <span class="font-bold">"{{ $message->client_name }}"</span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <!-- Slider controls -->
                <button type="button"
                    class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-carousel-prev>
                    <span
                        class="bg-yellow-500 inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 group-hover:bg-yellow-700 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <svg class="w-4 h-4 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M5 1 1 5l4 4" />
                        </svg>
                        <span class="sr-only">Previous</span>
                    </span>
                </button>
                <button type="button"
                    class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
                    data-carousel-next>
                    <span
                        class="bg-yellow-500 inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 group-hover:bg-yellow-700 group-focus:ring-4 group-focus:ring-white group-focus:outline-none">
                        <svg class="w-4 h-4 text-white rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                            fill="none" viewBox="0 0 6 10">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="m1 9 4-4-4-4" />
                        </svg>
                        <span class="sr-only">Next</span>
                    </span>
                </button>
            </div>
        </div>
        <div class="overflow-hidden h-[300px]">
            <img src="{{ asset('storage/' . $testimonial->thumbnail) }}" alt="testimonial" class="w-[100%] h-[100%]">
        </div>
    </div>
    {{-- Stats --}}
    @include('website.components.stats')
@endsection