{{-- mainLayouts extends --}}
@extends('layouts.contentLayoutMaster')

{{-- Page title --}}
@section('title', 'Products')

{{-- vendors styles --}}
@section('vendor-style')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/flag-icon/css/flag-icon.min.css')}}">
<link rel="stylesheet" type="text/css"href="{{asset('vendors/data-tables/extensions/responsive/css/responsive.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/select.dataTables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/data-tables/css/jquery.dataTables.min.css')}}">
@endsection

{{-- page styles --}}
@section('page-style')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/page-users.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/data-tables.css')}}">
@endsection

@section('content')
<!-- merchants list start -->
<section class="users-list-wrapper section">
    <div class="users-list-table">
        <div class="card">
            <div class="row pl-1 pr-1">
                <div class="col s4">
                    <h5><b>Product</b></h5>
                </div>
                <div class="input-field col s5">
                    <form action="{{ route('admin.products.index') }}" method="get" id="report-search-form">
                        <input class="search-keyword" type="text" name="keyword" id="keyword" value="{{ request('keyword') ?? '' }}" placeholder="Search...">
                        <i class="material-icons prefix custom-search-icon">search</i>
                    </form>
                    <a class="modal-trigger" href="#modal1">
                        <i class="material-icons prefix custom-filter-icon">filter_list</i>
                    </a>
                </div>
                <div class="col s3 mt-2">
                    <a href="{{ route('admin.products.create') }}" class="btn waves-effect waves-light border-radius-button right mr-7"><i class="material-icons left">list</i> Add Product </a>
                </div>
            </div>
            <div class="card-content pt-0 pl-0 pr-0">
                <!-- datatable start -->
                <div class="responsive-table">
                    <div class="center">
                        {{ $products->withQueryString()->links() }}
                    </div>
                    <table id="users-list-datatable" class="table responsive-table striped">
                        <thead class="grey lighten-2">
                            <tr>
                                <th class="center">#</th>
                                <th>Name</th>
                                <th>Image</th>
                                <th style="padding: 15px 15px 0 0">Normal Price</th>
                                <th style="padding: 15px 20px 0 0">Discounted Price</th>
                                <th style="padding: 15px 2em 0 0!important;">Merchant Price</th>
                                <th>Quantity</th>
                                <th>Is Bestdeal</th>
                                <th>Category</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody style="font-size: 0.8em">
                            @forelse ($products as $key => $product)
                            <tr>
                                <td class="center" style="width: 5%">{{ $key + $products->firstItem()}}</td>
                                <td style="width: 10%">{{ $product->model }}</td>
                                <td style="width: 10%">
                                    @if (isset($product->images[0]))
                                        <img src="{{$product->images[0]->full_image}}" class="circle" alt="product image" width="75" height="75">
                                    @else
                                        <img src="{{ asset('images/profile.png') }}" alt="product image" width="75" height="75">
                                    @endif
                                </td>
                                <td style="width: 5%">{{ $product->inventory && $product->inventory->normal_price ? $product->inventory->normal_price : '-' }}</td>
                                <td>{{ $product->inventory && $product->inventory->discounted_price ? $product->inventory->discounted_price : '-' }}</td>
                                <td style="padding: 0;width: 10%">
                                    @foreach ($product->prices as $price)
                                    <span style="display: block"> {{ $price->merchantClass->name }} - {{ number_format($price->price) }}</span>
                                    @endforeach
                                </td>
                                <td style="width: 10%">{{ $product->inventory && $product->inventory->actual_stock ? $product->inventory->actual_stock : '-' }}</td>
                                <td style="width: 10%">{{ $product->is_bestdeal == 1 ? 'Yes' : 'No' }}</td>
                                <td style="width: 10%">{{ $product->category->name }} @if($product->category->is_customer_also == '1' && $product->category->is_merchant_also == '1') (Customer & Merchant) @elseif($product->category->is_customer_also == '1') (Customer) @elseif($product->category->is_merchant_also == '1') (Merchant) @endif</td>
                                <td style="width: auto">
                                    <div class="custom-d-flex align-items-center justify-content-center">
                                        <i class="material-icons left mt-2">
                                            <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.products.show', $product->id) }}" style="padding: 6px 10px;">remove_red_eye</a>
                                        </i>
                                        <i class="material-icons left mt-2">
                                            <a class="blue lighten-4 border-radius-button z-depth-1" href="{{ route('admin.products.edit', $product->id) }}" style="padding: 6px 10px;">edit</a>
                                        </i>

                                        @if (count($product->orderDetails) > 0 || count($product->serviceRequests) > 0)
                                            <button onclick="M.toast({html: 'Cannot Delete This Product'})" class="btn waves-effect waves-light red darken-2 border-radius-button" type="button" name="action" style="padding: 0px 16px;"><i class="material-icons">delete_forever</i></button>
                                        @elseif(count($product->carKnowledges) > 0)
                                            <button onclick="M.toast({html: 'Please delete Car Knowledge First'})" class="btn waves-effect waves-light red darken-2 border-radius-button" type="button" name="action" style="padding: 0px 16px;"><i class="material-icons">delete_forever</i></button>
                                        @else
                                            <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" onsubmit="return confirm('Are You Sure?');" style="display: inline-block;">
                                                <input type="hidden" name="_method" value="DELETE">
                                                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                <button class="btn waves-effect waves-light red darken-2 border-radius-button" type="submit" name="action" style="padding: 0px 16px;"><i class="material-icons">delete_forever</i></button>
                                            </form>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="7">No Products Found!</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="center">
                        {{-- {{ $products->withQueryString()->links() }} --}}
                    </div>
                </div>
                <!-- datatable ends -->
            </div>
        </div>
        <div id="modal1" class="modal big-size-modal modal-fixed-header">
            <form action="{{ route('admin.products.index') }}" method="get">
                <div class="modal-filter-header modal-header pt-1">
                    <div class="col s8 custom-d-flex">
                        <h5 class="m-0 pr-2 custom-border-right"><b>Product Filter</b></h5>
                        <a href="#" class="mt-1 pl-2 clear-filter" id="clearFilter">Clear Filter</a>
                    </div>
                    <div class="col s4">
                        <a href="javascript:void(0)" class="right modal-close">
                            <i class="material-icons prefix custom-close-icon">close</i>
                        </a>
                        <button class="right btn waves-effect waves-light red border-radius-10 mr-4" type="submit">Filter</button>
                    </div>
                </div>
                <div class="modal-content modal-content-bg">
                    <div class="modal-filter-body">
                        <div class="row">
                            <div class="col s3  mb-3 custom-border-right">
                                <h6><b>Battery Type</b></h6>
                                <div >
                                    @forelse ($categories as $category)
                                        <div>
                                            <div onclick="checkFilter({{ $category->id }}, 'category')" id="filter-box-category-{{ $category->id }}" class="filter-box mb-3 @if(request('category_ids') && in_array($category->id, request('category_ids'))) box-checked @endif">{{ $category->name }}</div>
                                            <input type="checkbox" value="{{ $category->id }}" name="category_ids[]" id="filter-check-category-{{ $category->id }}" class="filter-check" @if(request('category_ids') && in_array($category->id, request('category_ids'))) checked="checked" @endif>
                                        </div>
                                    @empty

                                    @endforelse
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </section>
    <!-- products list ends -->
    @endsection
    {{-- vendor scripts --}}
    @section('vendor-script')
    <script src="{{asset('vendors/data-tables/js/jquery.dataTables.min.js')}}"></script>
    <script src="{{asset('vendors/data-tables/extensions/responsive/js/dataTables.responsive.min.js')}}"></script>
    <script src="{{asset('vendors/data-tables/js/dataTables.select.min.js')}}"></script>
    <script>
        $(document).ready(function(){
            $('.modal').modal();
        });
        function checkFilter(id, type) {
            var filter_box = "#filter-box-" + type + '-' + id;
            var filter_check = "#filter-check-" + type + '-' + id;

            if ($(filter_box).hasClass("box-checked")) {
                $(filter_box).removeClass("box-checked");
                $(filter_check).removeAttr('checked');
            } else {
                $(filter_box).addClass("box-checked");
                $(filter_check).attr('checked', 'checked');
            }
        }

        $('#clearFilter').on('click', function() {
            $('.filter-box').removeClass('box-checked');
            $('.filter-check').removeAttr('checked');
            $('.date-filter').val('');
        })

        function Close() {
            $('.modal').modal().hide();
        }

    </script>

    @endsection

    {{-- page script --}}
    @section('page-script')
    <script src="{{asset('js/scripts/data-tables.js')}}"></script>
    @endsection