@extends('mattine.layouts.app')

@section('content')
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->


<div class="container-fluid dashboard-content">
    <div class="row justify-content-between">
        <div class="col">
            <h3 class="section-title mb-0"> <i class="fa fa-shopping-basket"></i> {{__('Articles')}}</h3>

        </div>

    </div>
    <hr>
    <div class="row">

        <div class="col-xl-9 col-lg-12 col-md-6 col-sm-12 col-12">
            <div class="card">
                <div class="col-xs-12 col-sm-6 col-md-11">
                    <form action="{{route('articles.index',['locale'=>app()->getLocale(),'store'=>$store])}}">
                        <div class="form-group">
                            <label for="txtch" class="col-form-label">{{__('Rechercher')}} </label>
                            <input id="txtch" name="nom" type="text" value="{{request('nom')}}"
                                class="form-control{{ $errors->has('txtch') ? ' is-invalid' : '' }}">


                        </div>
                        <div class="form-group">
                            <label for="txtch" class="col-form-label">{{__('Rechercher Par Catégorie')}}</label>
                            <select class="form-control" id="filterByCategorie" name="categorie">
                                <option value="0">tous</option>
                                @foreach($categories as $categorie)
                                <option value="{{$categorie->id}}">{{$categorie->designation}}</option>
                                @endforeach
                            </select>


                        </div>
                        <div class="form-group">
                            <button type="submit" value="submit" class="btn btn-success">{{__('Rechercher')}}</button>



                        </div>
                    </form>
                </div>
                <h5 class="card-header">{{__('Liste des articles')}}</h5>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <div id="toreplace">
                            <table class="table">

                                <thead class="bg-light">
                                    <tr class="border-0">
                                    <th class="border-0 d-none">#</th>
                                        <th class="border-0 d-none">{{__('Matricule')}}</th>
                                        <th class="border-0">{{__('Image')}}</th>
                                        <th class="border-0">{{__('Désignation')}}</th>
                                        <th class="border-0">{{__('Prix de vente')}}</th>
                                        <th class="border-0">{{__('Catégorie')}}</th>
                                        <th class="border-0">{{__('Menu')}}</th>
                                        <th class="border-0"></th>
                                        <th class="border-0"></th>
                                        <!-- <th class="border-0"></th> -->
                                    </tr>
                                </thead>

                                <tbody>

                                    @foreach($articles as $article)
                                    <tr>
                                        
                                        
                                            <input type="hidden" value=" {{$article->information}}" />
                                       
                                        <td><img src="{{$article->image_file}}" alt="image" class="rounded" width="45">
                                        </td>
                                        <td>{{$article->nom}}</td>
                                        <td>{{$article->getOptions('options','PrixVente')}}</td>
                                        <td>

                                            @if($article->category()->first()['designation'])
                                            <input type="hidden" value="{{$article->category()->first()['id']}}">
                                            {{$article->category()->first()['designation']}}
                                            @else
                                            Parent
                                            @endif
                                        </td>
                                        <td>

                                            @if ($article->ismenu==1)
                                            <a
                                                href="{{route('articles.menu',['locale'=>app()->getLocale(),$store,$article])}}">
                                                <button class="btn btn-primary " value="{{$article->id}}">
                                                    <i class="fa fa-bars"></i>
                                                </button>
                                            </a>
                                            @endif

                                        </td>
                                        <td>
                                            <button class="btn btn-success detailsArticle" value="{{$article->id}}">
                                                {{__('Détails')}}
                                            </button>

                                        </td>
                                        <td>
                                            <button class="btn btn-warning editCat" value="{{$article->id}}">
                                                {{__('Éditer')}}
                                            </button>

                                        </td>
                                        <!-- <td>

                                            <form
                                                action="{{route('articles.delete',['locale'=>app()->getLocale(),'store'=>$store,'id'=>$article->id])}}"
                                                method="POST" id="delete_form">
                                                <input type="hidden" name="_method" value="DELETE">
                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <button
                                                    {{-- onclick="return confirm('Vous voulez vraimment supprimer cette Article?');" --}} "
                                                    class=" btn btn-danger delete">{{__('Supprimer')}}</button>
                                            </form>
                                        </td> -->


                                    </tr>
                                    @endforeach

                                    <tr>
                                        <td colspan="9">

                                            <a href="#"
                                                class="btn btn-outline-light float-right">{{__('afficher détails')}}</a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            {{$articles->appends(request()->query())->links()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-lg-3 col-md-3">
            <div class="row">
                <div class="col-12">
                    <div class="card">

                        <div class="card-body">

                            <form action="{{ route('articles.store',['locale'=>app()->getLocale(),'store'=>$store]) }}"
                                method="POST" enctype="multipart/form-data">
                                <h3 class="card-title">{{__('Ajouter un Article')}}</h3>
                                <div class="form-group">
                                <a href="{{route('articles.nvmenu',['locale'=>app()->getLocale(),$store])}}"><button type="button"  class="btn btn-block  btn-primary ">{{__('Ajouter Menu')}}</button></a>
                                </div>
                                <div class="card-text"></div>
                                {{ csrf_field() }}

                                <div class="form-group">
                                    <label for="image_file">{{__('Image')}}</label>
                                    <input type="file" name="image_file" class="form-control-file" id="image_file">
                                </div>

                                <div class="form-group">
                                    <label for="matricule" class="col-form-label">{{__('Matricule')}} </label>
                                    <input id="matricule" name="matricule" type="text"
                                        class="form-control{{ $errors->has('matricule') ? ' is-invalid' : '' }}">

                                </div>
                                <div class="form-group">
                                    <label for="designation" class="col-form-label">{{__('Nom')}} </label>
                                    <input id="nom" name="nom" type="text"
                                        class="form-control{{ $errors->has('nom') ? ' is-invalid' : '' }}">
                                    <input id="store_id" name="store_id" type="hidden" value="{{$store}}"
                                        class="form-control{{ $errors->has('designation') ? ' is-invalid' : '' }}">

                                </div>

                                <div class="form-group">
                                    <label for="category" class="col-form-label">{{__('information')}}</label>
                                    <textarea class="form-control" rows="5" name="information"
                                        id="information"></textarea>

                                </div>


                                <div class="form-group">
                                    <label for="prixvente" class="col-form-label">{{__('Prix de Vente')}}</label>
                                    <input class="form-control" type="number" name="prixvente" id="prixvente"
                                        step="0.01" />

                                </div>
                                <div class="form-group">
                                    <label for="category" class="col-form-label">{{__('Catégorie')}}</label>


                                    <select id="category" name="subCatID" class="form-control">
                                        @foreach($categories as $item)
                                        <option value="{{$item->id}}">
                                            {{$item->designation}}
                                        </option>
                                        @endforeach
                                    </select>

                                </div>
                                <button type="submit" class="btn btn-block btn-green"
                                    id="submit-all">{{__('Ajouter')}}</button>

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


<!-- The Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{__('Editer une Article')}}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <form action="" method="POST" id="form-edit-article" enctype="multipart/form-data">


                    {{ csrf_field() }}
                    <input name="_method" type="hidden" value="PUT">

                    <div class="form-group">
                        <div class="m-r-10"><img id="image" src="" alt="image" class="rounded" width="54"></div>
                    </div>
                    <div class="form-group">

                        <label for="image_file">{{__('Image')}}:</label>
                        <input type="file" name="image_file" class="form-control-file" id="image_file">
                    </div>

                    <div class="form-group">
                        <label for="matricule" class="col-form-label">{{__('Matricule')}}:</label>
                        <input id="matricule" name="matricule" type="text"
                            class="form-control{{ $errors->has('matricule') ? ' is-invalid' : '' }}">
                    </div>
                    <div class="form-group">
                        <label for="nom" class="col-form-label">{{__('Nom ')}}:</label>
                        <input id="nom" name="nom" type="text"
                            class="form-control{{ $errors->has('nom') ? ' is-invalid' : '' }}">
                        <input id="store_id" name="store_id" type="hidden" value="{{$store}}"
                            class="form-control{{ $errors->has('store_id') ? ' is-invalid' : '' }}">
                    </div>

                    <div class="form-group">
                        <label for="category" class="col-form-label">{{__('information')}}:</label>
                        <textarea class="form-control" rows="5" name="information" id="information"></textarea>

                    </div>
                    <div class="form-group">
                        <label for="prixvente" class="col-form-label">{{__('Prix de  Vente')}}:</label>
                        <input class="form-control" type="number" name="prixvente" id="prixvente" step="0.01" />

                    </div>
                    <div class="form-group">
                        <label for="subcategory" class="col-form-label">{{__('Category')}}:</label>
                        <select id="subcategory" name="subCatID" class="form-control">
                            @foreach($categories as $item)
                            <option value="{{$item->id}}">
                                {{$item->designation}}
                            </option>
                            @endforeach
                        </select>

                    </div>




                    <button type="submit" class="btn btn-block btn-dark">{{__('Modifier')}}</button>
                </form>
            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">{{__('Fermer')}}</button>
            </div>

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

<!-- The Modal -->
<div class="modal fade" id="myModalDetails">
    <div class="modal-dialog">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">{{__('Deatils Article')}}</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">

            </div>

            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">{{__('Fermer')}}</button>
            </div>

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


@endsection

@section('javascript')

<script type="text/javascript">
    $(".delete").on('click', function () {
        event.preventDefault();
        const url = $(this).attr('href');
        Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.value) {
    $('#delete_form').submit();
    Swal.fire(
      'Deleted!',
      'Your file has been deleted.',
      'success'
    )
  }
})
                                        });
