@extends('layouts.contributor')
@php $page_title = 'Tableau de bord contributeur'; @endphp
@section('meta-title', 'Espace contributeur - Architectes')
@section('meta-keywords', '')
@section('meta-description', '')
@section('style')
    <style>
        td {
            vertical-align: middle !important;
        }

        td a {
            color: #047bf8;
            text-decoration: none;
            background-color: transparent;
            -webkit-text-decoration-skip: objects;
        }

        td a:hover {
            color: #0356ad;
            text-decoration: underline;
        }

        tr {
            font-size: 13px;
        }

        .table-responsive {
            padding: 10px;
        }

        .table-responsive label {
            font-size: 13px;
            line-height: 22px;
        }

        .bold {
            font-weight: bold;
        }

        .btn-success {
            color: #fff;
            background-color: #24b314;
            border-color: #24b314;
        }

        .btn-success:hover {
            color: #fff;
            background-color: #1d9110;
            border-color: #1b850f;
        }

        .btn-success:focus,
        .btn-success.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
        }

        .btn-success.disabled,
        .btn-success:disabled {
            color: #fff;
            background-color: #24b314;
            border-color: #24b314;
        }

        .btn-success:not(:disabled):not(.disabled):active,
        .btn-success:not(:disabled):not(.disabled).active,
        .show>.btn-success.dropdown-toggle {
            color: #fff;
            background-color: #1b850f;
            border-color: #187a0e;
        }

        .btn-success:not(:disabled):not(.disabled):active:focus,
        .btn-success:not(:disabled):not(.disabled).active:focus,
        .show>.btn-success.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(36, 179, 20, 0.5);
        }

        .btn-primary,
        .all-wrapper .fc-button.fc-state-active {
            color: #fff;
            background-color: #047bf8;
            border-color: #047bf8;
        }

        .btn-primary:hover,
        .all-wrapper .fc-button.fc-state-active:hover {
            color: #fff;
            background-color: #0368d2;
            border-color: #0362c6;
        }

        .btn-primary:focus,
        .all-wrapper .fc-button.fc-state-active:focus,
        .btn-primary.focus,
        .all-wrapper .focus.fc-button.fc-state-active {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(4, 123, 248, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(4, 123, 248, 0.5);
        }

        .btn-primary.disabled,
        .all-wrapper .disabled.fc-button.fc-state-active,
        .btn-primary:disabled,
        .all-wrapper .fc-button.fc-state-active:disabled {
            color: #fff;
            background-color: #047bf8;
            border-color: #047bf8;
        }

        .btn-primary:not(:disabled):not(.disabled):active,
        .all-wrapper .fc-button.fc-state-active:not(:disabled):not(.disabled):active,
        .btn-primary:not(:disabled):not(.disabled).active,
        .all-wrapper .fc-button.fc-state-active:not(:disabled):not(.disabled).active,
        .show>.btn-primary.dropdown-toggle,
        .all-wrapper .show>.dropdown-toggle.fc-button.fc-state-active {
            color: #fff;
            background-color: #0362c6;
            border-color: #035cb9;
        }

        .btn-primary:not(:disabled):not(.disabled):active:focus,
        .all-wrapper .fc-button.fc-state-active:not(:disabled):not(.disabled):active:focus,
        .btn-primary:not(:disabled):not(.disabled).active:focus,
        .all-wrapper .fc-button.fc-state-active:not(:disabled):not(.disabled).active:focus,
        .show>.btn-primary.dropdown-toggle:focus,
        .all-wrapper .show>.dropdown-toggle.fc-button.fc-state-active:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(4, 123, 248, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(4, 123, 248, 0.5);
        }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="content-i w-100">
            <div class="content-box">
                <div class="element-wrapper">
                    <div class="element-box">
                        <h5 class="form-header poppins bold" style="margin: 0px">
                            Liste des architectes
                        </h5>
                        <div class="table-responsive">
                            <table id="dataTable1" class="table table-striped table-lightfont poppins">
                                <thead>
                                    <tr>
                                        <th>Photo</th>
                                        <th>Prénom Nom</th>
                                        <th>Email</th>
                                        <th>Type</th>
                                        <th>Statut</th>
                                        <th>Disponibilité</th>
                                        <th width="200">Dernière connexion</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($designer as $user)
                                        <tr class="ver_mid_table">
                                            <td>
                                                <span style="font-size: 0;">{{ $user->last_connected_at_formated }}</span>
                                                <img src="{{ asset($user->photo ?? $user->picture) }}" width="50"
                                                    height="50" style="border-radius: 50%; object-fit: cover">
                                            </td>
                                            <td>
                                                <a href="{{ route('contributor.designers.details_projets', $user->id) }}">
                                                    {{ $user->prenom }} {{ $user->nom }}
                                                </a>
                                            </td>
                                            <td>{{ $user->email }}</td>
                                            <td>{{ $user->profile->type ?? '' }}</td>
                                            @if ($user->profile)
                                                <td>
                                                    <span
                                                        class="{{ ($user->profile->draft->status ?? $user->profile->status) == 'Publié' ? 'text-success' : '' }}">
                                                        {{ $user->profile->draft->status ?? $user->profile->status }}
                                                    </span>
                                                </td>
                                                <td>{{ $user->profile->disponible ? 'Disponible' : 'Indisponible' }}</td>
                                            @else
                                                <td></td>
                                                <td></td>
                                            @endif
                                            <td>{{ $user->last_connected_at_formated }}</td>
                                            <td>
                                                <a href="{{ route('login_as', $user->id) }}"
                                                    class="btn m-0 btn-sm btn-white"><i class="fa fa-sign-in"></i></a>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
    {{-- <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" /> --}}
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#dataTable1').DataTable({
                "order": [
                    [1, "desc"]
                ],
                language: {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ &eacute;l&eacute;ments",
                    "sInfo": "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                    "sInfoEmpty": "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                    "sInfoFiltered": "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun &eacute;l&eacute;ment &agrave; afficher",
                    "sEmptyTable": "Aucune donn&eacute;e disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Pr&eacute;c&eacute;dent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre d&eacute;croissant"
                    },
                    "select": {
                        "rows": {
                            _: "%d lignes séléctionnées",
                            0: "Aucune ligne séléctionnée",
                            1: "1 ligne séléctionnée"
                        }
                    }
                }
            });
        });
    </script>
@endsection