@extends('layouts.app')
@section('page-title', 'Home')
@section('body-content')

    <!-- Page Title -->
    <section class="page-title">
        <div class="auto-container">
            <!-- Icons Box -->
            <div class="icons-box">

            </div>
            <h1>Contact Us</h1>

        </div>
    </section>
    <!-- End Page Title -->

    <!-- Contact Info Section -->
    <section class="contact-info-section">
        <div class="auto-container">
            <div class="row clearfix justify-content-center">

                <!-- Info Column -->
                <div class="info-column col-xl-4 col-lg-6 col-md-6 col-sm-6">
                    <div class="inner-column d-flex align-items-center">
                        <div class="icon flaticon-email-1"></div>
                        <div class="content ">
                            <strong>Mail address</strong>
                            <a href="mailto:{{ config('constants.PRIMARY_EMAIL') }}"
                                class="emailContainerLink">{{ config('constants.PRIMARY_EMAIL') }}</a>
                            <a href="tel:{{ config('constants.PHONE') }}">{{ config('constants.PHONE') }}</a>
                        </div>
                    </div>
                </div>

                <!-- Info Column -->
                <div class="info-column col-xl-4 col-lg-6 col-md-6 col-sm-6">
                    <div class="inner-column d-flex align-items-center">
                        <div class="icon flaticon-map"></div>
                        <div class="content">
                            <strong>Office Location</strong>
                            <div class="text">{{ config('constants.ADDRESS') }}</div>

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

                <!-- Info Column -->
                <div class="info-column col-xl-4 col-lg-6 col-md-6 col-sm-6">
                    <div class="inner-column d-flex align-items-center">
                        <div class="icon flaticon-telephone"></div>
                        <div class="content">
                            <strong>Phone Number</strong>
                            <a href="tel:{{ config('constants.PHONE') }}">{{ config('constants.PHONE') }}</a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <!-- End Contact Info Section -->



    <!-- Contact Section -->
    <section class="contact-section">
        <div class="auto-container">
            <div class="row clearfix">

                <!-- Image Column -->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <!-- Sec Title -->
                        <div class="sec-title">
                            <div class="title">Why Choose Us</div>
                            <h2>Your Trusted <span>Technology Partner</span></h2>
                            <div class="text">we are dedicated to providing our customers with the best technology
                                solutions available.We make technology accessible with affordable prices and a wide product
                                range.</div>
                        </div>


                        <!-- Options List -->
                        <ul class="options-list">
                            <li>Trusted supplier of new and refurbished IT equipment.
                            </li>
                            <li>Wide range of products from leading brands.</li>
                            <li>Fast and reliable shipping for all orders.</li>
                            <li>Competitive pricing on all products.</li>

                            <li>Commitment to excellence.</li>
                        </ul>




                    </div>
                </div>

                <!-- Form Column -->
                <div class="form-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        @if (session('success'))
                            <div class="alert alert-success" id="success-alert">
                                {{ session('success') }}
                            </div>
                        @elseif(session('error'))
                            <div class="alert alert-danger" id="error-alert">
                                {{ session('error') }}
                            </div>
                        @endif
                        <!-- Contact Form -->
                        <div class="contact-form">
                            <form method="post" action="{{ route('contact.store') }}" id="contact-form">
                                @csrf
                                <div class="row clearfix">

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="text" name="name" placeholder="Enter Your name"
                                            value="{{ old('name') }}" required="">
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="text" name="phone" placeholder="Enter Your Phone Number"
                                            value="{{ old('phone') }}" required="">
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="email" name="email" placeholder="Enter Your Email"
                                            value="{{ old('email') }}" required="">
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="text" name="company_name" value="{{ old('company_name') }}"
                                            placeholder="Company Name (Optional)">
                                    </div>

                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                        <textarea class="" name="message" placeholder="Comment" required="">{{ old('message') }}</textarea>
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <input type="text" name="security_code" placeholder="Enter Security Code"
                                            required="">
                                    </div>

                                    <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                        <img style="height:60px; width:140px"
                                            src="{{ route('captcha.get') }}?rand=1287082855" id='captcha'>
                                        <br>
                                        <p><br>Need another security code? <a style="color: #ffb103;"
                                                href="javascript:void(0)" id="reloadCaptcha">Click</a></p>
                                    </div>

                                    {{-- <div class="col-lg-12 col-md-12 col-sm-12 form-group">
										<div class="check-box">
											<input type="checkbox" name="remember-password" id="type-1">
											<label for="type-1">Save my name, email, and website in this browser for the next time.</label>
										</div>
									</div> --}}
                                    @if ($errors->any())
                                        <div class="alert alert-danger">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                        <div class="buttons-box">
                                            <button class="theme-btn btn-style-three">
                                                <span class="btn-wrap">
                                                    <span class="text-one">Send Messege</span>
                                                    <span class="text-two">Send Messege</span>
                                                </span>
                                                <span class="icon flaticon-right-arrow"></span>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </form>
                        </div>
                        <!-- End Contact Form -->

                    </div>
                </div>



            </div>


        </div>
    </section>
    <!-- End Contact Section -->

    @include('sections.brands')

@endsection

@section('end-scripts')
    <script>
        $(document).ready(function() {
            $("#reloadCaptcha").click(function() {
                var captchaImage = $('#captcha').attr('src');
                captchaImage = captchaImage.substring(0, captchaImage.lastIndexOf("?"));
                captchaImage = captchaImage + "?rand=" + Math.random() * 1000;
                $('#captcha').attr('src', captchaImage);
            });
        });


        setTimeout(function() {
            document.getElementById('success-alert')?.remove();
            document.getElementById('error-alert')?.remove();
        }, 5000);
    </script>
@endsection