<?php
    require('header.php');


?>

    <div class="contact-page__holder">
        <div class="section__head">
            <div class="wrapper head__wrapper">
                <h1 class="section__title">Contact Us</h1>
                <div class="section__head__links">
                    <a href="index.php" class="section__head__link">Home</a>
                    <a href="about.php" class="section__head__link head__link__separator">About Us</a>
                    <span class="section__head__link__text head__link__separator">Contact Us</span>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div class="contact-page__content">
<!--                <section class="contact-page__map" id="map">-->
<!--                <script>-->
<!--                function initMap() {-->
<!--                    var center = {lat: 28.463346, lng: 38.672882};-->
<!--                    var map = new google.maps.Map(document.getElementById('map'), {-->
<!--                        zoom: 5,-->
<!--                        center: center,-->
<!--                        mapTypeControl: true,-->
<!--                    });-->
<!--                var locations = [-->
<!--                    ['Lebanon', 33.900038,35.533389],-->
<!--                    ['Saudi Arabia', 24.000627,45.004486],-->
<!--                    ['Qatar', 25.300003,51.516695],-->
<!--                    ['Dubai', 24.466703, 54.366694]-->
<!--                ];-->
<!--                var marker, count;-->
<!--                for (count = 0; count < locations.length; count++) {-->
<!--                        marker = new google.maps.Marker({-->
<!--                        position: new google.maps.LatLng(locations[count][1], locations[count][2]),-->
<!--                        icon: 'images/about/list.png',-->
<!--                        map: map,-->
<!--                        });-->
<!--                    google.maps.event.addListener(marker, 'click', (function (marker, count) {-->
<!--                        return function () {-->
<!--                        }-->
<!--                        })(marker, count));-->
<!--                    }-->
<!--                }-->
<!--                </script>-->
<!--                <script async defer-->
<!--                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB8A28ZHz96_U4ymNi79t9bIK8DRdwszC8&callback=initMap">-->
<!--                </script>-->
<!--                </section>-->
                <div id="map"></div>
                <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
                <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
                <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
                <style>
                    .marker {
                        background-image: url('images/about/list.png');
                        background-size: cover;
                        width: 25px;
                        height: 25px;
                        border-radius: 50%;
                        cursor: pointer;
                    }
                    .mapboxgl-popup {
                        max-width: 200px;
                    }

                    .mapboxgl-popup-content {
                        text-align: center;
                        font-family: 'Open Sans', sans-serif;
                    }
                    .mapboxgl-ctrl-logo, .mapboxgl-ctrl-attrib-inner {
                        display: none !important;
                    }
                </style>
                <script>
                    mapboxgl.accessToken = 'pk.eyJ1IjoibWFyY2VpZCIsImEiOiJja2lyMHZrdzYyMjI0MnhxajB6eHBnNG1sIn0.4-V6krmKIneP682Mj_2jQg';

                    var map = new mapboxgl.Map({
                        container: 'map',
                        style: 'mapbox://styles/mapbox/streets-v11',
                        center: [38.672882, 28.463346],
                        zoom: 4
                    });

                    // code from the next step will go here!
                    var geojson = {
                        type: 'FeatureCollection',
                        features: [{
                            type: 'Feature',
                            geometry: {
                                type: 'Point',
                                coordinates: [35.533389,33.900038]
                            },
                            properties: {
                                title: 'Lebanon',
                            }
                        },

                            {
                                type: 'Feature',
                                geometry: {
                                    type: 'Point',
                                    coordinates: [45.004486,24.000627 ]
                                },
                                properties: {
                                    title: 'Saudi Arabia',
                                }
                            },
                            {
                                type: 'Feature',
                                geometry: {
                                    type: 'Point',
                                    coordinates: [51.516695,25.300003]
                                },
                                properties: {
                                    title: 'Qatar',
                                }
                            },
                            {
                                type: 'Feature',
                                geometry: {
                                    type: 'Point',
                                    coordinates: [54.366694,24.466703]
                                },
                                properties: {
                                    title: 'Dubai',
                                }
                            }
                        ]
                    };
                    // add markers to map
                    geojson.features.forEach(function(marker) {

                        // create a HTML element for each feature
                        var el = document.createElement('div');
                        el.className = 'marker';

                        // make a marker for each feature and add to the map
                        new mapboxgl.Marker(el)
                            .setLngLat(marker.geometry.coordinates)
                            .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
                                .setHTML('<h4>' + marker.properties.title + '</h4>'))
                            .addTo(map);
                    });
                </script>

                <section class="contact-page__contacts">
                    <div class="contacts__item-holder">
                        <div class="contacts__item">
                            <div class="contacts__logo-holder">
                                <img src="images/about/4.jpg" class="contacts__logo" alt="Libatel Lebanon" title="Libatel Lebanon" />
                            </div>
                            <h5 class="contacts__item__title">Libatel Lebanon</h5>
                            <div class="contacts__item__info">
                                <p class="contacts__text">93, Charles De Gaulle Avenue, Debahy Center</p>
                                <p class="contacts__text">Sin El Fil, Beirut - Lebanon</p>
                            </div>
                            <div class="contacts__item__availability">
                                <p class="contacts__text"><strong>Tel:</strong> +961 1 485160</p>
                                <p class="contacts__text"><strong>Fax:</strong> +961 1 485172</p>
                                <p class="contacts__text"><strong>Email:</strong><a class="cantacts__email__link" href="mailto:sales@libatel.com">sales@libatel.com</a></p>
                            </div>
                        </div>
                        <div class="contacts__item">
                            <div class="contacts__logo-holder">
                                <img src="images/about/3.jpg" class="contacts__logo" alt="Libatel Qatar" title="Libatel Qatar" />
                            </div>
                            <h5 class="contacts__item__title">AI Zeebaq Communication Services</h5>
                            <div class="contacts__item__info">
                                <p class="contacts__text">Al Iqaria Tower, 13th Floor, Al Muthaf street</p>
                                <p class="contacts__text">Doha, Qatar</p>
                            </div>
                            <div class="contacts__item__availability">
                                <p class="contacts__text"><strong>Tel:</strong> +974 44 32 13 81</p>
                                <p class="contacts__text"><strong>Email:</strong><a class="cantacts__email__link" href="mailto:info@libatelqa.com">info@libatelqa.com</a></p>
                            </div>
                        </div>
                        <div class="contacts__item">
                            <div class="contacts__logo-holder">
                                <img src="images/about/2.jpg" class="contacts__logo" alt="Libatel Saudi Arabia" title="Libatel Saudi Arabia" />
                            </div>
                            <h5 class="contacts__item__title">Libatel KSA</h5>
                            <div class="contacts__item__info">
                                <p class="contacts__text">Libatel SA LLC/ Saudi Business Center, Office #506</p>
                                <p class="contacts__text">Medina Road, Al-Baghdadiyah</p>
                                <p class="contacts__text">W.Jeddah, Saudi Arabia</p>
                            </div>
                            <div class="contacts__item__availability">
                                <p class="contacts__text"><strong>Tel:</strong> +966 12 6526126</p>
                                <p class="contacts__text"><strong>Email:</strong><a class="cantacts__email__link" href="mailto:sales@libatelksa.com">sales@libatelksa.com</a></p>
                            </div>
                        </div>
                        <div class="contacts__item">
                            <div class="contacts__logo-holder">
                                <img src="images/about/CIT-1.png" class="contacts__logo--cit" alt="Libatel UAE" title="Libatel UAE" />
                            </div>
                            <h5 class="contacts__item__title">Libatel UAE</h5>
                            <div class="contacts__item__info">
                                <p class="contacts__text">Churchill Executive Tower, 33rd Floor, Office 3313-3314</p>
                                <p class="contacts__text">Business Bay</p>
                                <p class="contacts__text">Dubai, UAE</p>
                            </div>
                            <div class="contacts__item__availability">
                                <p class="contacts__text"><strong>Tel:</strong> +971 4 447 5914</p>
                                <p class="contacts__text"><strong>Email:</strong><a class="cantacts__email__link" href="mailto:info@connectit.ae">info@connectit.ae</a></p>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="contacts__form">
                    <div class="about__item__head">
                        <h3 class="about__item__title about__item__title--contact">Contact Form</h3>
                    </div>
                    <form class="contacts-page__form">
                        <div class="contacts__form__item">
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="name">Name<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="name" name="name" tabindex="1">
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="telephone">Telephone</label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="telephone" name="telephone" tabindex="2">
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="website">Website</label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="website" name="website" maxlength="30" tabindex="3">
                                </div>
                            </div>
                        </div>
                        <div class="contacts__form__item">
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="mail">Email<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="mail" name="mail" tabindex="4">
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="country">Country<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <select type="text" class="form-control shadow-none" id="country" name="country" tabindex="5">
                                        <option value></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="city">City<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="city" name="city" tabindex="6">
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="company">Company<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <input type="text" class="form-control shadow-none" id="company" name="company" tabindex="7">
                                </div>
                            </div>
                            <div class="form-group contacts__form-group">
                                <label class="page__label contacts-page__label" for="message">Message<span class="field-required"> *</span></label>
                                <div class="input-container contacts__input-container">
                                    <textarea type="text" class="shadow-none form-control textarea medium" id="message" name="message" tabindex="8" rows="5" cols="42"></textarea>
                                </div>
                            </div>
                            <div class="btn-holder contacts__btn-holder">
                                <button type="submit" class="main-btn form-btn">
                                    <span>Send</span>
                                </button>
                            </div>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>

<?php require('footer.php') ?>