@extends('layouts.app')
<!-- BEGIN CONTENT -->
@section('content')
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="top_bar page-content">
        <div class="top_status_bar">
            <div id="top_progress_bar" class="progress_bar">
            </div>
        </div>
        <div class="breadcrumbs">
            <ul>
                <li><a href="{{route('admin.dashboard')}}">HOME</a></li>
                <li><a href="{{route('admin.products.index')}}">Product List</a></li>
            </ul>
            <button class="btn btn-large pull-right help theme_btn help_btn">?</button>
        </div>
    </div>

    <div class="page-content">
        <div class="portlet">
        <div class="container">
        <!-- Flash Message -->
        @if(session('growl'))
            <div class="alert alert-{{ session('growl')[1] }} alert-dismissible">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
              {{ session('growl')[0] }}
            </div>
        @endif
    </div>  <!-- BEGIN PAGE HEADER-->
            <div class="portlet-title page_heading">
                <div class="row">
                    <div class="col-md-8">
                        <div class="caption">
                            <h2 style="font-weight: 600; margin-top: 0;">Product List</h2>
                            <span class="subtitle"> All the products under your selected branch listed here, you can
                                edit, disable or manage from here.</span>
                        </div>
                    </div>

                    <div class="col-md-4 text-right">
                        @php ($get_permission = permission('product','full-permission'))
                        @if($get_permission)
                        <a href="{{ route('admin.download.sample.productexcel') }}" class="btn">Download Sample Excel</a>
                        <a href="#" class="btn "><button class="upload_excel" id="upload_excel" data-target="#modelWindow" class="btn theme_btn_round">Upload Excel</button></a>
                        <a href="{{url('admin/products/create')}}" class="btn theme_btn_round">Add New</a>
                        @endif
                        
                    </div>
                </div>
            </div>
            <!-- BEGIN PAGE BAR -->
            <div class="row">
                <div class="col-md-12">
                    <!--THIS IS CONTENT DIV START-->
                    <div class="portlet-body flip-scroll">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="table-container" style="padding: 50px 0 0;">
                                    <table class="table table-striped table-bordered table-hover datatables_simple" id="product_table">
                                        <thead class="flip-content thead">
                                            <tr>
                                                <th style="vertical-align: top; width: 100px;"></th>
                                                <th> Name</th>
                                                <th> Category </th>
                                                <th> Tags</th>
                                                <th> Stock</th>
                                                <th> SKU</th>
                                                <th> Status</th>
                                                <th class="text_right"> Cost</th>
                                                <th class="text_right"> Retail</th>
                                                <th> Bar Code</th>
                                                <th> Selling Unit</th>
                                                <th style="position: relative; width: 25px;">
                                                    <img class="dots_menu_grey" style="width: inherit" src="{{asset('assets/global/img/dots_menu_grey.png')}}">
                                                </th>

                                            </tr>
                                        </thead>
                                        <tbody class="tbody">
                                            <!--=====================-->

                                            <!--=====================-->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--THIS IS CONTENT DIV END-->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- //SWEET_ALERT START// -->
<div id="sweetalert_wrap" class="sweet_alert_wrap">
    <!-- Sweet alert -->
    <div class="sweet-alert showSweetAlert" data-custom-class="" data-has-cancel-button="true" data-has-confirm-button="true" data-allow-outside-click="false" data-has-done-function="true" data-animation="pop" data-timer="null">
        <div class="sa-icon sa-warning pulseWarning" style="display: block;">
            <span class="sa-body pulseWarningIns"></span>
            <span class="sa-dot pulseWarningIns"></span>
        </div>
        <h2>Do you want to delete?</h2>
        <div class="sa-button-container">
            <button class="cancel" tabindex="2">Cancel</button>
            <div class="sa-confirm-button-container">
                <button class="confirm" tabindex="1">Confirm</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade bs-modal" id="item_received" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"></div>

