@extends('admin.layout.app')

@section('content')
<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Products</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="javascript:void(0)">Products</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">

                            <!-- [ Hover-table ] start -->
                            <div class="col-xl-12">

                                @include('admin.layout.session')

                                <div class="card">
                                    <div class="card-header">
                                        <h5>Products</h5>

                                        <div class="d-inline-block dropdown float-right">
                                            <!-- Import CSV File Start-->
                                            <div class="d-inline-block dropdown float-left">
                                                <form class="form-inline" method="post" action="{{route('admin.products.import')}}" enctype="multipart/form-data">
                                                @csrf
                                                    <label class="btn btn-glow-secondary btn-secondary btn-sm"><i class="feather icon-file"></i>
                                                        <span class="file-name">Import Products</span>
                                                        <input type="file" name="file" id="file" style="display: none;">
                                                    </label>
                                                    <button class="btn btn-glow-dark btn-dark btn-sm btn-import d-none" type="submit"><i class="feather icon-download"></i>Import</button>
                                                    <a class="btn btn-glow-danger btn-danger btn-sm btn-cancle d-none text-white">Cancle</a>
                                                </form>
                                            </div>
                                            <!-- Import CSV File End-->
                                            <a href="javascript:void(0)" class="btn btn-glow-secondary btn-secondary btn-sm product_export_btn"><i class="feather icon-upload"></i> Export Products</a> 
                                            @can('add_products')
                                                <a href="{{ route('admin.products.create') }}" class="btn btn-glow-primary btn-primary btn-sm"><i class="feather icon-plus-circle"></i>Add New Product</a>
                                            @endcan

                                            @can('delete_products')
                                                <button class="btn btn-glow-danger btn-danger btn-sm product_bulk_delete" data-url="{{ route('admin.products.bulkremove') }}"><i class="feather icon-trash-2"></i>Bulk Delete</button>
                                            @endcan

                                        </div>
                                    </div>
                                    <div class="card-block table-border-style">
                                        <form action="{{route('admin.products.export')}}" method="post" class="product_export_data_form">
                                        @csrf
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Categories</label>
                                                    <select class="form-control category_id">
                                                        <option value="0">- All categories -</option>
                                                        @forelse($categories as $category)
                                                            <option value="{{$category->id}}">{{strtoupper($category->category_name)}}</option>
                                                        @empty
                                                        @endif
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Sub Categories (Licence)</label>
                                                    <select class="form-control subcategory_id">
                                                        <option value="0">- Select subcategory -</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label>Status</label>
                                                    <select class="form-control status">
                                                        <option value="">- All status -</option>
                                                        <option value="1">Active</option>
                                                        <option value="0">Deactive</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="table-responsive Recent-Users">
                                            <table class="table table-hover product_datatable">
                                                <thead>
                                                    <tr>
                                                        @can('delete_products')
                                                          <th>#</th>
                                                        @endcan
                                                        <th>Category</th>
                                                        <th>SubCategory</th>
                                                        <th>Product Name</th>
                                                        <th>Product Price</th>
                                                        <th>Product Image</th>
                                                        <th>Status</th>
                                                        <th>Publish On</th>
                                                        @if(auth()->user()->can('edit_products') || auth()->user()->can('delete_products'))
                                                          <th>Action</th>
                                                        @endif
                                                    </tr>
                                                </thead>
                                            </table>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Hover-table ] end -->


                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->
@endsection

