@extends('layouts.app')

@section('content')
    <!-- Banner -->
    <div class="row mainbanner"
        style="background: url('{{ asset('assets/img/testimonials-bg.jpg') }}') no-repeat center center; background-size: cover;">
        <div class="page-title-wrapper text-center">
            <div class="page-title-inner pt-5 pb-5" style="color: #fff; background: rgb(0 0 0 / 50%); width: 100%;">
                <h1 class="text-white">Contact Us</h1>
            </div>
        </div>
    </div>

    <!-- Success Alert -->
    @if (session('success'))
        <div class="container mt-3">
            <div class="alert alert-success text-center">
                {{ session('success') }}
            </div>
        </div>
    @endif

    <!-- Contact Info Cards -->
    <section class="block less-spacing gray-bg pt-5 pb-5">
        <div class="container">
            <div class="row" style="column-gap: 100px;">
                <div class="col card p-3">
                    <div class="contact-info-box text-center">
                        <i class="fa fa-phone-square"></i>
                        <h5>PHONE</h5>
                        <p>Phone : {{ $brand->phone }}</p>
                
                    </div>
                </div>

                <div class="col card p-3">
                    <div class="contact-info-box text-center">
                        <i class="fa fa-map-marker"></i>
                        <h5>ADDRESS</h5>
                        <p>{{ $brand->address }}</p>
                    </div>
                </div>

                <div class="col card p-3">
                    <div class="contact-info-box text-center">
                        <i class="fa fa-envelope"></i>
                        <h5>EMAIL</h5>
                        <p>{{ $brand->email }}</p>

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

    <!-- FAQ + Contact Form -->
    <section id="faq" class="faq section light-background pt-3 pb-3">
        <div class="container">
            <div class="row gy-4">

                <!-- FAQ Section -->
                <div class="col-lg-7 d-flex flex-column justify-content-center order-2 order-lg-1">
                    <div class="container section-title text-start mb-0">
                        <h2 class="fs-4 pb-3" style="font-weight: 800;">Customer FAQs</h2>
                    </div>

                    <div class="faq-container">
                        @foreach ($faqs as $faq)
                            <div class="faq-item">
                                <i class="faq-icon bi bi-question-circle"></i>
                                <h3 class="faq-question">{{ $faq->question }}</h3>
                                <div class="faq-content">
                                    <p>{{ $faq->answer }}</p>
                                </div>
                                <i class="faq-toggle bi bi-chevron-right"></i>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Contact Form -->
                <div class="col-lg-5 order-1 order-lg-2 card p-4">
                    <div class="contact-box">
                        <div class="container section-title text-center">
                            <h2 class="fs-4 pb-3" style="font-weight: 800;">Get in Touch With Us</h2>
                        </div>

                        <form class="contact-form" action="{{ url('/contacts') }}" method="POST">
                            @csrf
                            <div class="row gy-4">

                                <div class="col-md-6">
                                    <input type="text" name="name" class="form-control" placeholder="Your Name"
                                        required>
                                </div>

                                <div class="col-md-6">
                                    <input type="email" name="email" class="form-control" placeholder="Your Email"
                                        required>
                                </div>

                                <div class="col-md-12">
                                    <input type="text" name="phone" class="form-control" placeholder="Phone Number">
                                </div>

                                <div class="col-md-12">
                                    <input type="text" name="subject" class="form-control" placeholder="Subject">
                                </div>

                                <div class="col-md-12">
                                    <textarea name="message" class="form-control" rows="6" placeholder="Message" required></textarea>
                                </div>

                                <div class="col-md-12 text-center">
                                    <button class="btn btnrin" type="submit">Send Message</button>
                                </div>

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

    <!-- Trust Slider (Same as yours) -->
    {{-- <section id="features" class="features section pt-4">
        <div class="container">
            <div class="container section-title text-center pb-3">
                <h2 class="fs-4" style="font-weight: 800;">They Trust Us</h2>
            </div>

            <div class="sliderfive">
                <div class="owl-carousel owl-theme">
                    <!-- Your existing slider content remains unchanged -->
                </div>
            </div>
        </div>
    </section> --}}

    {{-- ================= CLIENT LOGOS ================= --}}
    <section id="client" class="section pt-3 pb-3">
        <div class="container">
            <h2 class="line section-title text-center mb-4 heading">They Trust Us</h2>

            <div class="owl-carousel logo-slider">
                @foreach ($logos as $logo)
                    <div class="text-center logo-item">
                        <img src="{{ asset('storage/' . $logo->logo_filename) }}" loading="lazy" alt="Client Logo">
                    </div>
                @endforeach
            </div>
        </div>
    </section>
@endsection