<div class="modal fade" id="modelWindow" role="dialog">
    <div class="modal-dialog modal-sm vertical-align-center">
        <form enctype="multipart/form-data" method="POST" id="form-excel-upload1" action="{{ route('admin.product-bulk-uploads') }}">
            <div class=" modal-content excel-modal">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Upload from Excel</h4>
                </div>
                <div class="modal-body">
                    <input type="file" name="upload_excel" class="form-control file" autocomplete="off" required>
                    @csrf
                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-default cancel-excel" value="Cancel">
                    <input type="submit" class="btn btn-default submit-excel" value="Save File">
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
@section('admin_css')
<link href="{{asset('assets/global/plugins/select2/css/select2.min.css" rel="stylesheet')}}" type="text/css" />
<link href="{{asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/global/plugins/datatables/datatables.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('css/sweetalert.css')}}" rel="stylesheet" type="text/css" />
<style>
    table.dataTable.no-footer {
        border: none;

    }

    #product_table td:nth-child(8),
    #product_table td:nth-child(9) {
        text-align: right;
    }

    .upload_excel {
        background-color: #37c6d3;
        border-radius: 5px;
        border: none;
        color: white;
        height: 32px;
        float: left;
        margin-right: 23px;
        padding: 0px 10px 0px 10px;
    }

    .excel-modal {
        width: 500px;
    }

    .submit-excel {
        background-color: #37c6d3;
        color: white;
    }
