@extends('layouts.main.main')

@section('content')
<div class="row">
    <div class="col-sm-6 col-md-5 position-relative">
        <form id="addressbook_form">
            @csrf
            <div class="input-group">
                <input type="text" autocomplete="off" name="search" id="search" class="form-control" placeholder="Recherche" aria-label="Recherche..." aria-describedby="search-input">
                
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search"></i></button>
                </div>
            </div>
            
            <div class="m-t-5">
                <div class="form-check form-check-inline">
                    <input name="intermittents" class="form-check-input kind-of-contact" type="checkbox" id="scb1" value="1" checked>
                    <label class="form-check-label" for="scb1">Intermittents</label>
                </div>
                <div class="form-check form-check-inline">
                    <input name="other" class="form-check-input kind-of-contact" type="checkbox" id="scb2" value="1" checked>
                    <label class="form-check-label" for="scb2">Autres contacts</label>
                </div>
                <div class="form-check form-check-inline">
                    <input name="archived" class="form-check-input kind-of-contact" type="checkbox" id="scb3" value="1">
                    <label class="form-check-label" for="scb3">Y compris archivés</label>
                </div>
            </div>
        </form>
        
        <div>
            <div id="counter" class="text-muted">Aucun résultat</div>
            <div class="list-group m-t-10" style="max-height:500px;overflow:scroll;" id="results">
                <a href="javascript:void(0)" class="list-group-item list-group-item-action">Utilisez le formulaire de recherche ci-dessus.<br>La recherche s'effectue sur les prénoms et noms pour les intermittents, plus les noms de sociétés (pour les contacts clients, fournisseurs et lieux).</a>
            </div>
        </div>
        <div id="details-sm-container" class="fixed-top bg-white p-3 w-100 h-100 d-none">
            <div class="clearfix m-1 vertical-align">
                <button id="details-sm-closer" type="button" class="close" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4>
                    Fiche contact
                </h4>
            </div>
            <div id="details-sm">
                
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-md-7 d-none d-sm-block" id="details">
        Résultats
    </div>
</div>

@endsection