@extends('layouts.admin_main')

@section('title')
    @lang('admin_lang.products_management')
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.min.css') }}">
@endpush

@section('content')
    <div class="kt-portlet kt-portlet--mobile">
        @header(['title' => trans('admin_lang.products_management'), 'icon' => 'fa fa-shopping-bag'])
            <div class="kt-portlet__head-label">
                <div class="mr-rem-1">
                    <a href="{{ route('admin.products.exportExcel') }}" class="btn btn-outline-primary">{{trans('admin_lang.export_excel')}}</a>
                </div>
                <div class="mr-rem-1">
                    <a href="{{ route('admin.products.exportPdf') }}" class="btn btn-outline-primary">{{trans('admin_lang.export_pdf')}}</a>
                </div>
                <div class="mr-rem-1">
                    <a href="{{ route('admin.products.uploadExcel') }}" class="btn btn-outline-primary">{{trans('admin_lang.upload_excel')}}</a>
                </div>
                @button(['type' => 'create', 'label' => trans('admin_lang.create_new_product'), 'url' => route('admin.products.create')])@endbutton
            </div>

        @endheader

        <!--begin::Make as offer -->
        <div class="modal fade" id="generate_offer_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Create Offer</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        </button>
                    </div>
                    <form action="{{ route('admin.products-offers.store') }}" id="generate_offer_form" class="kt-form" method="post">
                        <div class="modal-body">
                            <div class="kt-section kt-section--first">
                                @csrf
                                <input type="hidden" name="product_id" id="product_id">
                                <div class="form-group">
                                    <label>Product Name:</label>
                                    <textarea  name="product_name" id="product_name" class="form-control" disabled rows="2"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>Selling Price:</label>
                                    <input type="text" name="selling_price" id="selling_price" class="form-control" disabled>
                                </div>
                                <div class="form-group">
                                    <label class="required">Offer Price:</label>
                                    <input type="text" name="new_selling_price" id="new_selling_price" class="form-control" placeholder="Enter offer price">
                                </div>
                                <div class="form-group">
                                    <label class="required">Start Date:</label>
                                    <input type="text" name="start_date" id="start_date" class="form-control custom-datepicker" placeholder="Select start date of offer">
                                </div>
                                <div class="form-group">
                                    <label class="required">End Date:</label>
                                    <input type="text" name="end_date" id="end_date" class="form-control custom-datepicker" placeholder="Select end date of offer">
                                </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" >Generate Offer</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--end::Make as offer-->

        <div class="kt-portlet__body">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Name:</label>
                        <input type="text" name="name" id="name" class="form-control filter" placeholder="Enter product name" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>SKU:</label>
                        <input type="text" name="sku" id="sku" name class="form-control filter" placeholder="Enter product sku" autocomplete="off">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Category:</label>
                        <select name="category" id="category" class="form-control filter category" >
                            <option value="">[All Category]</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Sub-Category:</label>
                        <select name="sub_category" id="sub_category" class="form-control filter sub_category">
                            <option value="">[All Sub-Category]</option>
                        </select>
                    </div>
                </div>
                <div class="col-lg-12">
                    <button class="btn btn-primary btn-brand--icon" id="btn_search">
													<span>
														<i class="la la-search"></i>
														<span>Search</span>
													</span>
                    </button>
                    &nbsp;&nbsp;
                    <button class="btn btn-secondary btn-secondary--icon" id="btn_reset">
													<span>
														<i class="la la-close"></i>
														<span>Reset</span>
													</span>
                    </button>
                </div>
            </div>
            <hr>
            <div class="table-responsive">
                <table class="table table-striped table-bordered" id="product-table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>@lang('admin_lang.name')</th>
                        <th>@lang('admin_lang.sku')</th>
                        <th>@lang('admin_lang.category')</th>
                        <th>@lang('admin_lang.sub_category')</th>
                        <th>@lang('admin_lang.created')</th>
                        <th>@lang('admin_lang.status')</th>
                        <th>@lang('admin_lang.actions')</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script >

</script>

