@extends('layouts.app')
@section('title') Products @endsection


@section('css')
    <link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css"/>
@endsection

@section('content')

    <!-- begin:: Subheader -->
    <div class="kt-subheader   kt-grid__item" id="kt_subheader">
        <div class="kt-subheader__main">
            <h3 class="kt-subheader__title">
                Products</h3>
            <span class="kt-subheader__separator kt-hidden"></span>
        </div>
    </div>

    <!-- begin:: Content -->
    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="">

        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
										<span class="kt-portlet__head-icon">
											<i class="kt-font-brand flaticon2-grids red"></i>
										</span>
                    <h3 class="kt-portlet__head-title">
                        Filter by Category
                    </h3>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <div class="kt-portlet__head-actions">
                            &nbsp;
                            <a href="javascript:;" data-toggle="modal" data-target="#kt_modal_1"
                               class="btn btn-elevate btn-icon-sm red-btn">
                                <i class="la la-search"></i>
                                Advanced Filter
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="kt-portlet__body">

                <form action="{{route('filterProductByCategory')}}" method="post">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="category">Select Category</label>
                                <select name="category" id="category" class="form-control"
                                        onchange="this.form.submit();">
                                    {!! $cat !!}
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <div class="kt-content  kt-grid__item kt-grid__item--fluid" id="kt_content">

        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                <div class="kt-portlet__head-label">
										<span class="kt-portlet__head-icon">
											<i class="kt-font-brand flaticon-cart red"></i>
										</span>
                    <h3 class="kt-portlet__head-title">
                        Products Table
                    </h3>
                </div>

                    <div class="kt-portlet__head-toolbar">
                        <div class="kt-portlet__head-wrapper">
                            <div class="kt-portlet__head-actions">
                                &nbsp;
                                <a href="javascript:;" class="btn red-btn" id="export_excel">
                                    <i class="kt-nav__link-icon la la-file-excel-o"></i>
                                    <span class="kt-nav__link-text">Excel</span>
                                </a>
                            </div>
                        </div>
                    </div>

            </div>
            <div class="kt-portlet__body">
                <div class="table-responsive">
                    <table class="table table-striped- table-bordered table-hover table-checkable table_1">
                        <thead>
                        <tr>

                            <th class="text-center">#</th>
                            <th class="text-center">Name</th>
							 <th class="text-center d-none">Main Category</th>
                            <th class="text-center">Category</th>
                            <th class="text-center">Price</th>
                            @if(Auth::user()->roles == 0)
                                <th class="text-center">Cost</th>
                            @endif
                            <th class="text-center">Quantity</th>
                            <th class="text-center">Condition</th>
                            <th class="text-center">Active</th>
                            <th class="text-center">Exchangeable</th>
                            <th class="text-center">Exchangeable Price</th>
                            <th class="text-center d-none">Image</th>
                            <th class="text-center d-none">Description EN</th>
                            <th class="text-center d-none">Description AR</th>
                            <th class="text-center d-none">Features EN</th>
                            <th class="text-center d-none">Features AR</th>
                            @if(Auth::user()->roles == 0)
                                <th class="text-center">Action</th>
                            @endif
                        </tr>
                        </thead>
                        <tbody>
                                                @foreach($products as $product)
                            <tr data-index="{{$product->id}}" data-position="{{$product->position}}">

                                <td>
                                    <a href="{{route('products.show',$product->id)}}">{{$product->id}}</a>
                                </td>
                                <td class="text-center">
                                    {{$product->name}}
                                </td>
                               <td class="text-center d-none">
							    @if($product->getMainCategory != null)
							   {{$product->getMainCategory->name}}
						        @endif
						   </td>
                                <td class="text-center">
                                    @foreach($product->category as  $item)
                                        {{$item->name}}
                                    @endforeach
                                </td>

                                <td class="text-center">
                                    {{$product->price}}
                                </td>
                                @if(Auth::user()->roles == 0)
                                    <td class="text-center">
                                        {{$product->cost}}
                                    </td>
                                @endif
                                <td class="text-center">
                                    {{$product->quantity}}
                                </td>
                                <td class="text-center">
                                    {{$product->condition}}
                                </td>

                                <td class="text-center">
                                    @if($product->active == 0)
                                        No
                                    @elseif($product->active == 1)
                                        Yes
                                    @endif

                                </td>
                                <td class="text-center">
                                    @if($product->exchangeable == 0)
                                        No
                                    @elseif($product->exchangeable == 1)
                                        Yes
                                    @endif

                                </td>
                                <td class="text-center">
                                    @if($product->exchangeable == 0)

                                    @elseif($product->exchangeable == 1)
                                        {{$product->exchangeable_price}}
                                    @endif

                                </td>
                                <td class="text-center d-none">{{asset('assets/uploads/products/'.$product->image)}}</td>
                                <td class="text-center d-none">{{$product->description}}</td>
                                <td class="text-center d-none">{{$product->description_ar}}</td>
                                <td class="text-center d-none">{{$product->item_features}}</td>
                                <td class="text-center d-none">{{$product->item_features_ar}}</td>
                                @if(Auth::user()->roles == 0)
                                    <td class="text-center action-ic">
                                        <a title="Edit" href="{{route('products.edit',$product->id)}}"
                                           class="btn btn-sm btn-clean btn-icon btn-icon-md">
                                            <i class="la la-edit"></i>
                                        </a>
                                        @if(Auth::user()->roles == 0 )
                                            <a title="Delete" href="javascript:;"
                                               class="btn btn-sm btn-clean btn-icon btn-icon-md delete">
                                                <i class="la la-remove red"></i>
                                                <input type="hidden" value="{{$product->id}}" class="id">
                                            </a>
                                        @endif
                                    </td>
                                @endif
                            </tr>
                                                    @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
    <!--begin::Modal-->
    <div class="modal fade" id="kt_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Advanced Filter</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <form role="form" method="post" action="{{route('products.filter')}}" class="filter-products">
                    <div class="modal-body">
                        <div class="error-alert" style="display:none"></div>
                        {{csrf_field()}}
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="from">From:</label>
                                    <input type="text" class="form-control datepicker-a" id="from" name="from"
                                           value="{{old('from')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="to">To:</label>
                                    <input type="text" class="form-control datepicker-a" id="to" name="to"
                                           value="{{old('to')}}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="updated_at">Updated at:</label>
                                    <input type="text" class="form-control datepicker-a" id="updated_at" name="updated_at"
                                           value="{{old('updated_at')}}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="categories">Select Main Categories</label>
                            <select name="main_categories[]" id="main_categories" class="form-control multi-select2"
                                    multiple="multiple" style="width: 100%;display: block">
                                <option value="0">None</option>
                                @foreach($main_categories as $category)
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="categories">Select Categories</label>
                            <select name="categories[]" id="categories" class="form-control multi-select2"
                                    multiple="multiple" style="width: 100%;display: block">
                                {!! $cat !!}
                            </select>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="price_from">Price From:</label>
                                    <input type="text" class="form-control" id="price_from" name="price_from"
                                           value="{{old('price_from')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="tprice_o">Price To:</label>
                                    <input type="text" class="form-control" id="price_to" name="price_to"
                                           value="{{old('price_to')}}">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="quantity_from">Quantity From:</label>
                                    <input type="text" class="form-control " id="quantity_from" name="quantity_from"
                                           value="{{old('quantity_from')}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="quantity_to">Quantity To:</label>
                                    <input type="text" class="form-control" id="quantity_to" name="quantity_to"
                                           value="{{old('quantity_to')}}">
                                </div>
                            </div>
                        </div>
                        <div class="row p-checkbox">
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">Exchangeable</label>
                                    <div class="col-9">
                                        <div class="kt-checkbox-list">
                                            <label class="kt-checkbox kt-checkbox mr-4">
                                                <input type="checkbox" name="exchangeable[]" value="1" checked> Yes
                                                <span></span>
                                            </label>
                                            <label class="kt-checkbox">
                                                <input type="checkbox" name="exchangeable[]" value="0" checked> No
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">Active</label>
                                    <div class="col-9">
                                        <div class="kt-checkbox-list">
                                            <label class="kt-checkbox mr-4">
                                                <input type="checkbox" name="active[]" value="1" checked> Yes
                                                <span></span>
                                            </label>
                                            <label class="kt-checkbox">
                                                <input type="checkbox" name="active[]" value="0" checked> No
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group row">
                                    <label class="col-3 col-form-label">On Sale</label>
                                    <div class="col-9">
                                        <div class="kt-checkbox-list">
                                            <label class="kt-checkbox mr-4">
                                                <input type="checkbox" name="on_sale[]" value="1" checked> Yes
                                                <span></span>
                                            </label>
                                            <label class="kt-checkbox">
                                                <input type="checkbox" name="on_sale[]" value="0" checked> No
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn red-btn">Filter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>


    <!--end::Modal-->
