@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-bag"></i> Categories</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">
                        <div class="form-group">
                            <label for="txtch" class="col-form-label">Rechercher :</label>
                            <input id="txtch" name="txtch" type="text" class="form-control{{ $errors->has('txtch') ? ' is-invalid' : '' }}">
                        </div>
                    </div>
                    <h5 class="card-header">Liste des categories</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">Designation</th>
                                        <th class="border-0">Categorie Parent</th>
                                    </tr>
                                </thead>
                                <tbody>

                                    @foreach($cats as $cat)
                                    <tr>
                                        <td>{{$cat->id}}</td>
                                        <td>{{$cat->designation}}</td>
                                        <td>
                                            @if($cat->parent()->first()['designation'])
                                            <input type="hidden" value="{{$cat->parent()->first()['id']}}">
                                                {{$cat->parent()->first()['designation']}}
                                            @else
                                                Parent
                                            @endif
                                        </td>
                                        <td>
                                            <button class="btn btn-warning editCat"  value="{{$cat->id}}">
                                                Editer
                                            </button>
                                        </td>
                                        <td>
                                            <form action="{{ route('destroyCategory',['id'=>$cat->id,'store'=>$store]) }}" 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 categorie?');" 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>
                            {{$cats->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('storeCategory',['store'=>$store]) }}" method="POST" enctype="multipart/form-data">
                                    <h3 class="card-title">Ajouter une nouvelle Categorie</h3>
                                    <div class="card-text">
                                        {{ 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="designation" class="col-form-label">Designation :</label>
                                            <input id="designation" name="designation" type="text" class="form-control{{ $errors->has('designation') ? ' 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="subcategory" class="col-form-label">sous Category:</label>
                                            <select id="subcategory" name="subCatID" class="form-control">
                                                <option value="0">
                                                    Aucun
                                                </option>
                                                @foreach($categories as $cat)
                                                <option value="{{$cat->id}}">
                                                    {{$cat->designation}}
                                                </option>
                                                @endforeach
                                            </select>

                                        </div>


                                    </div>

                            </div>
                            <button type="submit" class="btn btn-block btn-green">Ajouter</button>
                            </form>
                        </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 categorie</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-cat" 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="designation" class="col-form-label">Designation :</label>
                        <input id="designation" name="designation" type="text" class="form-control{{ $errors->has('designation') ? ' 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="subcategory" class="col-form-label">sous Category:</label>
                        <select id="subcategory" name="subCatID" class="form-control">
                            <option value="0">
                                Aucun
                            </option>
                            @foreach($categories as $cat)
                            <option value="{{$cat->id}}">
                                {{$cat->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>


@endsection

@section('javascript')
<script type="text/javascript">



    $(".editCat").on('click', function () {
        cat_id = $(this).val();
        designation = $(this).parent().prev().prev().text();
        subcat = $(this).parent().prev().find("input").val();
        $("#myModal").find("#designation").val(designation);
        $("#myModal").find("#subcategory").val(subcat);
        $("#myModal").modal('show');
        $("#form-edit-cat").attr('action', "{{ url('stores/'.$store.'/categories/') }}/" + cat_id);
    });


    $("#txtch").keyup(function () {
        txtch = $(this).val();
        $.ajax({
            type: "POST",
            data: {'txtch': txtch},
            url: "{{route('SearchCategory',['store'=>$store])}}",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            success: function (data) {
                $('tbody').html(data);
            },
        });
    });
</script>
@endsection