@push('js')
<script type="text/javascript">
$(function(){
    $('.products').addClass('active');

    var oTable = $('.product_datatable').DataTable({
        processing: false,
        serverSide: true,
        ajax: {
            url: '{!! route('admin.products.datatable') !!}',
            data: function (d) {
                //for category
                var category_id = $('.category_id option:selected').val();
                if (typeof category_id == 'undefined' && category_id !== null && category_id !== ''){
                    category_id = 0;
                }
                d.category_id = category_id;

                //for subcategory_id
                var subcategory_id = $('.subcategory_id option:selected').val();
                if (typeof subcategory_id == 'undefined' && subcategory_id !== null && subcategory_id !== ''){
                    subcategory_id = 0;
                }
                d.subcategory_id = subcategory_id;

                //for status
                var status = $('.status option:selected').val();
                if(typeof(status) != "undefined" && status !== null && status !== '') {
                    d.status = status;
                }
            }
        },
        columns: [
            @can('delete_products')
            {data: 'id', sortable: false, orderable: false, searchable: false},
            @endcan
            {data: 'category_id', name: 'category_id', sortable: true, orderable: true, searchable: true},
            {data: 'subcategory_id', name: 'subcategory_id', sortable: true, orderable: true, searchable: true},
            {data: 'product_name', name: 'product_name', sortable: true, orderable: true, searchable: true},
            {data: 'price', name: 'price', sortable: true, orderable: true, searchable: true},
            {data: 'product_image', name: 'product_image', sortable: true, orderable: true, searchable: true},
            {data: 'status', name: 'status', sortable: true, orderable: true, searchable: true},
            {data: 'publish_date', name: 'publish_date', sortable: true, orderable: true, searchable: true},
            // {data: 'created_at', name: 'created_at', sortable: true, orderable: true, searchable: true},
            @if(auth()->user()->can('edit_products') || auth()->user()->can('delete_products'))
            {data: 'action', sortable: false,searchable: false},
            @endif
        ],
        @can('delete_products')
        columnDefs: [
            {
                targets: 0,
                checkboxes:{
                    selectRow: true
                }
            }
        ],
        
        @endcan

        @if(!auth()->user()->can('edit_products') && !auth()->user()->can('delete_products'))
            order: [[6, 'desc']],
        @elseif(auth()->user()->can('edit_products') && auth()->user()->can('delete_products'))
            order: [[7, 'desc']],
        @elseif(auth()->user()->can('edit_products'))
            order: [[6, 'desc']],
        @elseif(auth()->user()->can('delete_products'))
            order: [[7, 'desc']],
        @endif
        "pagingType": "full_numbers",
        "language": {
            // "emptyTable": "No fees",
            "search": '<span>Filter:</span> _INPUT_',
            "lengthMenu": '<span>Show:</span> _MENU_',
            "searchPlaceholder": "Search..."
            // "paginate": { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }
        },
        autoWidth: false,
        'fnDrawCallback': function( oSettings ) {
        },
        'rowCallback': function(row, data, dataIndex){
            var rowId = data['id'];
            $(row).find('input[type="checkbox"]').attr('name', 'product_ids[]');
            $(row).find('input[type="checkbox"]').val(rowId);
        },
        "lengthMenu": [[10, 25, 50, 100, 150, 200, 500, 1000, -1], [10, 25, 50, 100, 150, 200, 500, 1000, "All"]],
        responsive: true,
        // responsive: {
        //     details: {
        //         display: $.fn.dataTable.Responsive.display.modal( {
        //             header: function ( row ) {
        //                 var data = row.data();
        //                 return 'Details for '+data['first_name']+' '+data['last_name']+' ('+data['business_name']+')';
        //                 $('[data-toggle="tooltip"]').tooltip();
        //             }
        //         } ),
        //         renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
        //             tableClass: 'table'
        //         } )
        //     }
        // }
    });


    $(document.body).on('click','.product_bulk_delete',function(){
        var me = $(this);
        var id = [];
        var rows_selected = oTable.column(0).checkboxes.selected();
        //id = rows_selected.join(",").split(",");
        $.each(rows_selected, function(index, rowId){
            id.push(rowId);
        });
        bulkDelete(me, '.product_datatable', id);
    });

    //Category filter
    $(document.body).on('change', '.category_id', function(e){
        var category_id = $(this).val()
        if(category_id == ''){
            alert('Please select category');
            return false
        }
        showLoader();

        $.ajax({
            type: 'get',
            url: '{{route("get-SubCategories")}}',
            data: {
                'category_id': category_id,
            },
            dataType: 'json',
            success:function(response){
                // console.log(response);
                if(response.status == 'success'){
                    $(".subcategory_id").html(response.data);
                }else{
                    $(".subcategory_id").html('<option value="0">- Select subcategory -</option>');
                }
                hideLoader();
                oTable.draw();
                e.preventDefault();
            }
        });


    });

    //Sub Category filter
    $(document.body).on('change', '.subcategory_id', function (e) {
        oTable.draw();
        e.preventDefault();
    });

    //Status filter
    $(document.body).on('change', '.status', function (e) {
        oTable.draw();
        e.preventDefault();
    });


    // import / export
    $(document.body).on('click', '.product_export_btn', function (e) {
      $(".product_export_data_form").submit();
    });

    $("#file").change(function() {
        filename = this.files[0].name
        $(".file-name").text(filename);
        $(".btn-import").removeClass("d-none");
        $(".btn-cancle").removeClass("d-none");
    });

    $(".btn-cancle").click(function() {
        document.getElementById('file').value = '';
        $(".file-name").text('Import Products');
        $(".btn-import").addClass("d-none");
        $(".btn-cancle").addClass("d-none");
    });

    // function getSelected() {
    //     var selectedIds = oTable.columns().checkboxes.selected()[0];
    //     console.log(selectedIds)
    // }

});
</script>
@endpush