<script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        dataTable(jQuery('#product-table'), "{{ route('admin.products.data') }}", [
                { data: 'index', defaultContent: '', orderable: false, searchable: false },
                { data: 'name', name: 'name', searchable: true, orderable: true },
                { data: 'sku', name: 'sku', searchable: true, orderable: true },
                { data: 'category', name: 'category', searchable: true, orderable: true },
                { data: 'sub_category', name: 'sub_category', searchable: true, orderable: true },
                { data: 'created', name: 'created_at', searchable: false, orderable: true  },
                { data: 'status', name: 'status', searchable: false, orderable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            "{{ app()->getLocale() }}",
            {!! json_encode($filters) !!},
            jQuery('#header-buttons').html(),
            undefined,
            [[5, 'desc']],
            false
        );




        $(".category").select2({
            dropdownAutoWidth: false,
            ajax: {
                url: '{{ route('admin.category.select2') }}',
                dataType: 'json'
            }
        }).on('change.select2', function () {
            $('.sub_category').html(' <option value="">[All Sub-Category]</option>');
        });
        $(".sub_category").select2({
            dropdownAutoWidth: false,
            ajax: {
                url: '{{ route('admin.sub-category.select2') }}',
                dataType: 'json',
                data: function (params) {
                    var query = {
                        term: params.term,
                        category_id: $(".category option:selected").val()
                    }

                    // Query parameters will be ?search=[term]&type=public
                    return query;
                }
            }
        });

        // enable clear button
        $('.custom-datepicker').datepicker({
            format:{
                toDisplay: function (date, format, language) {
                    return moment(date).format('DD/MM/YYYY');
                },
                toValue: function (date, format, language) {
                    return moment(date).format('MM/DD/YYYY');
                }
            },
            todayBtn: "linked",
            orientation: "bottom",
            todayHighlight: true
        }).on('changeDate', function(ev){
            $(this).datepicker('hide');
        });

    });

    $('#btn_search').click(function () {
        reloadDataTable(dTable);
    });
    $('#btn_reset').click(function () {
        $('#name').val('');
        $('#sku').val('');
        $('#sub_category').html('<option value="">[All Sub-Category]</option>')
        $('#category').html('<option value="">[All Category]</option>')
        reloadDataTable(dTable);
    });

    $(document).on('click','.btn-offer', function(){
        clearForm();
        let id = $(this).attr('data-id');
        let url = '{{ route('admin.products.edit',':id') }}'.replace(":id",id);
        $.get(url,function(response){

            if (response.status === true)
            {
                $('#generate_offer_form').find('#product_name').val(response.data.name);
                $('#generate_offer_form').find('#selling_price').val(response.data.price);
                $('#generate_offer_form').find('#product_id').val(response.data.id);
                $('#generate_offer_form').find('#new_selling_price').val('0');
                $('#generate_offer_modal').modal('show');
            }else{
                errorToast(response.message);
            }
        });
    });


    let clearForm = function(){
        $('#generate_offer_form').find('.form-group').removeClass('has-error');
        $('#generate_offer_form').find('.border-danger').removeClass('border-danger');
        $('#generate_offer_form').find('#product_name').val('');
        $('#generate_offer_form').find('#selling_price').val('');
        $('#generate_offer_form').find('#start_date').val('');
        $('#generate_offer_form').find('#end_date').val('');
        $('#generate_offer_form').find('#id').val('');
        $('#generate_offer_form').find('#new_selling_price').val('0');
    }
    //form submit
    $('#generate_offer_form').submit(function(e){
        e.preventDefault();
        let url = $(this).attr('href');
        let method = $(this).attr('method');
        let form = $(this);
        let submitBtn = $(this).find(':submit');

        $(this).ajaxSubmit({
            type: method,
            url: url,
            enctype: "multipart/form-data",
            dataType: 'JSON',
            beforeSend: function () {
                jQuery(submitBtn).addClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light');
                jQuery(submitBtn).attr('disabled', true);
                jQuery(form).find('.form-group').removeClass('has-error');
                jQuery(form).find('.border-danger').removeClass('border-danger');
                jQuery(form).find('.help-block').remove();
            },
            success: function (response) {
                if (response.status === true)
                {
                    successToast(response.message);
                    $('#generate_offer_modal').modal('hide');
                }else{
                    errorToast(response.message);
                }
            },
            error: function (data) {
                jQuery.each(data.responseJSON.errors, function (key, index) {
                    if (~key.indexOf(".")) {
                        key = key.replace(/\./gi, '-');
                        jQuery('#' + key).addClass('border-danger').closest('.form-group').addClass('has-error').append('<span class="help-block">' + index[0] + '</span>');
                    } else {
                        var input = jQuery(form).find('[name="' + key + '"]');
                        input.addClass('border-danger');
                        input.closest('.form-group').addClass('has-error').append('<span class="help-block">' + index[0] + '</span>');
                    }
                });
            },
            complete: function () {
                jQuery(submitBtn).removeClass('kt-spinner kt-spinner--right kt-spinner--sm kt-spinner--light');;
                jQuery(submitBtn).attr('disabled', false);
                // hideLoading();
            }
        });
    })
</script>
@endsection