@extends('clients.layout.base')

@section('style')
    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.css" />
    {{-- <link rel="stylesheet" type="text/css" href="Editor-2.0.10/css/editor.dataTables.css"> --}}
    {{-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
        integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> --}}

    <style>
        .badge-warning {
            background-color: #ffcc00;
            color: white;
            padding: 4px 8px;
            text-align: center;
            border-radius: 5px;
            font-weight: 500;
        }

        .badge-danger {
            background-color: #cc3300;
            color: white;
            padding: 4px 8px;
            text-align: center;
            border-radius: 5px;
            font-weight: 500;
            font-size: 15px;
            padding: 5px;
            margin: 5px;
        }

        .badge-success {
            background-color: #339900;
            color: white;
            padding: 4px 8px;
            text-align: center;
            border-radius: 5px;
            font-weight: 500;
        }

        .badge-info {
            background-color: #93C8FF;
            color: white;
            padding: 4px 8px;
            text-align: center;
            border-radius: 5px;
            font-weight: 500;
            margin: 5px;
        }
    </style>
@endsection
@section('contenu')

    <div class="dashboard-content-container" data-simplebar>
        <div class="dashboard-content-inner">

            <!-- Dashboard Headline -->
            {{-- <div class="dashboard-headline">
            <h3>Howdy, Tom!</h3>
            <span>We are glad to see you again!</span>

            <!-- Breadcrumbs -->
            <nav id="breadcrumbs" class="dark">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li>Dashboard</li>
                </ul>
            </nav>
        </div> --}}

            <table class="table table-striped" id="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Jour </th>
                        <th scope="col">Ouverture </th>
                        <th scope="col">Fermeture</th>
                        <th scope="col">Actions </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($horaires as $key => $horaire)
                        <tr>
                            <th scope="row">{{ $key + 1 }}</th>
                            <td>{{ $horaire->jours }}</td>
                            <td>{{ $horaire->ouverture }}</td>
                            <td>{{ $horaire->fermeture }}</td>
                            <td>
                                {{-- <a href="#" class="btn btn-danger badge-danger"><i class="icon-feather-edit-3"></i>
                                </a> --}}
                                <a href="#" class="btn btn-danger badge-danger"><i class="icon-feather-trash-2"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach

                </tbody>
            </table>




            @include('clients.layout.footer')

        </div>
    </div>


@section('script')
    <script type="text/javascript"
        src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.12.1/b-2.2.3/sl-1.4.0/datatables.min.js"></script>
    {{-- <script type="text/javascript" src="Editor-2.0.10/js/dataTables.editor.js"></script> --}}
    <script>
        $(document).ready(function() {
            $('#table').DataTable({
                "language": {
                    "url": "https://cdn.datatables.net/plug-ins/1.12.1/i18n/fr-FR.json"
                }
            });
        });
    </script>
@endsection
@endsection