@extends('layouts.app')

@push('css')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="{{ asset('assets/plugins/datatables/datatable.min.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            padding-top: 4px;
            padding-bottom: 4px;
            height: 37px;
        }
    </style>
@endpush
@push('js')
    <script src="{{ asset('assets/plugins/datatables/datatable.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script>

        var card = function () {
            console.log('Modal...');
            $('#modalCard').modal();
        }

        $(document).ready(function() {
            $('table').DataTable();
            $('select').select2();
            $(".datepicker").daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxYear: parseInt(moment().format('YYYY'),10),
                locale: {
                    format: 'D-M-Y'
                }
            });
        });

    </script>
@endpush
@section('content')
        <div class="form-row">
            <div class="col-lg-2">
                <a href="{{ route('partners') }}" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.nombre-de-partenaire') }}</div>
                    <div class="card-body">
                        3
                    </div>
                </a>
            </div>
        </div>
        <hr>
        <div class="form-row">
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.nombre-de-numero') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.formulaire-enregistre') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.formulaire-valide') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.pass-delivre') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.affichage-erreur-03') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
            <div class="col-lg-2">
                <a href="#!" onclick="card()" style="display: block;text-decoration: none;color: black" class="card">
                    <div class="card-header">{{ __('dashboard.pourcentage-reussite') }}</div>
                    <div class="card-body">
                        10
                    </div>
                </a>
            </div>
        </div>
        <hr>
        <div class="form-row mt-3">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">Courbe</div>
                    <div class="card-body">
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <div id="modalCard" class="modal fade">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <span class="h5">Nombre des numéros de téléphone sauvegardés</span>                        
                    </div>
                    <div class="modal-body">
                        <div class="card p-3 mb-4">
                                <div class="form-row mb-2">
                                    <div class="col-lg-3">
                                        <input type="text" class="form-control" placeholder="Contact">
                                    </div>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control" placeholder="Pass">
                                    </div>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control datepicker" placeholder="Enregistré">
                                    </div>
                                    <div class="col-lg-2">
                                        <input type="text" class="form-control datepicker" placeholder="Enregistré">
                                    </div>
                                    <div class="col-lg-3">
                                        <select class="form-control select2" style="width: 100%">
                                            <option value="">Choisir ...</option>
                                            <option value="abouti">Abouti</option>
                                            <option value="non-abouti">Non abouti</option>
                                        </select>
                                    </div>
                                </div>
                                <hr>
                                <div class="form-row">
                                    <div class="col-lg-12">
                                        <button class="btn btn-sm btn-primary">Exporter les contacts</button>
                                    </div>
                                </div>
                        </div>
                        <div class="card p-2">
                            <div class="form-row">
                                <div class="col-lg-12">
                                    <table id="datatable" class="display" style="width:100%">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Contacts</th>
                                                <th>Trânche d'âge</th>
                                                <th>Pass</th>
                                                <th>Enregistré le</th>
                                                <th>Status</th>
                                                <th>Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td><a href="tel:2250788672900">+2250788672900</a></td>
                                                <td>10 à 20 ans</td>
                                                <td><button class="btn btn-sm btn-secondary">FF052</button></td>
                                                <td>10-12-2022 10:12</td>
                                                <td>
                                                    <span class="badge badge-success">Abouti</span>
                                                </td>
                                                <td>
                                                    <button class="btn btn-sm btn-primary">Voir</button>
                                                    <button class="btn btn-sm btn-danger">Supprimer</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td><a href="tel:2250755996644">+2250755996644</a></td>
                                                <td>10 à 20 ans</td>
                                                <td><button class="btn btn-sm btn-secondary">FF056</button></td>
                                                <td>10-12-2022 10:12</td>
                                                <td>
                                                    <span class="badge badge-danger">Non abouti</span>
                                                </td>
                                                <td>
                                                    <button class="btn btn-sm btn-primary">Voir</button>
                                                    <button class="btn btn-sm btn-danger">Supprimer</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-danger" data-dismiss="modal">Fermer</button>
                        <button class="btn btn-sm btn-success">Sauvegarder</button>
                    </div>
                </div>
            </div>
        </div>
@endsection