@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-xl-9 col-lg-6 col-md-3 col-sm-12 col-6">
                        <form action="{{route('articles.index',['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:</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">
                            <table class="table">

                                <thead class="bg-light">
                                    <tr class="border-0">
                                        <th class="border-0">#</th>
                                        <th class="border-0">Matricule</th>
                                        <th class="border-0">Nom</th>
                                        <th class="border-0">Prix de vente</th>
                                        <th class="border-0">Categorie</th>

                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($articles as $item)
                                    <tr>
                                        <td>{{$item->id}}</td>
                                        <td>
                                            @if(starts_with($item->matricule, 'CLOUD_'))
                                                {{ str_after($item->matricule, 'CLOUD_') }}
                                            @elseif(starts_with($item->matricule, 'UPDATED_'))
                                                {{ str_after($item->matricule, 'UPDATED_') }}
                                            @else
                                                {{ $item->matricule }}
                                            @endif
                                            <input type="hidden" value=" {{$item->information}}"/>
                                        </td>
                                        <td>{{$item->nom}}</td>
                                        <td>{{$item->getOptions('options','PrixVente')}}</td>
                                        <td>

                                            @if($item->category()->first()['designation'])
                                            <input type="hidden" value="{{$item->category()->first()['id']}}">
                                            {{$item->category()->first()['designation']}}
                                            @else
                                            Parent
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-success detailsArticle"  value="{{$item->id}}">
                                                Details
                                            </button>

                                        </td>
                                        <td>
                                            <button class="btn btn-warning editCat"  value="{{$item->id}}">
                                                Editer
                                            </button>

                                        </td>
                                        <td>

                                            <form action="{{route('articles.delete',['store'=>$store,'id'=>$item->id])}}" method="POST">
                                                <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">Supprimer</button>
                                            </form>
                                        </td>


                                    </tr>
                                    @endforeach

                                    <tr>
                                        <td colspan="9">

                                            <a href="#" class="btn btn-outline-light float-right">View Details</a>
                                        </td>
                                    </tr>

                                </tbody>
                            </table>
                            {{$articles->appends(request()->query())->links()}}
                        </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',['store'=>$store]) }}" method="POST" enctype="multipart/form-data">
                                    <h3 class="card-title">Ajouter un Article</h3>
                                    <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">Category:</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">
                            <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">
        @if(request('categorie'))
            $('#filterByCategorie').val({{request('categorie')}});
        @endif

        $(".editCat").on('click', function () {
            cat_id = $(this).val();
            designation = $(this).parent().prev().prev().prev().prev().text();
            subcat = $(this).parent().prev().prev().find("input").val();
            nom = $(this).parent().prev().prev().prev().prev().prev().prev().text();
            prixvente = $(this).parent().prev().prev().prev().text();
            matricule = $(this).parent().prev().prev().prev().prev().prev().text().trim();
            information = $(this).parent().prev().prev().prev().prev().prev().find("input").val();
            $("#myModal").find("#nom").val(designation);
            $("#myModal").find("#subcategory").val(subcat);
            $("#myModal").find("#matricule").val(matricule);
            $("#myModal").find("#information").val(information);
            $("#myModal").find("#prixvente").val(prixvente);
            $("#myModal").modal('show');
            $("#form-edit-article").attr('action', "{{ url('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',['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();
//            $.ajax({
//                type: "POST",
//                data: {'txtch': txtch},
//                url: "{{route('articles.search',['store'=>$store])}}",
//                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
//                success: function (data) {
//
//                    $('tbody').html(data);
//
//
//
//                },
//            });
//        });
//
//
//        $("#filterByCategorie").change(function () {
//            txtch = $(this).val();
//            $.ajax({
//                type: "POST",
//                data: {'cat': txtch},
//                url: "{{route('articles.search',['store'=>$store])}}",
//                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
//                success: function (data) {
//
//                    $('tbody').html(data);
//
//
//
//                },
//            });
//        });


    </script>
    @endsection