@extends('layouts.master')

@section('content')
            <!-- begin app-header -->
            <header class="app-header top-bar"><meta http-equiv="Content-Type" content="text/html; charset=gb18030">
                <!-- begin navbar -->
                
                    @include('layouts.nav')
                    
                <!-- end navbar -->
            </header>
            <!-- end app-header -->
            <!-- begin app-container -->
            <div class="app-container">
                <!-- begin app-nabar -->
                <aside class="app-navbar">
                    <!-- begin sidebar-nav -->
                    @include('layouts.sidebar')
                    <!-- end sidebar-nav -->
                </aside>
                <!-- end app-navbar -->
                <!-- begin app-main -->
                <div class="app-main" id="main">
                    <!-- begin container-fluid -->
                    <div class="container-fluid">
                        <!-- begin row -->
                        <div class="row">
                            <div class="col-md-12 m-b-30">
                                <!-- begin page title -->
                                <div class="d-block d-sm-flex flex-nowrap align-items-center">
                                    <div class="page-title mb-2 mb-sm-0">
                                        <h1>Liste Clients</h1>
                                    </div>
                                    <div class="ml-auto d-flex align-items-center">
                                        <nav>
                                            <ol class="breadcrumb p-0 m-b-0">
                                                <li class="breadcrumb-item">
                                                    <a href="#"><i class="ti ti-home"></i></a>
                                                </li>
                                                <li class="breadcrumb-item">
                                                    Client
                                                </li>
                                                <li class="breadcrumb-item active text-primary" aria-current="page">Liste clients</li>
                                            </ol>
                                        </nav>
                                    </div>
                                </div>
                                <!-- end page title -->
                            </div>
                        </div>
                        <!-- end row -->
                        <!-- begin row -->
                        <div class="row">
                                <div class="col-lg-12">
                                    <div class="card card-statistics">
                                        <div class="card-body">
                                            <div class="export-table-wrapper table-responsive">
                                                <table id="export-table-" class="table table-bordered" tableexport-key="export-table-">
                                                    <caption class="btn-toolbar tableexport-caption" style="caption-side: top;">

                                                        <div class="row">
                                                            <div class="col-md-6">

                                                                @if (session('status'))
                                                                    <div class="alert alert-outline-success" role="alert">
                                                                        {{ session('status') }}
                                                                    </div>
                                                                @endif
                                                                
                                                            </div>
                                                            <div class="col-md-6">
                                                                <button type="button" class="btn btn-success float-right" style="margin-right: 0px;"
                                                                data-toggle="modal" data-target="#largeModal"> 
                                                                <i class="nav-icon fa fa-edit"></i> Nouveau client</button>

                                                            </div>
                                                        </div>

                                                        

                                                    </caption>
                                                    <thead class="thead-light">
                                                        <tr>
                                                            <th>Logo</th>
                                                            <th>Company</th>
                                                            <th>Responsable</th>
                                                            <th>Contact</th>
                                                            <th>Telephone</th>
                                                            <th>Actions</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach($clients as $client)
                                                        <tr>
                                                            <td>
                                                                <img src="../public{{$client->image}}" class="rounded" height="60" >
                                                            </td>
                                                            <td>{{$client->company}}</td>
                                                            <td>{{$client->responsable}}</td>
                                                            <td>
                                                                <p><i class="fa fa-circle-o" style="font-size: 10px;color:#f7b630;"></i> Tél: {{$client->tel}}</p>
                                                            </td>
                                                            <td>{{$client->telContact}}</td>
                                                            <td>
                                                                <div class="text-center" style="font-size: 18px;">

                                                                    <div class="dropdown">
                                                                        <button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                                            Dropdown
                                                                        </button>
                                                                        <div class="dropdown-menu" aria-labelledby="dropdownMenu2" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">
                                                                            <button class="dropdown-item" type="button">Modifier</button>
                                                                            <button class="dropdown-item" data-toggle="modal" data-target="#defaultModal">Supprimer</button>
                                                                            <a href="{{ url('ListRepertory/'.$client->id) }}" class="dropdown-item" type="button">Calendrier</a>
                                                                            <a href="{{ url('Teste/'.$client->id) }}" class="dropdown-item" type="button">Teste</a>
                                                                        </div>
                                                                    </div>

                                                                </div>
                                                            </td>
                                                        </tr>
<!-- Modal delet -->

      
      <script>
      $('#delete').on('show.bs.model', function (event){
        var button = $(event.relatedTarget)
        var vehicule_id = button.data('data-id')
        var modal = $(this)
      
        modal.find('.modal-body #vehicule_id').val(vehicule_id);
      })
      </script>




<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirmation de suppression</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        Êtes-vous sûr?
                </div>
                <div class="modal-footer">

                        <form action="{{ route('Clients.destroy',$client->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <input type="hidden" name="vehicule" id="vehicule_id" value="">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">No, Fermer</button>
                            <button type="submit" class="btn btn-dark">Oui, Supprimer</button>
                        </form>

                </div>
            </div>
        </div>
    </div>

<!-- Modal delet End-->      
                                                        @endforeach

                                                    </tbody>
                                                   
                                                </table>
                                                {{ $clients->links() }} 
                                                <!-- Modal -->
                                                <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true" style="display: none;">
                                                        <div class="modal-dialog modal-lg" role="document">
                                                            <div class="modal-content">
                                                                <div class="modal-header">
                                                                    <h2 class="modal-title">Nouveau client</h2>
                                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                                        <span aria-hidden="true">×</span>
                                                                    </button>
                                                                </div>
                                                                
                                                                @include('clients.ajoutModal')
                                                                
                                                            </div>
                                                        </div>
                                                </div>
                                                <!-- Modal end -->

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!-- end row -->
                </div>
                    <!-- end container-fluid -->
            </div>
                <!-- end app-main -->
        </div>
            <!-- end app-container -->
@endsection