@extends('layouts.master')
@section('css')
    <link href="{{ asset('website/assets/iti/intlTelInput.css') }}" rel="stylesheet">
@endsection

@section('content')

  <!-- start banner section -->
  <section class="inner-banner position-relative">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-10">
                <div class="content">
                    <h1 class="text-light">Contact Us</h1>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end banner section -->

<!-- start banner section -->
<section class="">
    <div class="container">
        <div class="row position-relative justify-content-between">
            <div class="col-12 col-md-6">
                <div class="contact-info" style="border-radius: 35px;">
                    <h3 class="text-primary mb-4">Get in Touch</h3>
                    <div class="info d-flex align-items-center">
                        <span class="d-block me-2"><i class="fa-solid fa-phone-volume"></i></span>
                        <a href="tel:+243858747122">+243 85 87 47 122</a>
                    </div>
                    <div class="info d-flex align-items-center">
                        <span class="d-block me-2"><i class="fa-solid fa-phone-volume"></i></span>
                        <a href="tel:+27783547968">+27 78 354 7968</a>
                    </div>
                    <div class="info d-flex align-items-center  mt-2">
                        <span class="d-block me-2"><i class="fa-solid fa-envelope"></i></span>
                        {{-- <a href="mailto:inquiry@savannah-supplies.com">inquiry@savannah-supplies.com</a> --}}
                        <a href="mailto:info@savannahhes.com">info@savannahhes.com</a>
                    </div>
                    <h3 class="text-primary mt-4 fw-bold">Locations:</h3>
                    <div class="info d-flex align-items-start mt-4">
                        <span class="d-block me-2 mt-1"><i class="fa-solid fa-location-dot"></i></span>
                        <p><strong class="text-primary">In DRC:</strong> 102, Avenue Kasai, Q /Makutano, C
                            /Lubumbashi,
                            Lubumbashi, Haut-katanga, RDC</p>
                    </div>
                    <div class="info d-flex align-items-start mt-4">
                        <span class="d-block me-2 mt-1"><i class="fa-solid fa-location-dot"></i></span>
                        <p><strong class="text-primary">In South Africa:</strong> Egoli east, 1st Floor 10th South
                            Boulevard,
                            Bruma, Johannesburg, SA,</p>
                    </div>
                </div>

            </div>
            <div class="col-12 col-md-6">

                <form action="{{route('submit_contact_us')}}" method="POST" id="contact_form" class="ps-lg-4 mt-4 mt-md-0 light-bg p-4 p-md-5" style="border-radius: 35px;">
                    <h4 class="text-primary">Have a Question?</h4>
                    <label for="" class="text-primary form-label ps-4">Name</label>
                    <input type="text" name="name" class="form-control" placeholder="Enter Name">
                    <div class="invalid-feedback" id="nameError"></div>

                    <label for="" class="text-primary form-label ps-4 mt-4">Email</label>
                    <input type="email" class="form-control" name="email" placeholder="Enter Email">
                    <div class="invalid-feedback" id="emailError"></div>

                    <label for="" class="text-primary form-label ps-4 mt-4">Phone</label>
                    <input type="text" class="form-control" name="phone" id="phone" maxlength="12" onkeypress="javascript:return numaric(event,this)" placeholder="Enter Phone">
                    <input type="hidden" id="dial_code" value="+27" name="dial_code">
                    <input type="hidden" id="dial_code_iso" value="ZA" name="dial_code_iso">
                    <div class="invalid-feedback" id="phoneError"></div>

                    <label for="" class="text-primary form-label ps-4 mt-4">Message</label>
                    <textarea type="text" rows="3" name="message" class="form-control" style="border-radius: 25px;"
                        placeholder="Enter Here"></textarea>
                    <div class="invalid-feedback" id="messageError"></div>

                    <button class="btn btn-primary mx-auto mt-4 d-block w-fit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</section>
<!-- end banner section -->


@endsection

@section('bottom_script')

   <script type="text/javascript">
        window.addEventListener('DOMContentLoaded', (event) => {

            let input = document.getElementById("phone");
            let dialing_code = document.getElementById("dial_code");
            let dialing_code_iso = document.getElementById("dial_code_iso");
            let iti = window.intlTelInput(input, {
            initialCountry: "za",
            utilsScript: "{{ asset('website/assets/iti/utils.js') }}"
        });
        iti.setNumber('+27');
        iti.setNumber('');

            input.addEventListener("countrychange", function() {
                console.log('working... contact');
                let number = iti.selectedCountryData.dialCode;
                dialing_code.value = '+' + number;
                dialing_code_iso.value = iti.selectedCountryData.iso2.toUpperCase();
            });
        });
    </script>
    <script src="{{ asset('website/assets/iti/intlTelInput.js') }}"></script>




<script>

function numaric(e, object) {
    var KeyID = (window.event) ? event.keyCode : e.which;
    // console.log(KeyID);
    if ((KeyID >= 65 && KeyID <= 90) || (KeyID >= 100 && KeyID <= 122) || (KeyID >= 33 && KeyID <= 45) || (KeyID >=
            58 && KeyID <= 64) || (KeyID >= 91 && KeyID <= 95) || (KeyID >= 123 && KeyID <= 126 || KeyID == 98 || KeyID == 99 || KeyID == 97 || KeyID == 47)) {
        return false;
    }
}

    $('#contact_form').submit(function(e) {
        var form_data = $('#contact_form').serializeArray();
        e.preventDefault(); // Prevent the default form submission
        $('#contact_form').find(".is-invalid").removeClass('is-invalid');
        $('#contact_form').find("#phoneError, #nameError, #emailError, #messageError").html('');

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: form_data,
            headers: {
                // "X-CSRF-Token": $('input[name="_token"]').val()
                "X-CSRF-Token": $('meta[name="csrf-token"]').attr('content')
            },
            beforeSend: function() {
                showLoader();
            },
            success: function(response) {
                hideLoader();
                if (response.status === 204) {
                    toastr.error(response.errors, 'Opps', {
                        progressBar: true,

                    });
                } else if (response.status === 1) {
                    $('#contact_form')[0].reset();
                    toastr.success(response.success, 'Success', {
                        progressBar: true,
                        timeOut: "5000",
                    });

                } else {
                    toastr.error('Oops! Something went wrong', {
                        progressBar: true,
                        timeOut: "5000",

                    });
                }
            },
            error: function(xhr) {
                hideLoader();
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    $.each(errors, function(key, value) {
                        $('#' + key).addClass('is-invalid');
                        $('#' + key + 'Error').text(value[0]).show();
                    });
                }
            }
        });
    });

</script>

@endsection