@extends('frontend.layouts.main')
@section('main-container')
<section class="product-about-section">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="product-about-block">
                        <div class="product-about-block-inner">
                            <h1 class="product-about-block-title m-0"> Contact Us </h1>
                            <div class="breadcrumb-div">
                                <nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
                                    <ol class="breadcrumb m-0 justify-content-center">
                                        <li class="breadcrumb-item"><a href="index.html"
                                                class="breadcrumb-item-link fs-5">Home</a></li>
                                        <li class="breadcrumb-item active fs-5" aria-current="page">contact</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="contact-section">
        <div class="container">
            <form action="{{ route('frontend.contact-us.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="row align-items-center">
                    <div class="col-md-8 mb-md-0 mb-4">
                        <div class="conatct-text pe-4">
                            <h3 class="contact-title">Got a question about us</h3>
                            <p class="panel_title p-0">Ready to revolutionize your displays? Fill out the form to request a
                                free demo of our powerful solution</p>
                            <div class="form_new_box">
                                <div class="row pb-2">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="first_name" class="form-label label_text">First Name
                                            </label>
                                            <input type="text" class="form-control form_box_new" name="first_name"
                                                id="first_name" placeholder="Enter your Name">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="last_name" class="form-label label_text">Last
                                                Name</label>
                                            <input type="text" class="form-control form_box_new" name="last_name"
                                                id="last_name" placeholder="Enter your Last Name">
                                        </div>
                                    </div>
                                </div>
                                <div class="row pb-2">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="mobile" class="form-label label_text">Phone Number
                                                *
                                            </label>
                                            <input type="number" class="form-control form_box_new" name="mobile"
                                                id="mobile" placeholder="Enter your Number">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="email" class="form-label label_text">
                                                Email *
                                            </label>
                                            <input type="email" class="form-control form_box_new" name="email"
                                                id="email" placeholder="Enter your Email">
                                        </div>
                                    </div>
                                </div>
                                <div class="row pb-2">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="address" class="form-label label_text">Address
                                                *
                                            </label>
                                            <input type="text" class="form-control form_box_new" name="address"
                                                id="address" placeholder="Enter your Address">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="city" class="form-label label_text">City *
                                            </label>
                                            <input type="text" class="form-control form_box_new" name="city"
                                                id="city" placeholder="Enter your City">
                                        </div>
                                    </div>
                                </div>

                                <div class="row pb-2">
                                    <div class="col-12">
                                        <div class="mb-3">
                                            <label for="message" class="form-label label_text">Message
                                            </label>
                                            <textarea class="form-control" id="message" name="message" rows="3"></textarea>
                                        </div>
                                    </div>
                                </div>
                                <button class="slider_btn" value="submit" type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </div>
                </form>
                    <div class="col-md-4">
                        <div class="support-contact mb-30">
                            <div class="support-tittle">
                                <h4>Support Contact</h4>
                             </div>
                             <div class="support-contact-inner">
                                <div class="support-item">
                                    <div class="support-icon">
                                       <svg id="Layer_6" data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" width="21.375" height="21.375" viewBox="0 0 21.375 21.375">
                                          <path id="Path_8" data-name="Path 8" d="M1.688,16.386c.038-.031,4.3-3.085,5.463-2.885.556.1.875.477,1.513,1.238.1.123.35.415.541.624a8.877,8.877,0,0,0,1.176-.479,9.761,9.761,0,0,0,4.5-4.5A8.876,8.876,0,0,0,15.363,9.2c-.209-.192-.5-.439-.628-.544-.756-.634-1.135-.953-1.233-1.51C13.3,6,16.354,1.725,16.386,1.687A1.631,1.631,0,0,1,17.6,1c1.238,0,4.774,4.586,4.774,5.359,0,.045-.065,4.608-5.691,10.331C10.966,22.31,6.4,22.375,6.359,22.375,5.586,22.375,1,18.84,1,17.6A1.629,1.629,0,0,1,1.688,16.386Zm4.75,4.56c.623-.051,4.452-.556,9.239-5.26,4.727-4.813,5.22-8.653,5.269-9.248a19.276,19.276,0,0,0-3.353-3.962c-.028.029-.066.071-.115.127a25.216,25.216,0,0,0-2.546,4.32,8.469,8.469,0,0,0,.724.649,7.149,7.149,0,0,1,1.077,1.013l.173.242-.051.293A8.135,8.135,0,0,1,16.166,11,11.193,11.193,0,0,1,11,16.166a8.115,8.115,0,0,1-1.882.688l-.293.051-.242-.173A7.209,7.209,0,0,1,7.568,15.65c-.223-.266-.522-.622-.634-.722A25.054,25.054,0,0,0,2.6,17.477c-.059.05-.1.088-.128.113a19.259,19.259,0,0,0,3.962,3.354Z" transform="translate(-1 -1)" fill="#2467ec"></path>
                                       </svg>
                                    </div>
                                    <div class="support-info-phone">
                                       <span>Phone</span>
                                       <p>Mobile :<a href="tel:{{$details['mobile']}}"> +91 {{$details['mobile']}}</a></p>
                                    </div>
                                </div>
                                <div class="support-item">
                                    <div class="support-icon">
                                       <svg xmlns="http://www.w3.org/2000/svg" width="22.57" height="16.271" viewBox="0 0 22.57 16.271">
                                          <g id="email_3_" data-name="email (3)" transform="translate(-1.25 -4.25)">
                                             <path id="Path_10" data-name="Path 10" d="M20.933,20.521H4.137A2.9,2.9,0,0,1,1.25,17.634V7.137A2.9,2.9,0,0,1,4.137,4.25h16.8A2.9,2.9,0,0,1,23.82,7.137v10.5A2.9,2.9,0,0,1,20.933,20.521Zm-16.8-14.7A1.312,1.312,0,0,0,2.825,7.137v10.5a1.312,1.312,0,0,0,1.312,1.312h16.8a1.312,1.312,0,0,0,1.312-1.312V7.137a1.312,1.312,0,0,0-1.312-1.312Z" transform="translate(0 0)" fill="#2467ec"></path>
                                             <path id="Path_11" data-name="Path 11" d="M12.534,13.7a3.412,3.412,0,0,1-1.732-.472L1.638,7.778a.8.8,0,0,1-.283-1.05A.777.777,0,0,1,2.4,6.455l9.175,5.438a1.774,1.774,0,0,0,1.848,0L22.6,6.455a.777.777,0,0,1,1.05.273.8.8,0,0,1-.283,1.05l-9.1,5.448a3.412,3.412,0,0,1-1.732.472Z" transform="translate(0.001 0.105)" fill="#2467ec"></path>
                                          </g>
                                       </svg>
        
                                    </div>
                                    <div class="support-info-email">
                                       <span>Email</span>
                                       <a href="mailto:{{$details['email']}}">{{$details['email']}}</a>
                                    </div>
                                </div>
                                <div class="support-item">
                                    <div class="support-icon">
                                       <svg xmlns="http://www.w3.org/2000/svg" width="17.41" height="21.729" viewBox="0 0 17.41 21.729">
                                          <g id="pin" transform="translate(-50.885)">
                                             <g id="Group_2184" data-name="Group 2184" transform="translate(55.556 4.671)">
                                                <g id="Group_2183" data-name="Group 2183">
                                                   <path id="Path_3602" data-name="Path 3602" d="M164.981,110.062a4.034,4.034,0,1,0,4.034,4.034A4.039,4.039,0,0,0,164.981,110.062Zm0,6.369a2.335,2.335,0,1,1,2.335-2.335A2.338,2.338,0,0,1,164.981,116.431Z" transform="translate(-160.947 -110.062)" fill="#2467ec"></path>
                                                </g>
                                             </g>
                                             <g id="Group_2186" data-name="Group 2186" transform="translate(50.885)">
                                                <g id="Group_2185" data-name="Group 2185">
                                                   <path id="Path_3603" data-name="Path 3603" d="M59.59,0a8.715,8.715,0,0,0-8.7,8.7v.241c0,2.428,1.392,5.256,4.137,8.408A35.783,35.783,0,0,0,59.056,21.3l.534.431.534-.431a35.775,35.775,0,0,0,4.035-3.944c2.745-3.151,4.137-5.98,4.137-8.408V8.705A8.715,8.715,0,0,0,59.59,0ZM66.6,8.946c0,4.1-5.286,9.068-7.006,10.576-1.721-1.508-7.006-6.474-7.006-10.576V8.705a7.006,7.006,0,0,1,14.013,0Z" transform="translate(-50.885)" fill="#2467ec"></path>
                                                </g>
                                             </g>
                                          </g>
                                       </svg>
                                    </div>
                                    <div class="support-info-location">
                                       <span>Location</span>
                                                                      <a href="#">{{$details['address']}}</a>
                                                                                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </section>
    {{--<section class="map-section section-block">
        <div class="container">
            <div class="bg_color">
                <div class="row g-0">
                    <div class="col-md-8">
                        <div class="map-div">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d47155.75986632883!2d77.2860873288761!3d28.54354214329823!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce56764bfb609%3A0x7960bd0394fbc614!2sCornea%20Display%20solution!5e0!3m2!1sen!2sus!4v1707721565659!5m2!1sen!2sus"
                                width="100%" height="500px" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="map_content">
                            <div class="mb-4">
                                <h3 class="category_title">{{ $details->headquarter }}</h3>
                                <p class="panel_title m-0">
                                    {{ $details->address }}
                                </p>
                            </div>
                            <div class="mb-4">
                                <h3 class="category_title">Phone
                                </h3>
                                <p class="panel_title m-0">
                                    {{ $details->mobile }}
                                </p>
                            </div>
                            <div class="mb-4">
                                <h3 class="category_title">Email
                                </h3>
                                <p class="panel_title m-0">
                                    {{ $details->email }}
                                </p>
                            </div>
                            <div class="mb-4">
                                <h3 class="category_title">Time and Date
                                </h3>
                                <p class="panel_title m-0">
                                   {{ $details->days }}: {{ $details->time }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="office-section ">
        <div class="container">
            @foreach($office as $index => $off)
            <div class="row g-0 row_gap">
                @if($index % 2 == 0)
                    <div class="col-md-6 mb-md-0 mb-3">
                        <img src="{{ asset($off->thumbnail) }}" class="img-fluid">
                    </div>
                    <div class="col-md-6">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="contact_text">
                                <h3 class="category_title fs-1 pb-3"> {{ $off->name }} </h3>
                                <div class="mb-3">
                                    <h4 class="amount-price"> Address </h4>
                                    <p class="panel_title m-0 p-0"> {{ $off->address }} </p>
                                </div>
                                <div class="mb-3">
                                    <h4 class="amount-price"> Phone </h4>
                                    <p class="panel_title m-0 p-0"> +91-{{ $off->phone }} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="col-md-6">
                        <div class="d-flex justify-content-center align-items-center h-100">
                            <div class="contact_text">
                                <h3 class="category_title fs-1 pb-3"> {{ $off->name }} </h3>
                                <div class="mb-3">
                                    <h4 class="amount-price"> Address </h4>
                                    <p class="panel_title m-0 p-0"> {{ $off->address }} </p>
                                </div>
                                <div class="mb-3">
                                    <h4 class="amount-price"> Phone </h4>
                                    <p class="panel_title m-0 p-0"> +91-{{ $off->phone }} </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-md-0 mb-3">
                        <img src="{{ asset($off->thumbnail) }}" class="img-fluid">
                    </div>
                @endif
            </div>
        @endforeach
        
            
        </div>
    </section>--}}
@endsection