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

        tr {
            font-size: 13px;
        }

        .table-responsive {
            padding: 10px;
        }

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

        .bold {
            font-weight: bold;
        }

        .btn {
            font-family: "Avenir Next W01", "Proxima Nova W01", "Rubik", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            font-weight: 400;
            outline: none;
            line-height: 1;
            display: inline-block;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            vertical-align: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            border: 2px solid transparent;
            padding: 0.375rem 0.75rem;
            font-size: 0.9rem;
            line-height: 1.5;
            border-radius: 4px;
            -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
        }

        .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);
        }

        .btn-danger {
            color: #fff;
            background-color: #e65252;
            border-color: #e65252;
        }

        .btn-danger:hover {
            color: #fff;
            background-color: #e13131;
            border-color: #e02525;
        }

        .btn-danger:focus,
        .btn-danger.focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
        }

        .btn-danger.disabled,
        .btn-danger:disabled {
            color: #fff;
            background-color: #e65252;
            border-color: #e65252;
        }

        .btn-danger:not(:disabled):not(.disabled):active,
        .btn-danger:not(:disabled):not(.disabled).active,
        .show>.btn-danger.dropdown-toggle {
            color: #fff;
            background-color: #e02525;
            border-color: #d91f1f;
        }

        .btn-danger:not(:disabled):not(.disabled):active:focus,
        .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show>.btn-danger.dropdown-toggle:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(230, 82, 82, 0.5);
        }

        .btn-white,
        .all-wrapper .fc-button {
            color: #292b2c;
            background-color: #fff;
            border-color: #fff;
        }

        .btn-white:hover,
        .all-wrapper .fc-button:hover {
            color: #292b2c;
            background-color: #ececec;
            border-color: #e6e5e5;
        }

        .btn-white:focus,
        .all-wrapper .fc-button:focus,
        .btn-white.focus,
        .all-wrapper .focus.fc-button {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

        .btn-white.disabled,
        .all-wrapper .disabled.fc-button,
        .btn-white:disabled,
        .all-wrapper .fc-button:disabled {
            color: #292b2c;
            background-color: #fff;
            border-color: #fff;
        }

        .btn-white:not(:disabled):not(.disabled):active,
        .all-wrapper .fc-button:not(:disabled):not(.disabled):active,
        .btn-white:not(:disabled):not(.disabled).active,
        .all-wrapper .fc-button:not(:disabled):not(.disabled).active,
        .show>.btn-white.dropdown-toggle,
        .all-wrapper .show>.dropdown-toggle.fc-button {
            color: #292b2c;
            background-color: #e6e5e5;
            border-color: #dfdfdf;
        }

        .btn-white:not(:disabled):not(.disabled):active:focus,
        .all-wrapper .fc-button:not(:disabled):not(.disabled):active:focus,
        .btn-white:not(:disabled):not(.disabled).active:focus,
        .all-wrapper .fc-button:not(:disabled):not(.disabled).active:focus,
        .show>.btn-white.dropdown-toggle:focus,
        .all-wrapper .show>.dropdown-toggle.fc-button:focus {
            -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 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: 0;">
                            Liste des feedbacks
                        </h5>
                        <div class="table-responsive">
                            <table id="dataTable1" class="table table-striped table-lightfont">
                                <thead>
                                    <tr>
                                        <th class="text-center" width="100">Id</th>
                                        <th class="text-center font-weight-bold" width="125">Auteur</th>
                                        <th class="text-center font-weight-bold" width="400">Commentaire</th>
                                        <th class="text-center font-weight-bold" width="100">Étoiles</th>
                                        <th class="text-center font-weight-bold" width="100">Realisaiton</th>
                                        <th class="text-center font-weight-bold" width="100">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($feedbacks as $f)
                                        <tr>
                                            <td class="text-center">
                                                {{ $f->id }}
                                            </td>
                                            <td class="text-center">
                                                {{ $f->client }}
                                            </td>
                                            <td class="text-center">
                                                <p>{!! $f->comment !!}
                                                </p>
                                            </td>
                                            <td class="text-center">
                                                {{ $f->smiley }}
                                            </td>
                                            <td class="text-center">
                                                @php
                                                    $id = \App\Models\Realisation::find($f->realisation_id)->projet_id;
                                                @endphp
                                                <a target="_blank"
                                                    href="{{ route('contributor.realisation.details', $id) }}"
                                                    class="btn m-0 btn-sm btn-white"><i class="fa fa-sign-in"></i></a>
                                            </td>
                                            <td class="text-center">
                                                <div>
                                                    <div style="" class="btn btn-sm btn-danger"
                                                        data-target="#feedback-delete{{ $f->id }}"
                                                        data-toggle="modal"><i class="fa fa-trash"></i></div>
                                                    @include('front.designer.partials.deleteFeedback', $f)
                                                </div>
                                            </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