{% extends 'base.html.twig' %}

{% block title %}
    Import Leads
{% endblock %}

{% block body %}

<!-- Main Wrapper -->
<div class="container">
<!-- Header -->
<div class="header" id="heading">
    <!-- Logo -->
    <div class="header-left">
        <a href="{{path('app_home')}}" class="logo">
            <img src="{{asset('img/logo.png')}}"  alt="Logo" class="sidebar-logo">
            <img src="{{asset('img/s-logo.png')}}"  alt="Logo" class="mini-sidebar-logo">
        </a>
    </div>
    <!-- /Logo -->
    
    <a id="toggle_btn" href="javascript:void(0);">
        <span class="bar-icon">
            <span></span>
            <span></span>
            <span></span>
        </span>
    </a>
    
    <!-- Header Title -->
    <div class="page-title-box">
        <div class="top-nav-search">
                <a href="javascript:void(0);" class="responsive-search">
                    <i class="fa fa-search"></i>
               </a>
                <form action="search.html">
                    <input class="form-control" type="text" placeholder="Search here">
                    <button class="btn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
    </div>
    <!-- /Header Title -->
    
    <a id="mobile_btn" class="mobile_btn" href="#sidebar"><i class="fa fa-bars"></i></a>
    
    <!-- Header Menu -->
    <ul class="nav user-menu">
    
        <!-- Search -->
        <li class="nav-item">
            
        </li>
        <!-- /Search -->
    
        <!-- Flag -->
        {# <li class="nav-item dropdown has-arrow flag-nav">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
                <img src="{{asset('img/flags/us.png')}}" alt="" height="20"> <span>English</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
                <a href="javascript:void(0);" class="dropdown-item">
                    <img src="{{asset('img/flags/us.png')}}" alt="" height="16"> English
                </a>
                <a href="javascript:void(0);" class="dropdown-item">
                    <img src="{{asset('img/flags/fr.png')}}" alt="" height="16"> French
                </a>
                <a href="javascript:void(0);" class="dropdown-item">
                    <img src="{{asset('img/flags/es.png')}}" alt="" height="16"> Spanish
                </a>
                <a href="javascript:void(0);" class="dropdown-item">
                    <img src="{{asset('img/flags/de.png')}}" alt="" height="16"> German
                </a>
            </div>
        </li> #}
        <!-- /Flag -->
    
        {# <!-- Notifications -->
        <li class="nav-item dropdown">
            <a href="#" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                <i class="fa fa-bell-o"></i> <span class="badge rounded-pill">3</span>
            </a>
            <div class="dropdown-menu notifications">
                <div class="topnav-dropdown-header">
                    <span class="notification-title">Notifications</span>
                    <a href="javascript:void(0)" class="clear-noti"> Clear All </a>
                </div>
                <div class="noti-content">
                    <ul class="notification-list">
                        <li class="notification-message">
                            <a href="activities.html">
                                <div class="media d-flex">
                                    <span class="avatar flex-shrink-0">
                                        <img alt="" src="{{asset('img/profiles/avatar-02.jpg')}}">
                                    </span>
                                    <div class="media-body flex-grow-1">
                                        <p class="noti-details"><span class="noti-title">John Doe</span> added new task <span class="noti-title">Patient appointment booking</span></p>
                                        <p class="noti-time"><span class="notification-time">4 mins ago</span></p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="activities.html">
                                <div class="media d-flex">
                                    <span class="avatar flex-shrink-0">
                                        <img alt="" src="assets/img/profiles/avatar-03.jpg">
                                    </span>
                                    <div class="media-body flex-grow-1">
                                        <p class="noti-details"><span class="noti-title">Tarah Shropshire</span> changed the task name <span class="noti-title">Appointment booking with payment gateway</span></p>
                                        <p class="noti-time"><span class="notification-time">6 mins ago</span></p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="activities.html">
                                <div class="media d-flex">
                                    <span class="avatar flex-shrink-0">
                                        <img alt="" src="assets/img/profiles/avatar-06.jpg">
                                    </span>
                                    <div class="media-body flex-grow-1">
                                        <p class="noti-details"><span class="noti-title">Misty Tison</span> added <span class="noti-title">Domenic Houston</span> and <span class="noti-title">Claire Mapes</span> to project <span class="noti-title">Doctor available module</span></p>
                                        <p class="noti-time"><span class="notification-time">8 mins ago</span></p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="activities.html">
                                <div class="media d-flex">
                                    <span class="avatar flex-shrink-0">
                                        <img alt="" src="{{asset('img/profiles/avatar-17.jpg')}}">
                                    </span>
                                    <div class="media-body flex-grow-1">
                                        <p class="noti-details"><span class="noti-title">Rolland Webber</span> completed task <span class="noti-title">Patient and Doctor video conferencing</span></p>
                                        <p class="noti-time"><span class="notification-time">12 mins ago</span></p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="activities.html">
                                <div class="media d-flex">
                                    <span class="avatar flex-shrink-0">
                                        <img alt="" src="{{asset('img/profiles/avatar-13.jpg')}}">
                                    </span>
                                    <div class="media-body flex-grow-1">
                                        <p class="noti-details"><span class="noti-title">Bernardo Galaviz</span> added new task <span class="noti-title">Private chat module</span></p>
                                        <p class="noti-time"><span class="notification-time">2 days ago</span></p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="topnav-dropdown-footer">
                    <a href="activities.html">View all Notifications</a>
                </div>
            </div>
        </li> #}
        <!-- /Notifications -->
{# 					
        <!-- Message Notifications -->
        <li class="nav-item dropdown">
            <a href="#" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
                <i class="fa fa-comment-o"></i> <span class="badge rounded-pill">8</span>
            </a>
            <div class="dropdown-menu notifications">
                <div class="topnav-dropdown-header">
                    <span class="notification-title">Messages</span>
                    <a href="javascript:void(0)" class="clear-noti"> Clear All </a>
                </div>
                <div class="noti-content">
                    <ul class="notification-list">
                        <li class="notification-message">
                            <a href="#">
                                <div class="list-item">
                                    <div class="list-left">
                                        <span class="avatar">
                                            <img alt="" src="{{asset('img/profiles/avatar-09.jpg')}}">
                                        </span>
                                    </div>
                                    <div class="list-body">
                                        <span class="message-author">Richard Miles </span>
                                        <span class="message-time">12:28 AM</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="#">
                                <div class="list-item">
                                    <div class="list-left">
                                        <span class="avatar">
                                            <img alt="" src="{{asset('img/profiles/avatar-02.jpg')}}">
                                        </span>
                                    </div>
                                    <div class="list-body">
                                        <span class="message-author">John Doe</span>
                                        <span class="message-time">6 Mar</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="#">
                                <div class="list-item">
                                    <div class="list-left">
                                        <span class="avatar">
                                            <img alt="" src="{{asset('img/profiles/avatar-03.jpg')}}">
                                        </span>
                                    </div>
                                    <div class="list-body">
                                        <span class="message-author"> Tarah Shropshire </span>
                                        <span class="message-time">5 Mar</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="#">
                                <div class="list-item">
                                    <div class="list-left">
                                        <span class="avatar">
                                            <img alt="" src="{{asset('img/profiles/avatar-05.jpg')}}">
                                        </span>
                                    </div>
                                    <div class="list-body">
                                        <span class="message-author">Mike Litorus</span>
                                        <span class="message-time">3 Mar</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="notification-message">
                            <a href="#">
                                <div class="list-item">
                                    <div class="list-left">
                                        <span class="avatar">
                                            <img alt="" src="{{asset('img/profiles/avatar-08.jpg')}}">
                                        </span>
                                    </div>
                                    <div class="list-body">
                                        <span class="message-author"> Catherine Manseau </span>
                                        <span class="message-time">27 Feb</span>
                                        <div class="clearfix"></div>
                                        <span class="message-content">Lorem ipsum dolor sit amet, consectetur adipiscing</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="topnav-dropdown-footer">
                    <a href="#">View all Messages</a>
                </div>
            </div>
        </li> #}
        <!-- /Message Notifications -->

        {% if 'ROLE_ADMIN' in app.user.roles %}
<li class="nav-item dropdown has-arrow main-drop">
<a href="#" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">
<span class="user-img"><img src="{{ asset('img/profiles/avatar-21.jpg') }}" alt="">
    <span class="status online"></span>
</span>
<span>{{ app.user.nom}} {{ app.user.prenom}}</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="profile.html">My Profile</a>
<a class="dropdown-item" href="settings.html">Settings</a>
<a class="dropdown-item" href="{{ path('user_create') }}">New user</a>
<a class="dropdown-item" href="{{ path('app_logout') }}">Logout</a>
</div>
</li>

{% elseif 'ROLE_COMMERCIAL' in app.user.roles or 'ROLE_TELEPRO' in app.user.roles %}

<li class="nav-item dropdown has-arrow main-drop">
<a href="#" class="dropdown-toggle nav-link" data-bs-toggle="dropdown">

<span class="status online"></span>
</span>
<span>{{ app.user.nom}} {{ app.user.prenom}}</span>
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="profile.html">My Profile</a>
<a class="dropdown-item" href="{{ path('app_logout') }}">Logout</a>
</div>
</li>



{% endif %}
    </ul>
    <!-- /Header Menu -->
    
    <!-- Mobile Menu -->
    <div class="dropdown mobile-user-menu">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
            <a class="dropdown-item" href="profile.html">My Profile</a>
            <a class="dropdown-item" href="settings.html">Settings</a>
        <a class="dropdown-item" href="{{path('user_create')}}">New user</a>
            <a class="dropdown-item" href="{{path('app_logout')}}">Logout</a>
        </div>
    </div>
    <!-- /Mobile Menu -->
    
</div>
<!-- /Header -->

<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <div class="sidebar-inner slimscroll">
        <form action="search.html" class="mobile-view">
            <input class="form-control" type="text" placeholder="Search here">
            <button class="btn" type="button"><i class="fa fa-search"></i></button>
        </form>
        <div id="sidebar-menu" class="sidebar-menu">

            <ul>
                <li class="nav-item nav-profile">
                  <a href="#" class="nav-link">
                    <div class="nav-profile-image">
                      <img src="{{asset('img/profiles/avatar-17.jpg')}}" alt="profile">
                      
                    </div>
                    <div class="nav-profile-text d-flex flex-column">
                      <span class="font-weight-bold mb-2">David Grey. H</span>
                      <span class="text-white text-small">Project Manager</span>
                    </div>
                    <i class="mdi mdi-bookmark-check text-success nav-profile-badge"></i>
                  </a>
                </li>
                <li class="menu-title"> 
                    <span>Main</span>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather-home"></i> <span> Dashboard</span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="index.html" class="active">Deals Dashboard</a></li>
                        <li><a href="projects-dashboard.html">Projects Dashboard</a></li>
                        <li><a href="{{path('leads_dashboard')}}">Leads Dashboard</a></li>
                    </ul>
                </li>
                
                <li> 
                    <a href="tasks.html"><i class="feather-check-square"></i> <span>Tasks</span></a>
                </li>
                <li> 
                    <a href="contacts.html"><i class="feather-smartphone"></i> <span>Contacts</span></a>
                </li>
                <li> 
                    <a href="companies.html"><i class="feather-database"></i> <span>Companies</span></a>
                </li>
                <li> 
                    <a href="{{path('leads')}}"><i class="feather-user"></i> <span>Leads</span></a>
                </li>
                
                <li> 
                <a href="{{path('app_leads_import')}}"><i class="feather-user"></i> <span> Importer des Leads</span></a>
            </li>


							<li> 
							<a href="{{path('app_assignement_lead')}}"><i class="feather-user"></i> <span> Assigner des leads</span></a>
						</li>


                <li> 
                    <a href="deals.html"><i class="feather-radio"></i> <span>Deals</span></a>
                </li>
                <li> 
                    <a href="projects.html"><i class="feather-grid"></i> <span>Projects</span></a>
                </li>
                <li> 
                    <a href="reports.html"><i class="feather-bar-chart-2"></i> <span>Reports</span></a>
                </li>
                <li> 
                <a href="{{path('app_planing')}}"><i class="feather-calendar"></i> <span>PLANING</span></a>
                </li>							
                <li class="submenu">
                    <a href="#"><i class="feather-grid"></i> <span> Blogs</span>
                        <span class="menu-arrow"></span>
                    </a>
                    <ul class="sub-menus">
                        <li><a href="blog.html" >All Blogs</a></li>
                        <li><a href="add-blog.html">Add Blog</a></li>
                        <li><a href="edit-blog.html">Edit Blog</a></li>
                        <li><a href="blog-Categories.html">Categories</a></li>
                    </ul>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather-clipboard"></i> <span>  Invoices </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="invoices.html" >Invoices List</a></li>
                        <li><a href="invoice-grid.html" >Invoices Grid</a></li>
                        <li><a href="add-invoice.html">Add Invoices</a></li>
                        <li><a href="edit-invoice.html">Edit Invoices</a></li>
                        <li><a href="view-invoice.html">Invoices Details</a></li>
                        <li><a href="invoices-settings.html">Invoices Settings</a></li>
                    </ul>
                </li>
                <li> 
                    <a href="email.html"><i class="feather-mail"></i> <span>Email</span></a>
                </li>
                <li> 
                    <a href="settings.html"><i class="feather-settings"></i> <span>Settings</span></a>
                </li>
                
                <li class="menu-title"> 
                    <span>Pages</span>
                </li>
                
                <li class="submenu">
                    <a href="#"><i class="feather-alert-triangle"></i> <span> Error Pages </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="error-404.html">404 Error </a></li>
                        <li><a href="error-500.html">500 Error </a></li>
                    </ul>
                </li>
                
                <li class="submenu">
                    <a href="#"><i class="feather-list"></i> <span> Pages </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="faq.html"> FAQ </a></li>
                        <li><a href="terms.html"> Terms </a></li>
                        <li><a href="privacy-policy.html"> Privacy Policy </a></li>
                        <li><a href="blank-page.html"> Blank Page </a></li>
                    </ul>
                </li>
                <li class="menu-title"> 
                    <span>UI Interface</span>
                </li>
                <li> 
                    <a href="components.html"><i class="feather-layout"></i> <span>Components</span></a>
                </li>							
                <li class="submenu">
                    <a href="#"><i class="feather feather-box"></i> <span>Elements </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="sweetalerts.html">Sweet Alerts</a></li>
                        <li><a href="tooltip.html">Tooltip</a></li>
                        <li><a href="popover.html">Popover</a></li>
                        <li><a href="ribbon.html">Ribbon</a></li>
                        <li><a href="clipboard.html">Clipboard</a></li>
                        <li><a href="drag-drop.html">Drag & Drop</a></li>
                        <li><a href="rangeslider.html">Range Slider</a></li>
                        <li><a href="rating.html">Rating</a></li>
                        <li><a href="toastr.html">Toastr</a></li>
                        <li><a href="text-editor.html">Text Editor</a></li>
                        <li><a href="counter.html">Counter</a></li>
                        <li><a href="scrollbar.html">Scrollbar</a></li>
                        <li><a href="spinner.html">Spinner</a></li>
                        <li><a href="notification.html">Notification</a></li>
                        <li><a href="lightbox.html">Lightbox</a></li>
                        <li><a href="stickynote.html">Sticky Note</a></li>
                        <li><a href="timeline.html">Timeline</a></li>
                        <li><a href="horizontal-timeline.html">Horizontal Timeline</a></li>
                        <li><a href="form-wizard.html">Form Wizard</a></li>
                    </ul>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather feather-bar-chart-2"></i> <span> Charts </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="chart-apex.html">Apex Charts</a></li>
                        <li><a href="chart-js.html">Chart Js</a></li>
                        <li><a href="chart-morris.html">Morris Charts</a></li>
                        <li><a href="chart-flot.html">Flot Charts</a></li>
                        <li><a href="chart-peity.html">Peity Charts</a></li>
                        <li><a href="chart-c3.html">C3 Charts</a></li>
                    </ul>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather feather-award"></i> <span> Icons </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="icon-fontawesome.html">Fontawesome Icons</a></li>
                        <li><a href="icon-feather.html">Feather Icons</a></li>
                        <li><a href="icon-ionic.html">Ionic Icons</a></li>
                        <li><a href="icon-material.html">Material Icons</a></li>
                        <li><a href="icon-pe7.html">Pe7 Icons</a></li>
                        <li><a href="icon-simpleline.html">Simpleline Icons</a></li>
                        <li><a href="icon-themify.html">Themify Icons</a></li>
                        <li><a href="icon-weather.html">Weather Icons</a></li>
                        <li><a href="icon-typicon.html">Typicon Icons</a></li>
                        <li><a href="icon-flag.html">Flag Icons</a></li>
                    </ul>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather-credit-card"></i> <span> Forms </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="">Basic Inputs </a></li>
                        <li><a href="" >Input Groups </a></li>
                        <li><a href="">Horizontal Form </a></li>
                        <li><a href=""> Vertical Form </a></li>
                        <li><a href=""> Form Mask </a></li>
                        <li><a href=""> Form Validation </a></li>
                    </ul>
                </li>
                <li class="submenu">
                    <a href="#"><i class="feather-box"></i> <span> Tables </span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li><a href="">Basic Tables </a></li>
                        <li><a href="">Data Table </a></li>
                    </ul>
                </li>
                <li class="menu-title"> 
                    <span>Extras</span>
                </li>
                
                <li class="submenu">
                    <a href="javascript:void(0);"><i class="feather-command"></i> <span>Multi Level</span> <span class="menu-arrow"></span></a>
                    <ul class="sub-menus">
                        <li class="submenu">
                            <a href="javascript:void(0);"> <span>Level 1</span> <span class="menu-arrow"></span></a>
                            <ul class="sub-menus">
                                <li><a href="javascript:void(0);"><span>Level 2</span></a></li>
                                <li class="submenu">
                                    <a href="javascript:void(0);"> <span> Level 2</span> <span class="menu-arrow"></span></a>
                                    <ul class="sub-menus">
                                        <li><a href="javascript:void(0);">Level 3</a></li>
                                        <li><a href="javascript:void(0);">Level 3</a></li>
                                    </ul>
                                </li>
                                <li><a href="javascript:void(0);"> <span>Level 2</span></a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="javascript:void(0);"> <span>Level 1</span></a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- /Sidebar -->

<!-- Page Wrapper -->
<div class="page-wrapper">
    <div class="content container-fluid">

        <!-- Page Header -->
        <div class="crms-title row bg-white mb-4">
            <div class="col">
                <h3 class="page-title">
                <span class="page-title-icon bg-gradient-primary text-white me-2">
                  <i class="la la-table"></i>
                </span> <span>Deals Dashboard</span></h3>
            </div>
            <div class="col text-end">
                <ul class="breadcrumb bg-white float-end m-0 ps-0 pe-0">
                    <li class="breadcrumb-item"><a href="">Dashboard</a></li>
                    <li class="breadcrumb-item active">Deals Dashboard</li>
                </ul>
            </div>
        </div>
        

    <h1>Import Leads</h1>

        <p>
        Pour importer des leads dans notre application, veuillez suivre les étapes suivantes. Préparez un fichier de type <strong>CSV (Comma-Separated Values)</strong> contenant les informations de vos leads. Ce fichier doit inclure les colonnes suivantes :
    </p>
    <ul>
        <li><strong>Nom</strong> - Le nom de famille du lead.</li>
        <li><strong>Prénom</strong> - Le prénom du lead.</li>
        <li><strong>Email</strong> - L'adresse email du lead.</li>
        <li><strong>Code postal</strong> - Le code postal du lead.</li>
        <li><strong>Date d'importation</strong> - La date et l'heure d'importation du lead, formatée en AAAA-MM-JJ HH:MM:SS (année-mois-jour heure:minute:seconde).</li>
        <li><strong>Numéro de téléphone</strong> - Le numéro de téléphone du lead.</li>

        </ul>
    <p>
        Une fois votre fichier CSV prêt, utilisez le formulaire ci-dessous pour l'importer. Cliquez sur le bouton "Choisir un fichier" pour sélectionner votre fichier CSV depuis votre ordinateur, puis cliquez sur le bouton "Upload" pour lancer l'importation.
    </p>
    <p>
        Notre système lira le fichier, vérifiera que toutes les colonnes nécessaires sont présentes et correctement formatées, puis ajoutera les informations des leads à notre base de données. Vous recevrez une notification une fois l'importation terminée, vous informant du succès de l'opération ou des éventuelles erreurs rencontrées.
    </p>

    {{ form_start(importLeadsForm) }}
        {{ form_row(importLeadsForm.file) }}
        <button type="submit" class="btn btn-primary">Upload</button>
    {{ form_end(importLeadsForm) }}
{% endblock %}