@extends('layouts.stores_dashboard_layout')


@section('title')
{{trans('stores_dashboard.products')}}

@endsection


@section('content')

           <!-- start new order table -->

            <div  class="table-cont p-2 ">
                <div class="row align-items-center">
                    <div class="dash-title col-md p-0 mt-0">
                        <h6 class="bold">{{trans('stores_dashboard.products')}}</h6>
                        <p class="mb-1">{{trans('stores_dashboard.products_desc')}}</p>
                    </div>

                    <div class="form-group col-md p-0 m-0 ">
                        <div class="row align-items-center justify-content-between ">
                            <div class="col-10  p-0 password-cont">
                                <input type="text" class="form-control" id="dataTableSearchInput1"  aria-describedby="emailHelp" placeholder="{{trans('stores_dashboard.keywords')}}">
                                <i class="fa fa-search color-gray" ></i>
                            </div>
                            <div class="col  p-0 text-align2 ">
                                <a href="{{route('stores_dashboard.get_add_product')}}"><button class="btn btn-warning color-white"><i class="fa fa-plus"></i></button></a>
                            </div>
                        </div>
                    </div>





                </div>


                <table id="dataTable1" data-order='[[ 1, "asc" ]]' data-page-length='25' class="table text-center  table-striped table-ed" style="width:100%">
                    <thead class="table-head">
                        <tr >
                            <th>#</th>
                            <th>{{trans('stores_dashboard.number')}}</th>
                            <th>{{trans('stores_dashboard.name_in_ar')}}</th>
                            <th>{{trans('stores_dashboard.name_in_en')}}</th>
                            <th>{{trans('stores_dashboard.price')}}</th>
                            <th>{{trans('stores_dashboard.created_at')}}</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody data-class-name="table-body ">
                                            @foreach($products as $product)
                        <tr>
                           <td>{{$index}}</td>
                            <td>{{$product->id}}</td>
                            @foreach(config('app.languages') as $key => $lang)
                                <td>{{ $product->getTranslation('name', $key) }}</td>
                            @endforeach
                            <td class="stars-cont">{{$product->price()}}
                                <form id="postForm">
                                        @csrf
                                        <input type="hidden" id="product" name="id" value="{{$product->id}}">
                                  </form>
                            </td>
                            <td>{{$product->created_at}}</td>
                            <td class="table-menu">
                                <i onclick="openTableMenu(this)" class=" cp p-2 fa fa-ellipsis-h"></i>
                                <div class="menu-cont">

                                    <ul class="white-bg round7 pt-1 pb-1 shadow1">
                                        <li> <a href="{{route('stores_dashboard.get_add_addition',$product->id)}}"><i class="far fa-plus-square color1"></i> {{trans("stores_dashboard.additives")}}</a> </li>
                                        <li class="border-bottom"></li>
                                        <li> <a href="{{route('stores_dashboard.product_edit',$product->id)}}"><i class="fa fa-edit color1"></i> {{trans('stores_dashboard.edit')}}</a> </li>
                                        <li class="border-bottom"></li>
                                        <li> <a class="cp" name="{{$product->id}}" onclick="deleteElement()"><i class="far fa-trash-alt color-red"></i>{{trans('stores_dashboard.delete')}} </a> </li>
                                    </ul>
                                </div>
                            </td>
                        </tr>
                                            @endforeach




                    </tbody>

                </table>




            </div>
            <!-- end new order table -->
@endsection
@section('scripts')
<script>
            function deleteElement(){
                var button = event.target;
                var product = button.name;
                $('#product').val(product);
                 Swal.fire({
                 title: '<h5 class="bold">{{trans("stores_dashboard.sure")}}</h5>',
                 icon: 'warning',
                 html:'<p>{{trans("stores_dashboard.delete_rule")}}</p> '
                        +'<div class="row">'
                        +'    <div class="col"><a type="button" id="deleteBtn" class="button1 w-100" >{{trans("stores_dashboard.delete")}}</a></div>'
                        +'    <div class="col"><a class="button3 w-100" onclick="Swal.clickCancel()" >{{trans("stores_dashboard.back")}}</a></div>'
                        +'</div>',
                 showCancelButton: false,
                 showConfirmButton: false,
                 })
                }

    </script>

<script>
        $(document).on('click',"#deleteBtn",function(e){
            e.preventDefault();
            var form = $('#postForm').get(0);
            var formData = new FormData(form);
            var oldText = $(this).text();
            $(this).prop('disabled', true).css({
                opacity:'0.5'
            }).text("{{trans('stores_dashboard.loading')}}");

            $.ajax({
                url:"{{route('stores_dashboard.delete_product')}}",
                type:"POST",
                data: formData,
                dataType: "json",
                processData: false,
                contentType: false,
                cache: false,
                success:function(data){
                    $('#deleteBtn').removeAttr("disabled").css({
                        opacity:'1'
                    }).text(oldText);
                    if(data.key =='success'){
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 15000,
                            type:'success',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                        location.assign(data.url);
                    }else{
                        Swal.fire({
                            title: data.msg,
                            position:'top',
                            timer: 3000,
                            type:'error',
                            showCloseButton: false,
                            showConfirmButton:false,
                            animation: true
                        })
                    }
                }
            });
        });
    </script>

@endsection