@extends('layouts.header-Admin')
@section('detail')
<style>
    .dtHorizontalVerticalExampleWrapper {
  max-width: 600px;
  margin: 0 auto;
}
#dtHorizontalVerticalExample th, td {
  white-space: nowrap;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
}
</style>
    <div class="pagetitle">
        <div class="row">
            <h1 class="col">Les Détails</h1>
            <h1 class="col-10 text-end">
                <a href="{{ route('admin.index') }}">
                    <button type="button" class="btn btn-success">Retour</button>
                </a> 
            </h1>
        </div>

        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Tableau</a></li>
                <li class="breadcrumb-item">détails</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body mt-5">
                        <table id="dtHorizontalVerticalExample" class="table table-striped table-bordered table-sm "
                            cellspacing="0" width="100%">
                             <thead>
                                <tr>
                                    <th>Date Naissance</th>
                                    <th>Lieu de Naissance</th>
                                    <th>Courleur des Yeux</th>
                                    <th>Groupe sangin</th>
                                    <th>Photo</th>
                                    <th>Email</th>
                                    <th>Téléphone</th>
                                    <th>Signature</th>
                                    <th>Signe particulier</th>
                                    <th>Corps</th>
                                    <th>Grade</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{ $admin->dateNaissance }}</td>
                                    <td>{{ $admin->VilleNaissance }}</td>
                                    <td>{{ $admin->couleurYeux }}</td>
                                    <td>{{ $admin->groupeSanguin }}</td>
                                    <td><img alt="img" src="{{ asset('img/' . $admin->photo) }}" width="100%" height="100px" ></td>
                                    <td>{{ $admin->email }}</td>
                                    <td>{{ $admin->telephone }}</td>
                                    <td><img alt="img" src="{{ asset('signatures/' . $admin->signature) }}"
                                            width="100%" height="100px"></td>
                                    <td>{{ $admin->signePart }}</td>
                                    <td>{{ $admin->corps }}</td>
                                    <td>{{ $admin->grade }}</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <script>
        $(document).ready(function() {
            $('#dtHorizontalVerticalExample').DataTable({
                "scrollX": true,
                "scrollY": 200,
            });
            $('.dataTables_length').addClass('bs-select');
        });
    </script>
@endsection