@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>

<div style="margin-bottom: 10px;" class="row">
    <div class="col-lg-12">
        <a class="btn btn-success" type="button" data-bs-toggle="modal" data-bs-target="#nouveau-client">
            Nouveau Client
        </a>
    </div>
</div>


<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" />
    <div class="card-header">
        La liste des contacts
    </div>
    <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">Nom Complet</th>
                                <th scope="col">Téléphone</th>
                                <th scope="col">Adresse</th>
                                <th scope="col">Type</th>
                                <th scope="col">Status prospection</th>
                                <th scope="col" style="width: 200px;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($clients as $c)
                                <tr>
                                    <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', $c->rowid) }}" class="text-body">{{ $c->nom ?? '' }}</a>
                                    </td>
                                    <td><span class="badge bg-primary mb-0">{{ $c->phone ?? '' }} </span></td>
                                    <td>{{ $c->address ?? '' }}</td>
                                    <td>
                                        @if($c->client == 1)
                                            <span class="badge bg-success"> 
                                                Client
                                            </span> 
                                        @elseif($c->client == 2)
                                            <span class="badge bg-danger"> 
                                                Prospect
                                            </span> 
                                        @endif 
                                    </td>
                                    <td>
                                        @if($c->fk_statut_prospection == NULL || $c->fk_statut_prospection == 0)
                                            <span class="badge bg-danger"> 
                                                jamais contacté
                                            </span> 
                                        @elseif($c->fk_statut_prospection == 1)
                                            <span class="badge bg-info"> 
                                                A contacté
                                            </span> 
                                        @elseif($c->fk_statut_prospection == 2)
                                            <span class="badge bg-warning"> 
                                                En cours contacté
                                            </span> 
                                        @elseif($c->fk_statut_prospection == 3)
                                            <span class="badge bg-primary"> 
                                                contacté
                                            </span> 
                                        @elseif($c->fk_statut_prospection == 4)
                                            <span class="badge bg-danger">
                                                Pas intéressé
                                            </span>
                                        @elseif($c->fk_statut_prospection == 5)
                                            <span class="badge bg-success">
                                                Intéressé
                                            </span>
                                        @endif 
                                    </td>
                                    <td>
                                        <ul class="list-inline mb-0">
                                            <li class="list-inline-item">
                                                <a class="btn btn-xs btn-info mdi mdi-pencil" href="{{ route('admin.clients.edit', $c->rowid) }}"></a>
                                            </li>
                                            <li class="list-inline-item">
                                                <form action="{{ route('admin.clients.destroy', $c->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" href="#" 
                                                        type="button" 
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#affecter-commerciale"
                                                        onclick="affecterCommerciale(event.target)" 
                                                        data-client_id_val="{{ $c->rowid }}"
                                                    >Affecter à un commerciale </a>

                                                    <a class="dropdown-item" href="#"
                                                        type="button" 
                                                        data-bs-toggle="modal"
                                                        data-bs-target="#creer-commande"
                                                        onclick="creerCommande(event.target)" 
                                                        data-client_id_val_2="{{ $c->rowid }}"
                                                    >créer une commande</a>
                                                    <a class="dropdown-item bg-info text-white" href="{{ route('admin.grc.classer_a_contacter', $c->rowid) }}">A contacter</a>
                                                    <a class="dropdown-item bg-warning" href="{{ route('admin.grc.contact_encours', $c->rowid) }}">Contact en cours</a>
                                                    <a class="dropdown-item bg-success" href="{{ route('admin.grc.contacte', $c->rowid) }}">Contacté</a>
                                                    <a class="dropdown-item bg-danger text-white" href="{{ route('admin.grc.interesse', $c->rowid) }}">Pas intéressé</a>
                                                    <a class="dropdown-item bg-success text-white" href="{{ route('admin.grc.pas_interesse', $c->rowid) }}">Intéressé</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-0 align-items-center pb-4">
     
    </div>
    @include('admin.grc.modal.affecter-commerciale')
    @include('admin.grc.modal.nouveau-client')
  
    @include('admin.grc.modal.creer-commande')
   

    <script> 
        function affecterCommerciale(e){
            $('#client_id').val($(e).data("client_id_val"));
        }

        function creerCommande(e){
            $('#client_id_2').val($(e).data("client_id_val_2"));
        }
    </script> 
<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