<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>CONSTRUCTION</title>

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Construction Html5 Template">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

    <!-- Favicon
  ================================================== -->
    <link rel="icon" type="image/png" href="{{ asset('frontOffice/images/favicon.png') }}">

    <!-- CSS
  ================================================== -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/bootstrap/bootstrap.min.css') }}">
    <!-- FontAwesome -->
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/fontawesome/css/all.min.css') }}">
    <!-- Animation -->
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/animate-css/animate.css') }}">
    <!-- slick Carousel -->
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/slick/slick.css') }}">
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/slick/slick-theme.css') }}">
    <!-- Colorbox -->
    <link rel="stylesheet" href="{{ asset('frontOffice/plugins/colorbox/colorbox.css') }}">
    <!-- Template styles-->
    <link rel="stylesheet" href="{{ asset('frontOffice/css/style.css') }}">

    <link rel="stylesheet" href="{{ asset('frontOffice/datetimepicker/jquery.datetimepicker.css') }}"/>

    <style>
        #neonShadow{
            height:70px;
            width:70px;
            border:none;
            border-radius:50px;
            transition:0.3s;
            background-color:#ffb600;
            animation: glow 1s infinite ;
            transition:0.5s;

        }
        @keyframes glow{
            0%{
                box-shadow: 5px 5px 20px rgb(85, 85, 85),-5px -5px 20px rgb(85, 85, 85);}

            50%{
                box-shadow: 5px 5px 20px rgb(255, 182, 0),-5px -5px 20px rgb(255, 182, 0)
            }
            100%{
                box-shadow: 5px 5px 20px rgb(85, 85, 85),-5px -5px 20px rgb(85, 85, 85)
            }
        }
    </style>

