@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'clients'
])

@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="pe-7s-users icon-gradient bg-mean-fruit"></i>
                </div>
                <div>
                    Liste des clients
                    <div class="page-title-subheading">

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Nom</label>

            <input name="name" id="name_filter" placeholder="Filtrer par nom" data-column="client_title" type="text"
                   class="form-control input_filter">

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Résultats/page</label>

            <select id="change_length" class="form-control filter_type_client select_filter">
                <option value="10">10</option>
                <option value="25" selected="">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="-1">Tout</option>

            </select>

        </div>
        <div class="mb-2 mb-sm-0 col-12 col-md-3">
            <div id="cancel_filters">

                <i class="fa fa-filter"></i>

                <span class="infobulle">Réinitialisez les filtres</span>

            </div>
        </div>
        <div class="row row_initial">
            <div class="change_initial" data-id="0">1-9</div>
            <div class="change_initial" data-id="A">&nbsp;A&nbsp;</div>
            <div class="change_initial" data-id="B">&nbsp;B&nbsp;</div>
            <div class="change_initial" data-id="C">&nbsp;C&nbsp;</div>
            <div class="change_initial" data-id="D">&nbsp;D&nbsp;</div>
            <div class="change_initial" data-id="E">&nbsp;E&nbsp;</div>
            <div class="change_initial" data-id="F">&nbsp;F&nbsp;</div>
            <div class="change_initial" data-id="G">&nbsp;G&nbsp;</div>
            <div class="change_initial" data-id="H">&nbsp;H&nbsp;</div>
            <div class="change_initial" data-id="I">&nbsp;I&nbsp;</div>
            <div class="change_initial" data-id="J">&nbsp;J&nbsp;</div>
            <div class="change_initial" data-id="K">&nbsp;K&nbsp;</div>
            <div class="change_initial" data-id="L">&nbsp;L&nbsp;</div>
            <div class="change_initial" data-id="M">&nbsp;M&nbsp;</div>
            <div class="change_initial" data-id="N">&nbsp;N&nbsp;</div>
            <div class="change_initial" data-id="O">&nbsp;O&nbsp;</div>
            <div class="change_initial" data-id="P">&nbsp;P&nbsp;</div>
            <div class="change_initial" data-id="Q">&nbsp;Q&nbsp;</div>
            <div class="change_initial" data-id="R">&nbsp;R&nbsp;</div>
            <div class="change_initial" data-id="S">&nbsp;S&nbsp;</div>
            <div class="change_initial" data-id="T">&nbsp;T&nbsp;</div>
            <div class="change_initial" data-id="U">&nbsp;U&nbsp;</div>
            <div class="change_initial" data-id="V">&nbsp;V&nbsp;</div>
            <div class="change_initial" data-id="W">&nbsp;W&nbsp;</div>
            <div class="change_initial" data-id="X">&nbsp;X&nbsp;</div>
            <div class="change_initial" data-id="Y">&nbsp;Y&nbsp;</div>
            <div class="change_initial" data-id="Z">&nbsp;Z&nbsp;</div>
        </div>
    </div>

    <div class="outside_buttons">

    </div>
    <div class="row">
        <div class="col-md-12 col-xl-12">
            <div class="col-md-12">
                <div class="main-card mb-3 card">
                    <div class="table-responsive">
                        <table id="liste_clients"
                               class="align-middle mb-0 table table-borderless table-striped table-hover datatable dataTable no-footer"
                               role="grid" style="width: 1044px;">
                            <thead>
                            <tr role="row">
                                <th>
                                    Nom
                                </th>
                                <th>
                                    Adresse
                                </th>
                                <th>
                                    Téléphone
                                </th>
                                <th>Siren</th>
                                <th>Nombres de rapports</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($clients as $index => $client )
                                <tr role="row">
                                    <td>
                                        <a href="{{ route('clients.show', $client->client_id) }}">{{ $client->client_title }}</a>
                                    </td>
                                    <td>
                                        <a href="{{ route('clients.show', $client->client_id) }}">{{ $client->adresse }}
                                            <br>{{ $client->cp }} {{ $client->ville }}</a></td>
                                    <td>{{ $client->telephone }}</td>
                                    <td>{{ $client->siren }}</td>
                                    <td>{{ $client->rapports_count }}</td>
                                    <td>
                                        <a class="btn btn-primary"
                                           href="{{ route('clients.show', $client->client_id) }}"><i
                                                class="fa fa-eye"></i></a>
                                    </td>
                                </tr>
                            @endforeach

                            <div class="clear"></div>
                            </tbody>
                        </table>
                        <div id="top"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('js/datatables.js') }}"></script>
    <script src="{{ asset('js/liste_client.js') }}" defer></script>
@endsection