@extends('layouts.admin')
@section('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/boxicons/2.1.0/css/boxicons.min.css" integrity="sha512-pVCM5+SN2+qwj36KonHToF2p1oIvoU3bsqxphdOIWMYmgr4ZqD3t5DjKvvetKhXGc/ZG5REYTT6ltKfExEei/Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/5.3.45/css/materialdesignicons.css" integrity="sha256-NAxhqDvtY0l4xn+YVa6WjAcmd94NNfttjNsDmNatFVc=" crossorigin="anonymous" />

    <h2> La liste des Mises en Relation clientéle</h2>
 
    <div class="row">
        <div class="col-lg-12">
            <div class="">
                <div class="table-responsive">
                    <table id="scroll-horizontal-datatable" class="table w-100 nowrap project-list-table table-nowrap align-middle table-borderless">
                        <thead>
                            <tr>
                                <th scope="col">Date</th>
                                <th scope="col">Nom Complet</th>
                                <th scope="col">Téléphone</th>
                                <th scope="col">Adresse</th>
                                <th scope="col">Commerciale</th>
                                <th scope="col">Statut</th>
                                <th scope="col" style="width: 200px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($mers as $m)
                                <tr>
                                    <td>
                                        <span class="badge bg-primary mb-0">{{ Carbon\Carbon::parse($m->date)->format('d/m/Y') ?? '' }} </span>
                                    </td>
                                    <td>
                                        <div class="avatar-sm d-inline-block me-2">
                                            <div class="avatar-title bg-soft-primary rounded-circle text-primary"><i class="mdi mdi-account-circle m-0"></i></div>
                                        </div>
                                        <a href="{{ route('admin.clients.show', $m->client_id) }}" class="text-body">{{ $m->nom ?? '' }}</a>
                                    </td>
                                    <td><span class="badge bg-primary mb-0">{{ $m->phone ?? '' }} </span></td>
                                    <td>{{ $m->address ?? '' }}</td>
                                    <td>{{ $m->name .' '. $m->email  ?? '' }}</td>
                                    <td>
                                        @if($m->fk_statut == NULL || $m->fk_statut == 0)
                                            <span class="badge bg-danger">Non aboutit</span>
                                        @elseif($m->fk_statut == 1)
                                            <span class="badge bg-warning">En cours</span>
                                        @elseif($m->fk_statut == 2)
                                            <span class="badge bg-success">Aboutit</span>
                                    
                                        @endif 
                                    </td>
                                    <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a href="javascript:void(0);" data-bs-toggle="tooltip" data-bs-placement="top" title="Edit" class="px-2 text-primary"><i class="bx bx-pencil font-size-18"></i></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <form action="{{ route('admin.grc.destroy', $m->rowid) }}" method="POST" onsubmit="return confirm('Etes-vous sûr de vouloir le supprimer définitvement ?');" style="display: inline-block;">
                                                    <input type="hidden" name="_method" value="DELETE">
                                                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                    <button type="submit" class="btn btn-xs btn-danger">
                                                        <i class="mdi mdi-delete"> </i> 
                                                    </button> 
                                                </form>
                                            </li>
                                            <li class="list-inline-item dropdown">
                                                <a class="text-muted dropdown-toggle font-size-18 px-2" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true"><i class="bx bx-dots-vertical-rounded"></i></a>
                                                <div class="dropdown-menu dropdown-menu-end">
                                                  
                                                    <a class="dropdown-item bg-danger text-white" href="{{ route('admin.grc.mer_non_aboutit', $m->rowid) }}">Non aboutit</a>
                                                    <a class="dropdown-item bg-warning" href="{{ route('admin.grc.mer_encours', $m->rowid) }}">En cours</a>
                                                    <a class="dropdown-item bg-success" href="{{ route('admin.grc.mer_aboutit', $m->rowid) }}">Aboutit</a>
                                                   
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-0 align-items-center pb-4">
  
    </div>
<style>
    body{margin-top:20px;
background-color:#eee;
}
.project-list-table {
    border-collapse: separate;
    border-spacing: 0 12px
}

.project-list-table tr {
    background-color: #fff
}

.table-nowrap td, .table-nowrap th {
    white-space: nowrap;
}
.table-borderless>:not(caption)>*>* {
    border-bottom-width: 0;
}
.table>:not(caption)>*>* {
    padding: 0.75rem 0.75rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.avatar-sm {
    height: 2rem;
    width: 2rem;
}
.rounded-circle {
    border-radius: 50%!important;
}
.me-2 {
    margin-right: 0.5rem!important;
}
img, svg {
    vertical-align: middle;
}

a {
    color: #3b76e1;
    text-decoration: none;
}

.badge-soft-danger {
    color: #f56e6e !important;
    background-color: rgba(245,110,110,.1);
}
.badge-soft-success {
    color: #63ad6f !important;
    background-color: rgba(99,173,111,.1);
}

.badge-soft-primary {
    color: #3b76e1 !important;
    background-color: rgba(59,118,225,.1);
}

.badge-soft-info {
    color: #57c9eb !important;
    background-color: rgba(87,201,235,.1);
}

.avatar-title {
    align-items: center;
    background-color: #3b76e1;
    color: #fff;
    display: flex;
    font-weight: 500;
    height: 100%;
    justify-content: center;
    width: 100%;
}
.bg-soft-primary {
    background-color: rgba(59,118,225,.25)!important;
}
</style>
@endsection