</head>
<body>
<div class="body-inner">


    <!--/ Topbar end -->
    <!-- Header start -->
    <header id="header" class="header-one">
        <div class="bg-white">
            <div class="container">
                <div class="logo-area">
                    <div class="row align-items-center">
                        <div class="logo col-lg-3 text-center text-lg-left mb-3 mb-md-5 mb-lg-0">
                            <a class="d-block" href="/">
                                <img loading="lazy" src="{{ asset('frontOffice/images/logo.png') }}" alt="Constra">
                            </a>
                        </div><!-- logo end -->

                        <div class="col-lg-9 header-right">
                            <ul class="top-info-box">
                                <li>
                                    <div class="info-box">
                                        <div class="info-box-content">
                                            <p class="info-box-title">Appelez-nous</p>
                                            <p class="info-box-subtitle"><a href="tel:(+9) 847-291-4353">(+9) 847-291-4353</a></p>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="info-box">
                                        <div class="info-box-content">
                                            <p class="info-box-title">Envoyez-nous un email</p>
                                            <p class="info-box-subtitle"><a href="mailto:">office@Constra.com</a></p>
                                        </div>
                                    </div>
                                </li>

                                <li class="header-get-a-quote">

                                    <button type="button" class="btn btn-primary openmodal" data-toggle="modal" data-target="#myModal">
                                        Prenez un rendez-vous
                                    </button>
                                </li>
                            </ul><!-- Ul end -->
                        </div><!-- header right end -->
                    </div><!-- logo area end -->
                </div><!-- Row end -->
            </div><!-- Container end -->
        </div>
        <div class="site-navigation">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <nav class="navbar navbar-expand-lg navbar-dark p-0">
                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>

                            <div id="navbar-collapse-" class="collapse navbar-collapse">
                                <ul class="nav navbar-nav mr-auto" >
                                    <li class="nav-item"><a class="nav-link" href="/">Accueil</a></li>
                                    <li class="nav-item"><a class="nav-link" href="/services/">SERVICES</a></li>
                                    <li class="nav-item"><a class="nav-link" href="/galerie/">galerie</a></li>
                                    <li class="nav-item"><a class="nav-link" href="/propos/">à propos</a></li>
                                    <li class="nav-item"><a class="nav-link" href="/contact/">contact</a></li>

                                    <!--
                                    <li class="nav-item dropdown">
                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Company <i class="fa fa-angle-down"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="about.html">About Us</a></li>
                                            <li><a href="team.html">Our People</a></li>
                                            <li><a href="testimonials.html">Testimonials</a></li>
                                            <li><a href="faq.html">Faq</a></li>
                                            <li><a href="pricing.html">Pricing</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects <i class="fa fa-angle-down"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="projects.html">Projects All</a></li>
                                            <li><a href="projects-single.html">Projects Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="services.html">Services All</a></li>
                                            <li><a href="service-single.html">Services Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Features <i class="fa fa-angle-down"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="typography.html">Typography</a></li>
                                            <li><a href="404.html">404</a></li>
                                            <li class="dropdown-submenu">
                                                <a href="#!" class="dropdown-toggle" data-toggle="dropdown">Parent Menu</a>
                                                <ul class="dropdown-menu">
                                                    <li><a href="#!">Child Menu 1</a></li>
                                                    <li><a href="#!">Child Menu 2</a></li>
                                                    <li><a href="#!">Child Menu 3</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="nav-item dropdown">
                                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">News <i class="fa fa-angle-down"></i></a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a href="news-left-sidebar.html">News Left Sidebar</a></li>
                                            <li><a href="news-right-sidebar.html">News Right Sidebar</a></li>
                                            <li><a href="news-single.html">News Single</a></li>
                                        </ul>
                                    </li>
                                    <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>-->
                                </ul>
                            </div>
                        </nav>
                    </div>
                    <!--/ Col end -->
                </div>
                <!--/ Row end -->

                <div class="nav-search">

                </div><!-- Search end -->

                <div class="search-block" style="display: none;">
                    <label for="search-field" class="w-100 mb-0">
                        <input type="text" class="form-control" id="search-field" placeholder="Tapez ce que vous voulez et entrez">
                    </label>
                    <span class="search-close">&times;</span>
                </div><!-- Site search end -->
            </div>
            <!--/ Container end -->

        </div>
        <!--/ Navigation end -->
    </header>
    <!--/ Header end -->
    {% block body %}
    {% endblock body %}
    <footer id="footer" class="footer bg-overlay">
        <div class="footer-main">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-lg-4 col-md-6 footer-widget footer-about">
                        <h3 class="widget-title">About Us</h3>
                        <img loading="lazy" width="200px" class="footer-logo" src="{{ asset('frontOffice/images/footer-logo.png') }}" alt="Constra">
                        <p></p>
                        <!--<div class="footer-social">
                            <ul>
                                <li><a  href="https://facebook.com/themefisher" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a></li>
                                <li><a href="https://twitter.com/themefisher" aria-label="Twitter"><i class="fab fa-twitter"></i></a></li>
                                <li><a href="https://instagram.com/themefisher" aria-label="Instagram"><i class="fab fa-instagram"></i></a></li>
                                <li><a href="https://github.com/themefisher" aria-label="Github"><i class="fab fa-github"></i></a></li>
                            </ul>
                        </div>--><!-- Footer social end -->
                    </div><!-- Col end -->
                    <div class="col-lg-4 col-md-6 footer-widget mt-5 mt-md-0">
                        <h3 class="widget-title">Heures d'ouverture</h3>
                        <div class="working-hours">
                            Nous travaillons 7 jours sur 7, tous les jours hors jours fériés. Contactez-nous si vous avez une urgence, avec notre
                            Hotline et formulaire de contact.
                            <!--<br><br> Monday - Friday: <span class="text-right">10:00 - 16:00 </span>
                            <br> Samedi: <span class="text-right">12:00 - 15:00</span>
                            <br> Dimanche et jours fériés : <span class="text-right">09:00 - 12:00</span>-->
                        </div>
                    </div><!-- Col end -->
                    <div class="col-lg-3 col-md-6 mt-5 mt-lg-0 footer-widget">
                        <h3 class="widget-title">Liens Rapide</h3>
                        <ul class="list-arrow">
                            <li><a href="/services/">Services</a></li>
                            <li><a href="/galerie/">Galerie</a></li>
                            <li><a href="/propos/">A propos</a></li>
                            <li><a href="/contact/">Contact</a></li>
                        </ul>
                    </div><!-- Col end -->
                </div><!-- Row end -->
            </div><!-- Container end -->
        </div><!-- Footer main end -->
        <div class="copyright">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="copyright-info text-center text-md-left">
              <span>Copyright &copy; <script>
                  document.write(new Date().getFullYear())
                </script>, Conçue &amp;Développé par <a href="mailto:ayoub.@marjani@outlook.com">AYOUB MARJANI</a></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="footer-menu text-center text-md-right">
                            <ul class="list-unstyled">
                                <li><a href="/about/">À propos </a></li>
                                <li><a href="/services/">Nos Services</a></li>
                                <li><a href="/contact/">Contact</a></li>
                            </ul>
                        </div>
                    </div>
                </div><!-- Row end -->
                <!--<div id="back-to-top" data-spy="affix" data-offset-top="10" class="back-to-top position-fixed">
                    <button class="btn btn-primary" title="Back to Top">
                        <i class="fa fa-angle-double-up"></i>
                    </button>
                </div>-->
                <div class="back-to-top position-fixed" style="display: block;bottom: 40px;right: 40px;top: auto;z-index: 11;position: fixed!important;    color: #111;padding: 25px 0 15px;font-weight: 600;font-size: 12px;">
                    <button id="neonShadow" type="button" class="btn btn-primary openmodal" data-toggle="modal" data-target="#myModal">
                        <i class="fa fa-pencil-alt"></i>
                    </button>
                </div>
            </div><!-- Container end -->
        </div><!-- Copyright end -->
    </footer><!-- Footer end -->
    <!--Modal Launch Button-->
    <!--Division for Modal-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <!--Modal Content-->
            <div class="modal-content">
                <!-- Modal Header-->
                <div class="modal-header">
                    <h3>Prenez un rendez-vous</h3>
                    <!--Close/Cross Button-->
                    <button type="button" class="close" data-dismiss="modal" style="color: white;">&times;</button>
                </div>
                <!-- Modal Body-->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form action="/" id="searchForm">
                                <div class="form-group">
                                    <label>Nom et Prénom*:</label>
                                    <input class="form-control form-control-name" name="name" value="" id="name" placeholder="" type="text" required>
                                </div>
                                <div class="form-group">
                                    <label>Numéro Téléphone*:</label>
                                    <input class="form-control form-control-name" name="name" value="" id="name" placeholder="" type="text" required>
                                </div>
                                <div class="form-group">
                                    <label>Adresse*:</label>
                                    <input class="form-control form-control-name" name="name" value="" id="name" placeholder="" type="text" required>
                                </div>
                                <div class="form-group">
                                    <label>Service*:</label>
                                    <select class="form-control form-control-name selectpicker" name="name" multiple required>
                                        <option value="" disabled>Select service</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Date de rendez-vous*:</label>
                                    <input type="datetime-local" name="date" class="form-control form-control-name" id="birthdaytime" >

                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!-- Modal Footer-->
                <div class="modal-footer">
                    <a type="button" class="btn btn-primary">Valider</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Javascript Files
    ================================================== -->
    <!-- initialize jQuery Library -->
    <script src="{{ asset('frontOffice/plugins/jQuery/jquery.min.js') }}"></script>
    <!-- Bootstrap jQuery -->
    <script src="{{ asset('frontOffice/plugins/bootstrap/bootstrap.min.js') }}" defer></script>
    <!-- Slick Carousel -->
    <script src="{{ asset('frontOffice/plugins/slick/slick.min.js') }}"></script>
    <script src="{{ asset('frontOffice/plugins/slick/slick-animation.min.js') }}"></script>
    <!-- Color box -->
    <script src="{{ asset('frontOffice/plugins/colorbox/jquery.colorbox.js') }}"></script>
    <!-- shuffle -->
    <script src="{{ asset('frontOffice/plugins/shuffle/shuffle.min.js') }}" defer></script>
    <!-- Google Map API Key-->
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU" defer></script>
    <!-- Google Map Plugin-->
    <script src="{{ asset('frontOffice/plugins/google-map/map.js') }}" defer></script>
    <!-- Template custom -->
    <script src="{{ asset('frontOffice/js/script.js') }}"></script>
    <!--<script src="{{ asset('frontOffice/datetimepicker/path/to/cdn/jquery.min.js') }}"></script>-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="{{ asset('frontOffice/datetimepicker/jquery.datetimepicker.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>

    <script>
        // Attach a submit handler to the form
        $( "#searchForm" ).submit(function( event ) {

            // Stop form from submitting normally
            event.preventDefault();

            // Get some values from elements on the page:
            var $form = $( this ),
                term = $form.find( "input[name='s']" ).val(),
                url = $form.attr( "action" );

            // Send the data using post
            var posting = $.post( url, { s: term } );

            // Put the results in a div
            posting.done(function( data ) {
                var content = $( data ).find( "#content" );
                $( "#result" ).empty().append( content );
            });
        });
    </script>

</div><!-- Body inner end -->
</body>

</html>
