@extends('layouts.front.front')
@section('title', 'Partner Locator | Apsys Network')
{{-- main content --}}
@section('content')
<main>
    <section class="common-banner-wrapper" style="background-image: url('./assets/images/page-banners/partner-locator.jpg');">
        <h1 class="" data-aos="fade-up" data-aos-delay="600">Partner Locator</h1>
    </section>
    
        <!---->
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('home')}}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">partner locator</li>
                </ol>
            </nav> 
            <div class="mobile--breadcrumbs">
                <a href="{{route('home')}}" class="back"><i class="fa fa-chevron-left"></i></a>
                <a href="javascript:void(0)" class="page">Partner Locator</a> 
            </div>
        </div> 
    
    <!---->
    <section class="partner-section">
        <div class="container">
            <h3 class="header mt-0 mb-3" data-aos="fade-up">Find a partner for your needs</h3>
            <p data-aos="fade-up"  data-aos-delay="400">To search for partner Fill the form below</p>
            <div class="row g-4">
                <div class="col-lg-6">
                    <div class="partner-inner-section bg-white shadow-sm rounded p-lg-4 p-3">
                        <h3 class="mb-1" data-aos="fade-up">Filter</h3>
                        <div class="row gutter">
                            <div class="col-md-6" data-aos="fade-up">
                                <div class="common-search-container d-flex align-items-center">
                                    <input type="text" class="form-control" placeholder="search sellers">
                                    <button class="icon">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <div class="form-check  mt-2">
                                    <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
                                    <label class="form-check-label" for="flexSwitchCheckChecked">Use my current Location</label>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mb-4 align-items-end gutter">
                            <div class="col-md-6" data-aos="fade-up">
                                <label for="country">Country</label>
                                <select class="form-select form-select" aria-label=".form-select-lg example">
                                    <option selected>Select Country</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <label for="state">State</label>
                                <select class="form-select form-select" aria-label=".form-select-lg example">
                                    <option selected>Select state</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-md-6" data-aos="fade-up">
                                <label for="city">City</label>
                                <input type="text" id="city" class="form-control">
                            </div>
                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <label for="code">Postal Code</label>
                                <input type="text" id="code" class="form-control">
                            </div>
                            <div class="col-md-6" data-aos="fade-up">
                                <div class="row">
                                    <label for="distance">Distance</label>
                                    <div class="col-sm-6 col-7">
                                        <input type="text" placeholder="100" class="form-control">
                                    </div>
                                    <div class="col-sm-6 col-5">
                                        <select class="form-select form-select" aria-label=".form-select-lg example">
                                            <option selected>Miles</option>
                                            <option value="1">Kilometers</option>
                                            <option value="2">Meters</option> 
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <label for="solution">Solution Type</label>
                                <select class="form-select form-select" aria-label=".form-select-lg example">
                                    <option selected>All</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-md-6" data-aos="fade-up">
                                <label for="certification">certification Status</label>
                                <select class="form-select form-select" aria-label=".form-select-lg example">
                                    <option selected>All</option>
                                    <option value="1">One</option>
                                    <option value="2">Two</option>
                                    <option value="3">Three</option>
                                </select>
                            </div>
                            <div class="col-md-6" data-aos="fade-up" data-aos-delay="400">
                                <div class="d-flex btn-wrap justify-content-between">
                                    <button class="btn-brand">SEND</button>
                                    <button class="btn-secondary">CLEAR ALL</button>
                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left" data-aos-delay="500">
                    <iframe
                        src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15551.615558355914!2d77.6396303!3d12.9779987!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6b92ab3d5a89c18c!2sApsys%20Networks!5e0!3m2!1sen!2sin!4v1629832390713!5m2!1sen!2sin"
                        width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </section>
</main>
 
@endsection