@extends('layouts.backend.app')
@section('title', "Tableau de bord")
@section('content')
    <!-- Page Wrapper -->
    <!-- Page Wrapper -->
            <div class="page-wrapper">
                <div class="content container-fluid">

					<!-- Page Header -->
					<div class="page-header">
						<div class="row">
							<div class="col">
								<h3 class="page-title">Catégories de produits</h3>
								<ul class="breadcrumb">
									<li class="breadcrumb-item"><a href="#">Tableau de bord</a></li>
									<li class="breadcrumb-item active">Catégories de produits</li>
								</ul>
							</div>
						</div>
					</div>
					<!-- /Page Header -->

					<div class="row">
                        <div class="col-md-12">
                            <x-alert/>
                        </div>
						<div class="col-sm-12">
							<div class="card">
								<div class="card-header">
									<button class="btn btn-primary" type="button" data-toggle="modal" data-original-title="test" data-target="#exampleModal">Ajouter <i class="fa fa-plus"></i></button>
								</div>
								<div class="card-body">

									<div class="table-responsive">
										<table class="datatable table table-stripped">
											<thead>
												<tr>
													<th>N°</th>
                                                    <th>Nom</th>
													<th>Description</th>
													<th class="text-center">Actions</th>
												</tr>
											</thead>
											<tbody>
												@forelse($categories as $key=>$category)
                                                    <tr>
                                                        <td>{{++$key}}</td>
                                                        <td>
                                                            <h2 class="table-avatar">
                                                                <a href="#" class="avatar avatar-sm me-2 mr-2" ><img class="avatar-img rounded-circle" src="{{asset('/images/category/'.$category->image)}}" alt="User Image"></a>
                                                                <a href="#">{{$category->name}}</a>
                                                            </h2>
                                                        </td>
                                                        <td>{{$category->description}}</td>
                                                        <td class="text-center">
                                                            <button class="btn btn-mc" id="edit-button" data-id="{{$category->id}}" data-url="{{route('categorie.edit', $category->id)}}" title="Modifier" style="padding: 5px;">
                                                                <span class="fa fa-pencil"></span>
                                                            </button>
                                                            <button type="button" title="Supprimer" class="btn delete-action btn-mc" style="color: #ff0000">
                                                                <span class="fa fa-trash"></span>
                                                            </button>
                                                            {{ Form::open(['url' => route('categorie.destroy', $category->id), 'method' => 'delete']) }}
                                                            {{ Form::close() }}
                                                        </td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3">Aucune catégorie enregistrée pour l'instant</td>
                                                    </tr>
                                                @endforelse
											</tbody>
										</table>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<!-- /Main Wrapper -->

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
				    <div class="modal-content">
                        <form action="{{route('categorie.store')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="modal-header">
                                <h5 class="modal-title">Création d'une catégorie</h5>
                                <button class="close" type="button" data-dismiss="modal" aria-label="Close" data-original-title="" title=""><span aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="form-group row">
									<label class="col-form-label col-md-12">Nom *</label>
									<div class="col-md-12">
										<input type="text" name="name" class="form-control" required>
									</div>
								</div>
                                <div class="form-group row">
                                    <label class="col-form-label col-md-12">Image *</label>
                                    <div class="col-md-9">
                                        <input type="file" name="image" class="form-control file-input">
                                    </div>
                                    <div class="col-md-3">
                                        <img src="" class="image" alt="" width="100%">
                                    </div>
								</div>
                                <div class="form-group row">
									<label class="col-form-label col-md-12">Description</label>
									<div class="col-md-12">
										<textarea rows="5" cols="5" name="description" class="form-control" placeholder="Entrer la description" required></textarea>
									</div>
								</div>
                            </div>
                            <div class="modal-footer">
                                <button class="btn btn-secondary" type="button" data-dismiss="modal" title="">Annuler</button>
                                <button class="btn btn-primary" type="submit" title="">Enregistrer</button>
                            </div>
                        </form>
				    </div>
				</div>
			</div>

            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered" role="document">
				    <div class="modal-content" id="edit-content">

				    </div>
				</div>
			</div>
@endsection

@section('js')
    <script>
        $(function(){
            $('.delete-action').click(function (e) {
                if (confirm('Voulez-vous vraiment supprimer cette catégorie ?')) {
                    $(this).siblings('form').submit();
                }

                return false;
            });
            $("#edit-button").on('click', function (e) {
                $('#main-loading').show();
                let data = {id: $(this).data('id')},
                    url = $(this).data('url');
                $.ajax({
                    type: 'get',
                    url: url,
                    data: data,
                    dataType: 'json',
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        if(data.success){
                            $('#edit-content').html(data.html);
                            $('#editModal').modal('show');
                            $('#main-loading').hide();
                        }
                        else{
                            $('#main-loading').hide();
                            alert(data.message);
                        }
                    },
                    error: function (xhr, textStatus, errorThrown, err, status) {
                        //alert("Error: " + errorThrown);
                    }
                });
            });
        });
    </script>
@endsection