@extends('merchant.layouts.master')
@section('css')
    <style>
        #scroll {
            width: 330px;
            height: 280px;
            overflow: scroll;
        }
        .list-group-item{
            padding: 0.25rem 0.25rem !important;
            border: none !important;
            border-bottom: 1px solid #d2d2d2 !important;
        }
    </style>
@endsection
@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                @if((app('request')->input('category_id')))
                    @foreach($categories as $category)
                        <h2 class="content-title mb-0 my-auto">@if((app('request')->input('category_id')) == $category->id) {{$category->name}} @endif</h2>
                    @endforeach
                @else
                    <h2 class="content-title mb-0 my-auto">{{config('languageString.product')}}</h2>
                @endif
            </div>
        </div>
        <div class="d-flex my-xl-auto right-content">
            <div class="pr-1 mb-3 mb-xl-0">
                <a href="{{ route('merchant.products.create') }}" class="btn btn-primary  mr-2">
                    <em class="mdi mdi-plus-circle"></em> {{config('languageString.add_new')}}
                </a>
                <button class="btn btn-secondary mr-2 @if($product_request_count == 0) d-none @endif"
                        id="approval_request">
                    <em class="fa fa-paper-plane"></em> {{config('languageString.request_for_approval')}}
                </button>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection
@section('content')
    <!-- row opened -->
    <div class="row row-sm main-content-mail">
        <div class="col-lg-4 col-xl-3 col-md-12">
            <div class="card mg-b-20 mg-md-b-0">
                <div class="card-body">
                    <div class="main-content-left main-content-left-mail">
                        <div class="breadcrumb-header justify-content-between">
                            <div class="my-auto">
                                <div class="d-flex">
                                    <h4 class="main-content-title mg-b-5">Category</h4>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4">
                            <nav class="nav mg-b-20" id="scroll">
                                @foreach($categories as $category)
                                    <div class="col-md-10">
                                        <ul class="list-group">
                                            <li class="list-group-item  @if((app('request')->input('category_id')) == $category->id) bg-dark @endif">
                                                <a class="nav-link"
                                                   href="{{ route('merchant.productsV2.index', ['category_id' => $category->id]) }}">{{ $category->name }}</a>
                                            </li>
                                        </ul>
                                    </div>
                                @endforeach
                            </nav>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="col-lg-8 col-xl-9 col-md-12">
            <div class="card">
                <div class="main-content-body main-content-body-mail card-body">
                    <div class="main-mail-header">
                        <div>
                            <h4 class="main-content-title mg-b-5">{{config('languageString.products')}}</h4>
                        </div>

                        <form method="get" action="{{ route('merchant.productsV2.index') }}">
                            <div class="input-group">
                                <input class="form-control" placeholder="Search Items..." type="text"
                                       name="search" id="search"
                                       value="{{app('request')->input('search')}}"
                                       autocomplete="off">
                                <button type="submit" class="search_icon bg-secondary col-2" style="border: none;"><em
                                            class="fa fa-search"
                                            aria-hidden="true"></em>
                                </button>

                                <a href="{{ route('merchant.productsV2.index') }}" class="btn btn-danger ml-2"
                                   title="Clear Search">Clear</a>
                            </div>
                        </form>
                    </div>

                    @if(count($products)>0)
                      <div class="table-responsive">
                        <table class="table mg-b-0 text-md-nowrap" summary="products new">
                            <thead>
                            <tr>
                                <th scope="row">#</th>
                                <th scope="row">{{config('languageString.products_id')}}</th>
                                <th scope="row">{{config('languageString.sku_barcode')}}</th>
                                <th scope="row">{{config('languageString.name')}}</th>
                                <th scope="row">{{config('languageString.image')}}</th>
                                <th scope="row">{{config('languageString.price')}}</th>
                                <th scope="row">{{config('languageString.approval_status')}}</th>
                                {{-- <th scope="row">{{config('languageString.status')}}</th> --}}
                                <th scope="row">{{config('languageString.product_status')}}</th>
                                <th scope="row">{{config('languageString.actions')}}</th>
                            </tr>
                            </thead>
                            <tbody>

                            @foreach($products as $product)
                                <tr>

                                    <td>
                                        @if($product->product_status == 'pending' || $product->product_status == 'rejected')
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox"
                                                       class="custom-control-input datable_check"
                                                       id="table_checkbox_{{$product->id}}"
                                                       value="{{$product->id}}"
                                                       data-type="{{ $product->id }}">
                                                <label class="custom-control-label" for="table_checkbox_{{$product->id}}">
                                                </label>
                                            </div>
                                        @endif
                                    </td>
                                    <td>{{ $product->id }}</td>
                                    <td>{{ $product->sku }}</td>
                                    <td>{{ $product->name }}</td>
                                    <td>
                                        @if(isset($product->productImages->image_path))
                                        <img alt="{{ $product->name }}" src="{{ url($product->productImages->image_path) }}"
                                             style="width: 100px; height: 100px;">
                                        @else
                                            <img alt="{{ $product->name }}" src="{{ url('') }}"
                                                 style="width: 100px; height: 100px;">
                                            @endif
                                    </td>
                                    <td>{{ $product->price }}</td>
                                    <td>
                                        @if($product->product_status == 'approved')
                                            <span class=" badge badge-success">{{config('languageString.approved')}}</span>
                                        @elseif($product->product_status == 'pending')
                                            <span class=" badge badge-warning">{{config('languageString.submit_request_for_approval')}}</span>
                                        @elseif($product->product_status == 'rejected')
                                            <span class=" badge badge-danger">{{config('languageString.rejected')}}</span>
                                        @elseif($product->product_status == 'request_for_approval')
                                            <span class=" badge badge-info">{{config('languageString.waiting_for_approval')}}</span>
                                        @endif
                                    </td>
                                    {{-- <td>
                                        @if ($product->status == 'active')
                                            <span class="badge badge-success">{{config('languageString.active')}}</span>
                                        @elseif ($product->status == 'inActive')
                                            <span class="badge badge-warning">{{config('languageString.inactive') }}</span>
                                        @elseif ($product->status == 'approved')
                                            <span class="badge badge-danger">{{config('languageString.approved')}} </span>
                                        @elseif($product->status == 'rejected')
                                            <span class="badge badge-danger">{{config('languageString.rejected')}} </span>
                                        @elseif($product->status == 'pending')
                                            <span class="badge badge-danger">{{config('languageString.pending')}} </span>
                                        @elseif($product->status == 'out_of_stock')
                                            <span class="badge badge-danger">{{config('languageString.out_of_stock')}} </span>
                                        @endif
                                    </td> --}}
                                    <td>
                                        @if ($product->status == 'active')
                                            <span class=" badge badge-success" id="status_{{ $product->id }}">{{config('languageString.active')}}</span>
                                        @else
                                            <span class=" badge badge-warning" id="status_{{ $product->id }}">{{config('languageString.inactive')}} </span>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-icon-list">
                                            @if($product->status == 'active')
                                                <button data-id="{{$product->id}}"
                                                        class="status-change btn btn-warning btn-icon"
                                                        data-toggle="tooltip" data-status="inActive"
                                                        data-placement="top">
                                                    <em class="bx bx-refresh font-size-16 align-middle"></em>
                                                </button>
                                            @else
                                                <button data-id="{{$product->id}}"
                                                        class="status-change btn btn-success btn-icon"
                                                        data-toggle="tooltip" data-status="active" data-placement="top">
                                                    <em class="bx bx-refresh font-size-16 align-middle"></em>
                                                </button>
                                            @endif
                                            <button data-id="{{$product->id}}"
                                                    class="product-details btn btn-info btn-icon"
                                                    data-toggle="tooltip" data-placement="top"><em
                                                        class="bx bx-bullseye btn-btn-info p-2 m-2 text-white font-size-16 align-middle"></em>
                                            </button>
											<button data-id="{{ $product->id }}" class="product-Review-details btn btn-secondary btn-icon" data-effect="effect-fall" data-toggle="tooltip" data-placement="top" title="{{ config('languageString.product_reviews') }}"><em class="bx bx-bullseye font-size-16 align-middle"></em></button>

											<a href="{{ route('merchant.productImages', [$product->id]) }}" class="btn btn-info btn-icon" data-toggle="tooltip" data-placement="top" title="{{ config('languageString.product_images') }}"><em class="bx bx-image-add font-size-16 align-middle"></em></a>

                                            <a href="{{ route('merchant.products.edit', [$product->id]) }}"
                                               class="btn btn-info btn-icon"> <em
                                                        class="bx bx-pencil btn-btn-info p-2 m-2 text-white font-size-16 align-middle"></em>
                                            </a>
                                            <button data-id="{{$product->id}}"
                                                    class="delete-single btn btn-danger btn-icon"
                                                    data-toggle="tooltip" data-placement="top"><em
                                                        class="bx bx-trash"></em>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    @else
                        <h5 class="text-center">{{config("languageString.product_not_found")}}</h5>
                    @endif

                    <div class="mg-lg-b-30"></div>
                </div>
            </div>
            <div class="float-right">
                @if(count($products) > 0)
                    {{ $products->links() }}
                @endif
            </div>
        </div>

    </div>

    <div class="modal fade" id="globalModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"
                        id="globalModalTitle">{{ config('languageString.product_details') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="globalModalDetails"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary"
                            data-dismiss="modal">{{ config('languageString.close') }}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">

                <div class="modal-body" id="orderModalDetails"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary"
                            data-dismiss="modal">{{config('languageString.close')}}</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="sortModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-centered" role="document">

            <div class="modal-content">
                <form name="frmQA" method="POST">
                    <div class="modal-header">
                        <h5 class="modal-title" id="sortingModalTitle">Sorting</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="sortModalBody">

                    </div>
                    <div class="modal-footer">
                        <button type="button" id="btnSave" class="btn btn-primary">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" integrity=""></script>
    <script>
        // function getCheckValue() {
        //     var checkValue = $(this).type('id');
        //     console.log(checkValue);
        // }

        $("#category").on('change', function () {
            var value = $(this).val();
            window.location.href = APP_URL + '/productv2?sort_by=' + value;
        });

    </script>
    <script>
        const active = "{{ config('languageString.active') }}";
        const inactive = "{{ config('languageString.inactive') }}";
        const select_record = "{{ config('languageString.select_record') }}";
        const sweetalert_title = "{{ config('languageString.destroy_product').'?' }}";
        const sweetalert_text = "{{ config('languageString.sweetalert_text') }}";
        const status_msg = "{{ config('languageString.status_msg') }}";
        const confirmButtonText = "{{ config('languageString.yes_delete_it') }}";
        const cancelButtonText = "{{ config('languageString.no_cancel_plx') }}";
    </script>

    <script src="{{URL::asset('assets/js/custom/merchant/productsv2.js')}}?v-{{time()}}"></script>
@endsection