</style>
@stop
@section('admin_js')
<script src="{{asset('assets/global/plugins/select2/js/select2.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/datatables.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/plugins/datatables/plugins/bootstrap/datatables.bootstrap.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/global/scripts/sweetalert.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

        //Delete Product
        //    $(document).on('click', '.delete_product', function (e){
        //        e.preventDefault();
        //        var url = $(this).attr('href');
        //        $.ajax({
        //            url: url,
        //            headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}'},
        //            method: 'DELETE',
        //            success: function(res){
        //                if(res.status == 1000){
        //                    oTable.ajax.reload();
        //                    alertbox('success', res.message);
        //                }
        //                if(res.status == 3000){
        //                    alertbox('danger', res.message);
        //                }
        //            }
        //        });
        //    });

        setTimeout(function() {
            $(".alert-dismissible").fadeOut("slow");
        }, 3000);

        
        $(document).on('click', '.cancel-excel', function(e) {
            $("#modelWindow").modal('hide');
        });
        $("#form-excel-upload1").submit(function(){
            $(".submit-excel").attr("disabled", true).val("Uploading...");
        });

        //Delete brand Script
        $(document).on('click', '.delete_product', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            $('#sweetalert_wrap').show();
            $('#sweetalert_wrap').find(".confirm").attr("url", url);
        });
        $(document).on("click", '.cancel', function() {
            $('#sweetalert_wrap').find(".confirm").removeAttr("url");
            $('#sweetalert_wrap').hide();
            return false;
        });
        $(document).on("click", '.confirm', function() {
            var url = $(this).attr("url");
            $.ajax({
                url: url,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                method: 'DELETE',
                success: function(res) {
                    if (res.status == 1000) {
                        oTable.ajax.reload();
                        alertbox('success', res.message);
                        $('#sweetalert_wrap').hide();
                    }
                    if (res.status == 3000) {
                        $('#sweetalert_wrap').hide();
                        alertbox('danger', res.message);
                    }
                }
            });
        });

        //SELECT 2 Simple//
        $(".select2").select2({
            placeholder: "--Select--",
            allowClear: true
        });

        /*SMALL GREY DOTS DROP DOWN*/
        $('body').on('click', '.dots_menu_grey', function() {
            if ($(this).hasClass('active')) {
                $(this).parent().find('.dropdown_row').slideUp('slow');
                $('.dots_menu_grey').removeClass('active');
            } else {
                $('.dots_menu_grey').removeClass('active');
                $('.dropdown_row').slideUp('slow');
                $(this).parent().find('.dropdown_row').slideDown('slow');
                $(this).addClass('active');
            }
        });

        $('body').on('click', '.dots_menu_grey', function(event) {
            event.stopPropagation();
        });

        $(window).click(function() {
            $('.dots_menu_grey').removeClass('active');
            $('.dropdown_row').removeClass('open').slideUp('slow');
        });


        //DataTables
        //    $('.datatables_simple').DataTable({
        //        "dom": '<"top"f>rt<"bottom"lpi><"clear">',
        //        language: {search: ""},
        //        "bSort": true
        //    });
        //    $(".dataTables_filter input").attr('placeholder', 'Search');



        oTable = $('#product_table').DataTable({
            processing: true,
            serverSide: true,
            "dom": '<"top"f>rt<"bottom"lpi><"clear">',
            language: {
                search: ""
            },
            "bSort": true,
            buttons: [
                'pageLength',
                {
                    extend: 'excel',
                    exportOptions: {
                        columns: [0, 1]
                    },
                    text: ' EXPORT',
                    className: 'myExport'
                },
            ],
            ajax: {
                url: "{!! route('admin.products.datatable') !!}",
                type: 'post',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: function(d) {
                    //                d.from_date = $('#from_date').val();
                    //                d.to_date = $('#to_date').val();
                    //                d.status = $('#status').val();
                    d.search = $('input[type="search"]').val();
                },
                complete: function() {
                    console.log("--am reached----")
                    $('#busyloading').hide();
                }
            },
            initComplete: function(settings, json) {
                // Hide loading indicator only when the rendering is complete
                $('#busyloading').hide();
            },

            columns: [{
                    data: 'dp',
                    name: 'dp',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'title',
                    name: 'title',
                    orderable: false
                },
                {
                    data: 'category',
                    name: 'category',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'tags',
                    name: 'tags',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'stock',
                    name: 'stock',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'sku',
                    name: 'sku',
                    orderable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'supplier_cost',
                    name: 'supplier_cost',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'retail_price',
                    name: 'retail_price',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'bar_code',
                    name: 'bar_code',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'selling_unit',
                    name: 'selling_unit',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'view',
                    name: 'view',
                    orderable: false,
                    searchable: false
                },
            ]
        });

        //Alert Box Message
        //                                alert("success");

        // page scroll to top posision
        oTable.on('page.dt', function() {
            $('html, body').animate({
                scrollTop: $(".page-header-fixed").offset().top
            }, 'slow');

            $('thead tr th:first-child').focus().blur();
        });

    });



    //Barcode Image view and Downloads
    $(document).on('click', '.view_barcode_image', function() {
        var barcode_number = $(this).attr('barcode_number');
        var barcode_image = $(this).attr('barcode_image');
        var itemname = $(this).attr('itemname');
        var exts = ['.jpg', '.gif', '.png'];
        $.each(exts, function(i, v) {
            barcode_image = barcode_image.replace(v, '');
        });
        var barcode_image_preview = 'uploads/barcodes/';
        $('#barcode_model').modal('show');
        $('.pop_heading').html(itemname);
        $('.bc_number').html(barcode_number);
        $('.barcode_image_preview').attr('src', barcode_image_preview);
        $('.download_barcode').attr({
            'href': barcode_image_preview,
            'download': barcode_image_preview
        });
    });


    $(".print_barcodes").on('click', function() {
        $('head').append('<style type="text/css" media="print">#duplicate_barcodes{display:none}</style>');
        window.print();
    });

    $(".print_barcode_A4").on('click', function() {
        $('head').append('<style type="text/css" media="print">#duplicate_barcodes{display:block}</style>');
        window.print();
    });

    $(document).on('click', "#barcode_view", () => {
        //show popup for barcode

        //show.product.barcode
        var url = "{{route('admin.show.product.barcode')}}";
        var b_code = $("#barcode_view").text();
        $.ajax({
            url: url,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            method: 'POST',
            data: {
                barcode: b_code
            },
            success: function(res) {
                if (res.status == 1000) {
                    $("#item_received").modal('show').html(res.html);
                }
                if (res.status == 3000) {
                    // $('#sweetalert_wrap').hide();
                    // alertbox('danger', res.message);
                }
            }
        });
    });
    $('#upload_excel').click(function() {

        $('#modelWindow').modal('show');
    });
</script>
@stop