$

        @if(request('categorie'))
            $('#filterByCategorie').val({{request('categorie')}});
        @endif
        $(".editCat").on('click', function () {
            cat_id = $(this).val();
            designation = $(this).parent().prev().prev().prev().prev().prev().text();
            subcat = $(this).parent().prev().prev().prev().find("input").val();
            nom = $(this).parent().prev().prev().prev().prev().prev().prev().prev().text();
            image = $(this).parent().prev().prev().prev().prev().prev().prev().children().attr("src");
            console.log(image);
            prixvente = $(this).parent().prev().prev().prev().prev().text();
            matricule = $(this).parent().prev().prev().prev().prev().prev().prev().prev().text().trim();
            information = $(this).parent().prev().prev().prev().prev().prev().prev().find("input").val();
            $("#myModal").find("#nom").val(designation);
            $("#myModal").find("#subcategory").val(subcat);
            $("#myModal").find("#image").val(subcat).attr("src",image);
            $("#myModal").find("#matricule").val(matricule);
            $("#myModal").find("#information").val(information);
            $("#myModal").find("#prixvente").val(prixvente);
            $("#myModal").modal('show');
            $("#form-edit-article").attr('action', "{{ url($locale . '/stores/'.$store.'/articles/edit/') }}/" + cat_id);
        });