@endsection

@section('js')
    <script src="{{asset('assets/js/demo1/pages/crud/forms/widgets/select2.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/js/demo1/pages/crud/forms/widgets/bootstrap-datepicker.js')}}"
            type="text/javascript"></script>

    <script>

        var delete_item = function () {
            $('.delete').on("click", function () {
                var this_item = $(this);
                var id = $(this).parent().find('.id').val();
                Swal.fire({
                    title: 'Are you sure?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes',
                    cancelButtonText: 'No'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            method: "post",
                            url: "{{route('products.destroy')}}",
                            headers: {
                                'X-CSRF-TOKEN': $('input[name="_token"]').val()
                            },
                            data: {
                                id: id,
                            },
                            async: true,
                            success: function (data) {
                                //  wait.resolve();
                                $(".loadingMask").css('display', 'none');
                                if (data.errors) {
                                    Swal.fire("Errors!", "Please select the user", "error");
                                } else if (data.message == "order") {
                                    Swal.fire("Errors!", "Sorry! you can't delete the user, before deleting the user you need to delete his orders!", "error");
                                } else if (data.message == "Deleted") {
                                    this_item.parent().parent().remove();
                                    Swal.fire({
                                        type: 'success',
                                        title: 'Deleted successfully!',
                                        confirmButtonText: 'Ok!',
                                    })
                                }
                            },
                            error: function () {
                                alert("Error, Please try again.");
                            }
                        });

                    }
                })


            });
        };
        delete_item();

    </script>.
    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/js/demo1/pages/crud/datatables/extensions/buttons.js')}}" type="text/javascript"></script>
@endsection