@include('shared.header')
	<!-- Main content -->
	<div class="content-wrapper">
        <div class="page-header page-header-light">
            <div class="page-header-content header-elements-md-inline">
                <div class="page-title d-flex">
                    <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">Liste Des Produits</span></h4>
                    <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
                </div>
            </div>
        </div>
			<!-- Content area -->
			<div class="content">
				<!-- Whole row as a control -->
				{{-- <div class="card"> --}}

					<div class="card-body">
						<a href="{{ route('product.create') }}" class="btn btn-primary btn-sm pull-right">Ajouter un nouveaux produit</a>

                    </div>
					<table class="table datatable-responsive-row-control">
						<thead>
							<tr>
				                <th>#</th>
								<th>#</th>
								<th>Nom</th>
								<th>Créer le</th>
				                <th class="text-center">Actions</th>
				            </tr>
						</thead>
						<tbody>
						@foreach($products as $key => $c)
							<tr>
								<td>{{ ++$key }}</td>
								<td>{{ $key }}</td>
								<td>{{ $c->name }}</td>
								<td>{{ $c->created_at }}</td>
								<td class="text-center">
									<div class="list-icons">
										<div class="dropdown">
											<a href="#" class="list-icons-item" data-toggle="dropdown">
												<i class="icon-menu9"></i>
											</a>
											<div class="dropdown-menu dropdown-menu-right">
												<a href="{{ route('product.edit',$c->id) }}" class="dropdown-item"><i class="icon-file-excel"></i> Modifier</a>
                                                <button type="button" onclick="openDeleteModal({{ $c->id }})" class="dropdown-item"><i class="icon-fixed-width icon-trash"></i> Supprimer</button>
											</div>
										</div>
									</div>
								</td>
							</tr>
							@endforeach
						</tbody>
					</table>
				{{-- </div> --}}
				<!-- /whole row as a control -->
                <div class="swal2-container swal2-center swal2-fade swal2-shown" id="modal1" style="overflow-y: auto;display: none;">
                <div aria-labelledby="swal2-title" aria-describedby="swal2-content" class="swal2-popup swal2-modal swal2-show" tabindex="-1" role="dialog" aria-live="assertive" aria-modal="true" style="display: flex;">
                <div class="swal2-header"><ul class="swal2-progresssteps" style="display: none;"></ul>
                <div class="swal2-icon swal2-error" style="display: none;">
                <span class="swal2-x-mark">
                    <span class="swal2-x-mark-line-left"></span>
                    <span class="swal2-x-mark-line-right"></span>
                </span></div>
                <div class="swal2-icon swal2-question" style="display: none;">?</div>
                <div class="swal2-icon swal2-warning swal2-animate-warning-icon" style="display: flex;">!</div>
                <div class="swal2-icon swal2-info" style="display: none;">i</div>
                <div class="swal2-icon swal2-success" style="display: none;">
                <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
                <span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
                <div class="swal2-success-ring"></div> <div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
                <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div></div>
                <img class="swal2-image" style="display: none;"><h2 class="swal2-title" id="swal2-title">Êtes-vous sûr?</h2>
                <button type="button" class="swal2-close" style="display: none;">×</button></div><div class="swal2-content">
                    <div id="swal2-content" style="display: block;">Vous ne pourrez pas récupérer ces informations!</div>
                    <input class="swal2-input" style="display: none;"><input type="file" class="swal2-file" style="display: none;">
                    <div class="swal2-range" style="display: none;"><input type="range"><output></output></div>
                    <select class="swal2-select" style="display: none;"></select><div class="swal2-radio" style="display: none;"></div>
                    <label for="swal2-checkbox" class="swal2-checkbox" style="display: none;"><input type="checkbox"></label>
                    <textarea class="swal2-textarea" style="display: none;"></textarea>
                    <div class="swal2-validationerror" id="swal2-validationerror" style="display: none;"></div></div>
                    <div class="swal2-actions" style="display: flex;">
                        <form id="formDelete" action="" method="post">
                                                {{ csrf_field() }}
                                                @method('DELETE')
                            <button type="submit" class="swal2-confirm btn btn-primary" aria-label="">Oui, supprimez-le!</button>
                        </form>
                    <button type="button" class="swal2-cancel btn btn-light" onclick="closeDeleteModal();" aria-label="" style="display: inline-block;">Annuler</button></div>
                    <div class="swal2-footer" style="display: none;"></div></div></div>
			</div>
			<!-- /content area -->
	<!-- /main content -->
    <script>

        function openDeleteModal(id) {
            document.getElementById("modal1").style.display = "flex";

            document.getElementById("formDelete").action = window.location.href +"/"+id;
        }
        function closeDeleteModal() {
            document.getElementById("modal1").style.display = "none";
        }
    </script>
    </div>
</div>
</div>
@include('shared.footer')