{% extends "layout.html" %}

{% set title = 'Contact us' %}

{% block content %}

<section class="section bg-grey bt">
    <div class="container">
        <div class="page-title">
            <h3 class="text-center text-bold">Contact us</h3>
            <p class="text-center">Need help? Contact us by phone, online or in-store.</p>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="cs-center">
            <div class="section-title mbxxlg">
                <h3 class="toshiba-title text-bold no-margin mb-2">Customer service center</h3>
                <p>Working hours 9:00 AM to 6:00 PM</p>
                {% include '../template/component/toshiba-border.html' %}
            </div>
            <div class="row">
                <div class="col-sm-6">
                    <div class="cs-phone-tel mb-4">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">Cairo, Abdeen</span>
                        </div>
                        <div class="cs-tel mt-3 text-bold"><a href="tel:19028">19028</a></div>
                        <p class="cs-address mt-2 mb-0">1 Abd El-Aziz, Ghayt Al Adah</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="cs-phone-tel mb-4">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">Giza, Imbaba</span>
                        </div>
                        <div class="cs-tel mt-3 text-bold"><a href="tel:01115555251">0111 5555 251</a></div>
                        <p class="cs-address mt-2 mb-0">Khaled Ibn Al Walid, Al Moatamadeyah</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="cs-phone-tel mb-4">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">Giza, Rod El Farag</span>
                        </div>
                        <div class="cs-tel mt-3 text-bold"><a href="tel:01115555459">0111 5555 459</a></div>
                        <p class="cs-address mt-2 mb-0">16 Gazirat Badran, Qasouret Ash Shawam</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="cs-phone-tel mb-4">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">Giza, Imbaba</span>
                        </div>
                        <div class="cs-tel mt-3 text-bold"><a href="tel:01115555251">0111 5555 251</a></div>
                        <p class="cs-address mt-2 mb-0">Khaled Ibn Al Walid, Al Moatamadeyah</p>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="cs-phone-tel mb-4">
                        <div class="toshiba-tag">
                            {% include '../template/component/toshiba-border.html' %}
                            <span class="d-inline-block mlmd text-bold text-uppercase text-brand">Giza, Rod El Farag</span>
                        </div>
                        <div class="cs-tel mt-3 text-bold"><a href="tel:01115555459">0111 5555 459</a></div>
                        <p class="cs-address mt-2 mb-0">16 Gazirat Badran, Qasouret Ash Shawam</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section bg-grey">
    <div class="container">
        <div class="cs-contact">
                <div class="section-title mbxxlg">
                    <h3 class="toshiba-title text-bold no-margin mb-2">Contact us</h3>
                    <p>Typically we replies within 48 hours</p>
                    {% include '../template/component/toshiba-border.html' %}
                </div>
                <form action="">
                    <div class="row mb-3">
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="fullName" class="mb-2">Full Name</label>
                                <input type="text" class="form-control" id="fullName" placeholder="Full name">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="email" class="mb-2">Email Adress</label>
                                <input type="email" class="form-control" id="email" placeholder="Email address">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="phoneNumber" class="mb-2">Phone Number</label>
                                <input type="text" class="form-control" id="phoneNumber" placeholder="Phone number">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="form-group">
                                <label for="subject" class="mb-2">Subject</label>
                                <input type="text" class="form-control" id="subject" placeholder="Subject">
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label for="message" class="mb-2">Message</label>
                                <textarea name="" id="message" class="form-control" cols="30" rows="5"></textarea>
                            </div>
                        </div>
                    </div>
                    <button type="submit" class="btn">Submit</button>
                </form>
        </div>
    </div>
</section>


<section class="section pb-0">
    <div class="container">
        <div class="section-title mbxxlg">
            <h3 class="toshiba-title text-bold no-margin mb-2">Branch Locator</h3>
            <p>Working hours 9:00 AM to 12:00 PM</p>
            {% include '../template/component/toshiba-border.html' %}
        </div>
    </div>
    <div class="cs-branch">
        <div id="map"></div>
    </div>
</section>
{% endblock content %}

{% block JS %}
<script>
    function initMap() {
        var map,
            markers = [
                ['Abdeen Branch, Cairo', 30.0465576,31.2385985, "./assets/images/icons/marker.svg"],
                ['Imbaba Branch, Giza', 30.0451755,31.2003054, "./assets/images/icons/marker.svg"]
            ];

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 30.0509352, lng: 31.1919531},
            zoom: 13 ,
            styles: [
                {
                    "featureType": "all",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "saturation": 36
                        },
                        {
                            "color": "#333333"
                        },
                        {
                            "lightness": 40
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "visibility": "on"
                        },
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "all",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#fefefe"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "administrative",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#fefefe"
                        },
                        {
                            "lightness": 17
                        },
                        {
                            "weight": 1.2
                        }
                    ]
                },
                {
                    "featureType": "administrative.locality",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#ff0000"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 20
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#dedede"
                        },
                        {
                            "lightness": 21
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.fill",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry.stroke",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 29
                        },
                        {
                            "weight": 0.2
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 18
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        },
                        {
                            "lightness": 16
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f2f2f2"
                        },
                        {
                            "lightness": 19
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#e9e9e9"
                        },
                        {
                            "lightness": 17
                        }
                    ]
                }
            ]
        });

        // Loop through our array of markers & place each one on the map
        for( i = 0; i < markers.length; i++ ) {
            var lat = markers[i][1],
                lng = markers[i][2],
                pin = markers[i][3];

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: pin,
                title: markers[i][0]
            });
        }
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWs4kEppBNkazmiNugMLoOdjGhpwVgX78&callback=initMap"
        async defer></script>

{% endblock %}