@extends('layouts.layout')
@section('body_class', 'nav-md')
@section('body_content')
    <div class="container body">
        <div class="main_container">
            @include('includes.sidebar')
            <div class="right_col" role="main">
                <div class="page-title">
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="title_left">
                                <h3><i class="fa fa-cubes"></i> Webstore Product List</h3>
                            </div>
                        </div>
                        <div class="col-sm-4 text-right">
                            @if($request['store_channel'] != 'sukha')
                                <button class="btn btn-success" onclick="AddProductModal()">Add Product</button>
                            @endif
                            @if($request['store_channel'] == 'sukha')
                                <button class="btn btn-success" onclick="AddProductSukhaModal()">Add Product</button>
                            @endif
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>Filter</h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <form id="form_filter" class="form-horizontal">
                                    {{--
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Start date :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="date" class="form-control" name="start"
                                                value="{{ $request['start'] }}" />
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">End date :</label>
                                        <div class="col-xs-12 col-sm-10">
                                            <input type="date" class="form-control" name="end"
                                                value="{{ $request['end'] }}" />
                                        </div>
                                    </div>
                                    --}}
                                    
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Store Channel :</label>
                                        <div class="col-xs-6 col-sm-4">
                                            <select name="store_channel" id="store_channel" class="form-control" value="{{ $request['store_channel'] }}">
                                                <option value="lakushop" {{ $request['store_channel'] == 'lakushop' ? 'selected' : '' }}>Lakushop</option>
                                                <option value="sukha" {{ $request['store_channel'] == 'sukha' ? 'selected' : '' }}>Livin Sukha</option>
                                            </select>
                                        </div>
                                    </div> 

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Status :</label>
                                        <div class="col-xs-12 col-sm-4">
                                            <select class="form-control" name="status">
                                                <option value="all">All Status</option>
                                                <option value="1" {{ $request['status'] == '1' ? 'selected' : '' }}>Active</option>
                                                <option value="0" {{ $request['status'] == '0' ? 'selected' : '' }}>Nonactive</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-2 control-label">Product Type :</label>
                                        <div class="col-xs-12 col-sm-4">
                                            <select class="form-control" name="vocType">
                                                <option value="all">All Type</option>
                                                <option value="vocNominal" {{ $request['vocType'] == 'vocNominal' ? 'selected' : '' }}>Voucher Digital Nominal</option>
                                                <option value="vocElite" {{ $request['vocType'] == 'vocElite' ? 'selected' : '' }}>Voucher Elite</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="submit" class="btn btn-warning"><i class="fa fa-search"></i>
                                                Search</button>
                                        </div>
                                    </div>
                                </form>
                                <hr>
                                <table class="table table-bordered table-striped">
                                    <tr>
                                        <th>No</th>
                                        <th>Status</th>
                                        <th>Name</th>
                                        {{-- <th>Description</th> --}}
                                        <th>SKU</th>
                                        
                                        @if($request['store_channel'] != 'sukha')
                                            <th class="text-center">Category</th>
                                        @endif
                                        <th class="text-right">Price</th>
                                        <th class="text-right">Fix Price</th>
                                        <th class="text-center">Thumbnail</th>
                                        <th class="text-center">Action</th>
                                    </tr>
                                    @php
                                        $no = 1;
                                    @endphp
                                    @forelse($products as $product)
                                        <tr>
                                            <td>{{ $no++ }}</td>
                                            <td>
                                                @if($product->status == '1')
                                                    <span style="font-weight: normal; color: #66BB6A;"><i class="fa fa-check"></i> Active</span>
                                                @else
                                                    <span style="font-weight: normal; color: #D32F2F;"><i class="fa fa-times"></i> Not Active</span>
                                                @endif
                                            </td>
                                            <td>
                                                {{ $product->name }}
                                            </td>
                                            {{-- <td>{!! $product->description !!}</td> --}}
                                            <td>{{ $product->sku }}</td>
                                            
                                            @if($request['store_channel'] != 'sukha')
                                                <td>{{ $product->category->name }}</td>
                                            @endif
                                            <td style="text-decoration: line-through; color: #999;" class="text-right">{{ number_format($product->price) }}</td>
                                            <td class="text-right">{{ number_format($product->current_price) }}</td>
                                            <td class="text-center">
                                                @if($product->img_thumbnail)
                                                    <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/ecommerce/product/' . $product->img_thumbnail }}" width="60">
                                                @else
                                                    <img src="{{ asset('images/no-img.jpg') }}" width="60">
                                                @endif
                                                    <hr style="margin: 3px 0;">    
                                                    <div class="product-images">
                                                @foreach ($product->product_image as $image)
                                                    <div class="d-flex align-items-center mb-2" style="margin-bottom: 5px;">
                                                        <img src="{{ env('ALIYUN_OSS_IMAGE_URL') . '/ecommerce/product/' . $image->img_name }}" width="60" class="me-2">
                                                             <button class="btn btn-danger" 
                                                                onclick="deleteProductImage('{{ $image->id }}', '{{ $request->store_channel }}')">
                                                                <i class="fa fa-trash fa-1x"></i>
                                                            </button>
                                                    </div>
                                                @endforeach
                                                @if($product->product_image->count() <=2 && $request['store_channel'])
                                                    <div class="mt-3">
                                                        <button class="btn btn-success btn-sm" onclick="editThumbnailModal('{{ $product->id }}', '{{ $request->store_channel }}')">
                                                            <i class="fa fa-plus"></i> 
                                                        </button>
                                                    </div>
                                                @endif
                                            </div>
                                            </td>
                                            <td class="text-center">
                                            @if($request['store_channel'] == 'lakushop')
                                                <button class="btn btn-warning" onclick="editProductModal('{{ $product->id }}', '{{ $request->store_channel }}')"><i class="fa fa-pencil fa-1x"></i></button>
                                                <button class="btn btn-danger" onclick="deleteProduct('{{ $product->id }}')"><i class="fa fa-trash fa-1x"></i></button>
                                            @elseif($request['store_channel'] == 'sukha')
                                                <button class="btn btn-warning" onclick="editProductSukhaModal('{{ $product->id }}', '{{ $request->store_channel }}')"><i class="fa fa-pencil fa-1x"></i></button>
                                                <button class="btn btn-danger" onclick="deleteProductSukha('{{ $product->id }}')"><i class="fa fa-trash fa-1x"></i></button>
                                            @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="10">No data</td>
                                        </tr>
                                    @endforelse
                                </table>

                                {{-- <div>{{ $request_lists->appends($_GET)->links() }}</div> --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('includes.footer')
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="formAddProduct" role="dialog" aria-labelledby="formAddProduct" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formAddProductContent" class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade" id="formEditProduct" role="dialog" aria-labelledby="formEditProduct" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formEditProductContent" class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade" id="formThumbnail" role="dialog" aria-labelledby="formThumbnail" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formThumbnailContent" class="modal-content">
            </div>
        </div>
    </div>
<!-- Modal sukha-->
    <div class="modal fade" id="formAddProductSukha" role="dialog" aria-labelledby="formAddProductSukha" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formAddProductSukhaContent" class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade" id="formEditProductSukha" role="dialog" aria-labelledby="formEditProductSukha" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formEditProductSukha" class="modal-content">
            </div>
        </div>
    </div>
    <div class="modal fade" id="formThumbnail" role="dialog" aria-labelledby="formThumbnail" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div id="formThumbnailContent" class="modal-content">
            </div>
        </div>
    </div>
@endsection


@section("scripts")
    @include('includes.helper_js')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
    <script type="text/javascript">
        function AddProductModal() {
            $('#cover-spin').fadeIn();
            $.ajax({
                url: "{{ url('webstore/product/form-add') }}",
                method: "GET",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    $('#formAddProductContent').html(response);
                    $('.summernote').summernote( {
                        height: 250
                    });
                    $('#formAddProduct').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }

        function AddProductSukhaModal() {
            $('#cover-spin').fadeIn();
            $.ajax({
                url: "{{ url('webstore/product/form-add-sukha') }}",
                method: "GET",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    $('#formAddProductSukhaContent').html(response);
                    $('.summernote').summernote( {
                        height: 250
                    });
                    $('#formAddProductSukha').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }

        function editProductModal(productId, storeChannel) {
            $('#skuEditData').show();
            $('#skuForm').hide();
            $('#cover-spin').fadeIn();
            $.ajax({
                url: "{{ url('webstore/product/form-edit') }}/" + productId + "?store_channel=" + storeChannel,
                method: "GET",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    $('#formEditProductContent').html(response);
                    $('.summernote').summernote( {
                        height: 250
                    });
                    // getSKU();
                    
                    // $('.branch_manager_id').val(data.branch_manager_id).change();

                    $('#formEditProduct').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }

        function editProductSukhaModal(productId, storeChannel) {
            $('#skuEditSukhaData').show();
            $('#skuSukhaForm').hide();
            $('#cover-spin').fadeIn();
            $.ajax({
                url: "{{ url('webstore/product/form-edit-sukha') }}/" + productId + "?store_channel=" + storeChannel,
                method: "GET",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success: function(response) {
                    $('#formEditProductContent').html(response);
                    $('.summernote').summernote( {
                        height: 250
                    });
                    // getSKU();
                    
                    // $('.branch_manager_id').val(data.branch_manager_id).change();

                    $('#formEditProduct').modal('show');
                    $('#cover-spin').hide();
                },
                error: function(response) {
                    var response = response.responseJSON;
                    alert(response.error);
                    $('#cover-spin').hide();
                }
            });
        }

        function editThumbnailModal(productId, storeChannel) {
                $('#cover-spin').fadeIn();

                $.ajax({
                    url: "{{ url('webstore/product/form-thumbnail') }}/" 
                        + productId + "?store_channel=" + storeChannel,
                    method: "GET",
                    headers: { 
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
                    },
                    success: function(response) {
                        $('#formThumbnailContent').html(response);
                        $('#formThumbnail').modal('show');
                        $('#cover-spin').hide();
                    },
                    error: function(response) {
                        alert('Terjadi error');
                        $('#cover-spin').hide();
                    }
                });
            }

        function getSKU() {
            // console.log('trigger getSKU');
            let category = $('#category').val();
            // console.log(category);
            $('#skuForm').html('<i class="fa fa-2x fa-pulse fa-spinner"></i> Loading SKU list . . .');
            
            setTimeout(function() {
                $('#skuForm').html('<select name="sku" id="sku" class="form-control"><option value="">Choose SKU</option></select>');
                globalCRUD.select2Static("#sku", '/webstore/product/get-sku?category=' + category);
            }, 2000)
        }

        // function getSKUsukha() {
        //     // console.log('trigger getSKUsukha');
        //     let category_sku = $('#category_sku').val();
        //     console.log(category_sku);
        //     $('#skuFormSukha').html('<i class="fa fa-2x fa-pulse fa-spinner"></i> Loading SKU list . . .');
            
        //     setTimeout(function() {
        //         $('#skuFormSukha').html('<select name="sku_sukha" id="sku_sukha" class="form-control"><option value="">Choose SKU</option></select>');
        //         globalCRUD.select2Static("#sku_sukha", '/webstore/product/get-sku-sukha?category_sku=' + category_sku);
        //     }, 2000)
        // }
        

        function deleteProduct(productId) {
            $('#cover-spin').fadeIn();
            if (confirm("Apakah Anda yakin ingin menghapus SKU ini ?") == true) {
                window.location = "{{ url('webstore/product/delete') }}/" + productId;
            } 
        }

        function deleteProductSukha(productId) {
            $('#cover-spin').fadeIn();
            if (confirm("Apakah Anda yakin ingin menghapus SKU ini ?") == true) {
                window.location = "{{ url('webstore/product/delete_sukha') }}/" + productId;
            } 
        }

        function showInputSKU() {
            $('#skuEditData').hide();
            $('#skuForm').fadeIn();
            getSKU();
        }

        function showInputSKUSukha(){
            $('#skuEditSukhaData').hide();
            $('#skuFormSukha').fadeIn();
            getSKUsukha();
        }

       function deleteProductImage(imageId, storeChannel) {
            $('#cover-spin').fadeIn();

            if (confirm("Apakah Anda yakin ingin menghapus image ini ?")) {
                window.location.href = "{{ url('webstore/product/delete_image') }}/" 
                    + imageId + "?store_channel=" + storeChannel;
            }

        }

    </script>
@endsection