//
//
        //todo get details of each row of item 3:)
        $(".detailsArticle").on('click', function () {
            article_id = $(this).val();
            $.ajax({
                type: "POST",
                data: {'id': article_id},
                url: "{{route('articles.show',['locale'=>app()->getLocale(),'store'=>$store])}}",
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function (data) {
                    $('#myModalDetails').find(".modal-body").html(data);
                    $('#myModalDetails').modal('show');

                },
            });
        });
//
       $("#txtch").keyup(function () {

           txtch = $(this).val();
           cat= $("#filterByCategorie").val();

           $.ajax({
               type: "POST",
               data: {'txtch': txtch,'cat':cat},
               url: "{{route('articles.search',['locale'=>app()->getLocale(),'store'=>$store])}}",
               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
               success: function (data) {

                   $('#toreplace').html(data);



               },
           });
       });
//
//
       $("#filterByCategorie").change(function () {

        txtch = $("#txtch").val();
        cat= $("#filterByCategorie").val();
           //alert(cat);
           $.ajax({
               type: "POST",
               data: {'txtch': txtch,'cat':cat},
               url: "{{route('articles.search',['locale'=>app()->getLocale(),'store'=>$store])}}",
               headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
               success: function (data) {
                   $('#toreplace').html(data);
               },
           });
       });


</script>
@endsection