@extends('backend.layouts.app')
@section('title', $data['p_heading'])

@push('after-styles')
<style>
    .product-search {
        position: relative;
    }
    .product-search ul {
        position: absolute;
        background: #efefef;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .product-search ul li a {
        color: #000;
        display: block;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }
</style>
@endpush

@section('content')
    <div class="row">
        <div class="col">
            <div class="card">
                <div class="card-header">
                    <div class="float-left pt-2"><strong>{{ $data['p_heading'] }}</strong></div>
                    <div class="float-right">
                        <button class="btn btn-info" data-toggle="modal" data-target="#popularitemcreate">
                            <i class="fa fa-plus"></i>
                            Create Popular Products
                        </button>
                    </div>
                </div>
                <!--card-header-->
                <div class="card-body">
                    @if(sizeof($data['popular']) > 0)
                        <p>{{ $data['p_description'] }}</p>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <tbody>
                                    <tr>
                                        <th width="5%">ID</th>
                                        <th width="15%">Caption</th>
                                        <th width="25%">Name</th>
                                        <th width="15%">SKU</th>
                                        <th width="15%">Featured</th>
                                        <th width="15%">Position</th>
                                        <th width="10%">Actions</th>
                                    </tr>
                                    @foreach($data['popular'] as $row)
                                    <tr>
                                        <td>{{ $row->product->id }}</td>
                                        <td>{{ $row->caption }}</td>
                                        <td>{{ $row->product->name }}</td>
                                        <td>{{ $row->product->sku }}</td>
                                        <td>
                                            <label class="switch switch-label switch-outline-success-alt">
                                                <input type="checkbox" name="default" class="switch-input" @if($row->featured == 'Y') checked value="N" @else
                                                value="Y" @endif onclick="update_popular_product(this, {{ $row->id }}, 'featured');" />
                                                <span class="switch-slider" data-checked="&#x2713;" data-unchecked="&#x2715;"></span>
                                            </label>
                                        </td>
                                        <td><input type="number" class="form-control" value="{{ $row->pos }}"
                                                onblur="update_popular_product(this, {{ $row->id }}, 'pos');"></td>
                                        <td>
                                            <form method="POST" style="display: inline-block"
                                                action="{{ route('admin.popular-products.destroy', $row->id) }}"
                                                onsubmit="return window.confirm('Are you sure, you want to delete this record?');">
                                                @method('DELETE')
                                                @csrf
                                                <button type="submit" class="btn btn-danger btn-sm"><i
                                                        class="fa fa-trash "></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="clearfix">
                            <div class="pagination pagination-sm no-margin pull-right">
                                {!! $data['popular']->render() !!}
                            </div>
                        </div>
                    @else
                        <strong>Sorry!</strong>, no popular products found.
                    @endif
                </div>
                <!--card-body-->
            </div>
            <!--card-->
        </div>
        <!--col-->
    </div>
    <!--row-->

    <!-- Modal -->
    <div class="modal fade" id="popularitemcreate" tabindex="-1" role="dialog" aria-labelledby="popularitemcreateTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                {!! Form::open(array('route' => 'admin.popular-products.add', 'method' => 'POST')) !!}
                <input type="hidden" name="product_id" id="product_id" />
                <div class="modal-header">
                    <h5 class="modal-title" id="popularitemcreateTitle">Add Popular Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="">Caption</label>
                        <input type="text" name="caption" class="form-control" id="caption" autocomplete="off" />
                    </div>
                    <div class="form-group">
                        <label for="">Search Product</label>
                        <input type="text" name="product" class="form-control" id="product" onkeyup="changeProductById()" autocomplete="off" />
                        <div class="product-search">
                        </div>
                        <div class="mt-2">
                            <label for="sku">
                                <input type="radio" name="search_type" value="sku" id="sku" checked /> SKU
                            </label>
                            <label for="id">
                                <input type="radio" name="search_type" value="id" id="id" /> Product Id
                            </label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@stop

@push('after-scripts')
    <script>
        async function changeProductById()
        {
            let search_product = $('#product').val();
            let search_type = $('input[name=search_type]:checked').val();
            if(search_product.trim()!='')
            {
                await $.ajax({
                    url: '/admin/popular-products/find/'+search_product,
                    type: 'GET',
                    data: {search_type:search_type},
                    success: function (response) {
                        let showProducts = `<ul>`;
                        response.map(result => {
                            let text = `${result.id}`;
                            if(result.sku!='')
                            {
                                text += ` - ${result.sku}`;
                            }
                            text += ` - ${result.name}`;
                            text = text.replaceAll(`"`,`&quot;`);
                            showProducts += `<li>
                                <a href="javascript:void(0)" onclick="setProduct(${result.id}, '${text}')">${text}</a>
                            </li>`;
                        });
                        showProducts += `</ul>`;
                        $('.product-search').html(showProducts);
                    }
                });
            }
            else
            {
                $('#product_id').val('');
                $('.product-search').html('');
            }
        }

        function setProduct(id, name)
        {
            $('#product').val(name);
            $('#product_id').val(id);
            $('.product-search').html('');
        }

        function update_popular_product(self, id, type)
        {
            let value = self.value;
            if(type=='featured')
            {
                value = self.checked==true ? 'Y' : 'N';
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                url: '/admin/popular-products/update/',
                type: 'POST',
                data: {
                        value: value,
                        id:id,
                        type:type
                    },
                success: function (response) {
                    
                }
            })
        }
    </script>
@endpush