@extends('user.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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        #social-links ul li {
            display: inline-block;
            border-radius: 20px;
        }

        #social-links ul li a {
            padding: 15px;
            margin: 15px;
            font-size: 20px;
            color: #333333;
            background-color: #7b920a;
            border-radius: 7px;

        }

        .archiver {
            padding: 20px;
            margin: 20px;
            /* background-color: #e0e0e0 */
        }
    </style>
@endsection


@section('contenu')
    <div class="dashboard-content-container" data-simplebar>
        <div class="dashboard-content-inner">

            <!-- Dashboard Headline -->
            <div class="dashboard-headline">
                <h3>{{ Str::upper(Auth::user()->name) }}, {{ Auth::user()->firstname }}!</h3>
                <span>{{ Auth::user()->ville }}!</span>
                <!-- Breadcrumbs -->
                <nav id="breadcrumbs" class="dark">
                    <ul>
                        <li><a href="#">Accueil</a></li>
                        <li>Alerte</li>
                    </ul>
                </nav>
            </div>
            @include('clients.layout.message')

            <table class="table table-striped" id="table">
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Type d'alerte </th>
                        <th scope="col">Alerte </th>
                        <th scope="col">Date d'émission </th>
                </thead>
                <tbody>
              
                        
                  
                        
                    @forelse($alerts as $key => $alert)
                        <tr>
                            <th scope="row">{{ $key + 1 }}</th>
                            {{-- <td>
                                <a href="{{ asset($alert->picture_file) }}" target="_blanc">
                                    <img src="{{ asset($alert->picture_file) }}" alt="" width="80"
                                        height="80">
                                </a>
                            </td> --}}
                            <td>{{ $alert->title }}</td>
                            <td>{{ $alert->message }}</td>
                            <td>{{ \Carbon\Carbon::parse($alert->date_debut)->isoFormat('MMM Do YYYY') }}</td>
                            {{-- <td>{{ \Carbon\Carbon::parse($alert->date_debut)->isoFormat('MMM Do YYYY') }}</td>
                            <td>{{ \Carbon\Carbon::parse($alert->date_fin)->isoFormat('MMM Do YYYY') }}</td>
                            <td>
                                <div class="note-buttons">
                                    <a href="#"
                                        data-tippy-placement="top" data-tippy="" data-original-title="Archiver"
                                        class="archiver">
                                        <i class="icon-material-outline-archive icon"></i>
                                    </a>
                                    <a href="{{ asset($alert->pdf_file) }}" data-tippy-placement="top"
                                        data-tippy=""data-original-title="Favoris" id="partager"
                                        download="{{ $alert->title_document }}"
                                        data-link="#">
                                        <i class="icon-feather-download"></i>
                                    </a>
                                </div>

                            </td> --}}
                        </tr>
                        @empty
                        <tr>
                            <td>
                                Aucune alerte ...!!!
                            </td>
                        </tr>
                    @endforelse 

                </tbody>
            </table>




            @include('clients.layout.footer')

        </div>
    </div>



@section('script')
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
    <script src="{{ asset('js/share.js') }}"></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 src="https://cdn.datatables.net/1.13.1/js/dataTables.bootstrap4.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>


    <script>
        $(document).ready(function() {
            $("#partager").click(function() {
                // var url = $(this).attr('href');
                var url = $(this).data('link')
                // alert(url)
                $.ajax({
                    url: url,
                    methode: "GET",
                }).done(function(data) {
                    location.reload();
                })
            })
        })
    </script>
@endsection
@endsection