@extends('admin.layout.main_v')
@section('categories_active_class')
    @include('admin.layout.active_class')
@stop
@section('constant_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
    @if(App::getLocale() == 'ar')
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.rtl.css')}}" rel="stylesheet" type="text/css" />
    @else
        <!--begin::Page Vendors Styles(used by this page) -->
        <link href="{{asset('assets/assets_1/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
        <link href="{{url("/")}}/assets/assets_1/bootstrap-select/dist/css/bootstrap-select.css" rel="stylesheet" type="text/css" />

        <!--end::Page Vendors Styles -->
    @endif
@stop
@section('js')
    <!--begin::Page Vendors(used by this page) -->
    <script src="{{asset('assets/assets_1/js/demo1/pages/crud/datatables/basic/basic.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/assets_1/datatables/datatables.bundle.js')}}" type="text/javascript"></script>
    <!--end::Page Vendors -->
    <!--end::Page Vendors -->
	<script>
        let add_edit_url = '{!!route('admin.category.process')!!}';
        let data_table_url = '{!!route('admin.category.data')!!}';

        let Modal = $('#add_edit');
        let Table = $('#data_table');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                "pageLength": 50,
                sDom: 'lrtip',
                "order": [[ 0, "ASC" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.s_name = $('#s_name').val(),
						d.b_enabled = $('#b_enabled').val()
                    }
                },
                columns: [
                    {className: 'text-center', data: 'pk_i_id', name: 'pk_i_id', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_name', name: 's_name', orderable: true, searchable: true},
                    {className: 'text-center', data: 's_image', name: 's_image', orderable: true, searchable: true},
                    {className: 'text-center', data: 'b_enabled', name: 'b_enabled', orderable: true, searchable: true},
                    // {className: 'text-center', data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            $('.reset_form').click(function(){
                $('#s_name').val('');
                $('#b_enabled').val(0);
                Table.DataTable().ajax.reload();
            });


            $('.search_btn').click( function(ev) {
                Table.DataTable().ajax.reload();
            });

            $('#app_delete_modal .ok').click(function (e) {
                e.preventDefault();
                var data = $('#app_delete_form').serializeArray();
                var urlDelete = data[2].value;
                $.ajax({
                    url : urlDelete,
                    data : data,
                    type: "POST",
                    beforeSend(){
                        block_modal('app_delete_modal','{{trans('general.text_please_wait')}} ...');
                    },
                    success:function(data) {
                        if(data.success){
                            $('#app_delete_modal').modal('hide');
                            Table.DataTable().ajax.reload();
                            showAlertMessage('success','{{$data['name']}} / ', data.message);
                        }
                        else
                            showAlertMessage('danger', '{{$data['name']}} / ' ,  data.message, 1000);
                        un_block_modal('app_delete_modal');
                    },
                    error:function(data){},
                    statusCode: {500: function(data){}}
                });
            });
		});

        // function readURL(input) {
        //     if (input.files && input.files[0]) {
        //         var reader = new FileReader();
		//
        //         reader.onload = function (e) {
        //             $('#img_preview').attr('src', e.target.result);
        //         };
		//
        //         reader.readAsDataURL(input.files[0]);
        //         $('#img_preview').removeClass('hide');
        //     }
        // }

        {{--function showModal(id,modal_id,url,token,validate){--}}
        {{--    $("html, body").animate({--}}
        {{--        scrollTop: 0--}}
        {{--    }, 600);--}}

        {{--    $.ajax({--}}
        {{--        url : url,--}}
        {{--        data : {'pk_i_id':id,'_token':token},--}}
        {{--        type: "POST",--}}
        {{--        beforeSend(){--}}
        {{--            block_page('{{trans('general.text_please_wait')}} ...');--}}
        {{--        },--}}
        {{--        success:function(data) {--}}
        {{--            if (data.success) {--}}
        {{--                $('#'+modal_id).html(data.page).modal('show', {backdrop: 'static', keyboard: false});--}}
        {{--                if (typeof validateForm === "function")--}}
        {{--                    validateForm();--}}
        {{--            }--}}
        {{--            else--}}
        {{--                showAlertMessage('alert-danger', 'error !', 'An unknown error occured');--}}
        {{--            un_block_page();--}}
        {{--        },--}}
        {{--        error:function(data) {--}}
        {{--            un_block_page();--}}
        {{--        } ,--}}
        {{--        statusCode: {--}}
        {{--            500: function(data) {--}}
        {{--                un_block_page();--}}
        {{--            }--}}
        {{--        }--}}
        {{--    });--}}
        {{--}--}}

        {{--function postData(){--}}
        {{--    if (!$("#add_edit_form").valid())--}}
        {{--        return false;--}}
        {{--    let data = new FormData($('#add_edit_form').get(0));--}}
        {{--    $.ajax({--}}
        {{--        url : add_edit_url,--}}
        {{--        data : data,--}}
        {{--        type: "POST",--}}
        {{--        processData: false,--}}
        {{--        contentType: false,--}}
        {{--        beforeSend(){--}}
        {{--            block_modal('add_edit','{{trans('general.text_please_wait')}} ...');--}}
        {{--        },--}}
        {{--        success:function(data) {--}}
        {{--            if(data.success){--}}
        {{--                Modal.modal('hide');--}}
        {{--                Table.DataTable().ajax.reload();--}}
        {{--                showAlertMessage('success','{{$data['name']}} / ', data.message);--}}
        {{--            }--}}
        {{--            un_block_modal('add_edit');--}}
        {{--        },--}}
        {{--        error:function(data) {--}}
        {{--            console.log(data);--}}
        {{--            un_block_modal('add_edit');--}}
        {{--        } ,--}}
        {{--        statusCode: {--}}
        {{--            500: function(data) {--}}
        {{--                console.log(data);--}}
        {{--                un_block_modal('add_edit');--}}
        {{--            },--}}
        {{--            422: function(data) {--}}
        {{--                if(data.responseJSON.status.errors) {--}}
        {{--                    const error_messages = Object.values(data.responseJSON.status.errors);--}}
        {{--                    var message_to_show = '<ul style="padding-left:20px">';--}}
        {{--                    for (const error_message of error_messages) {--}}
        {{--                        message_to_show += '<li>'+error_message+'</li>';--}}
        {{--                    }--}}
        {{--                    message_to_show += '</ul>';--}}
        {{--                    showAlertMessage('danger', '{{$data['name']}}/ ', message_to_show, 10000);--}}
        {{--                }--}}
        {{--                un_block_modal('add_edit');--}}
        {{--            }--}}
        {{--        }--}}
        {{--    });--}}
        {{--}--}}

        {{--function validateForm(){--}}
        {{--    $("#add_edit_form").validate({--}}
        {{--        rules: {--}}
        {{--            s_name: {--}}
        {{--                required: true,--}}
        {{--            },--}}
        {{--        },--}}
        {{--        messages: {--}}
        {{--            s_name: {--}}
        {{--                required: "هذا الحقل مطلوب",--}}
        {{--            }--}}
        {{--        },--}}
        {{--    });--}}

        {{--    $(".fileupload").change(function(){--}}
        {{--        readURL(this);--}}
        {{--    });--}}

        {{--    $('.add_edit').click(function(e){--}}
        {{--        e.preventDefault();--}}
        {{--        postData();--}}
        {{--    });--}}

        {{--    --}}{{--$('#add_edit_form #fk_i_parent_id').select2({--}}
        {{--    --}}{{--    placeholder: "{{trans('general.text_show_all')}}",--}}
        {{--    --}}{{--    minimumResultsForSearch: Infinity--}}
        {{--    --}}{{--});--}}
        {{--}--}}

        // function showDeleteImgModal(id){
        //     $("html, body").animate({
        //         scrollTop: 0
        //     }, 600);
        //     $('#delete_img_modal #i_constant_id').val(id);
        //     $('#delete_img_modal').modal('show', {backdrop: 'static', keyboard: false});
        // }
    </script>
@endsection

@section('content')
<!--units-management -->
<div class="kt-portlet kt-portlet--mobile">
    <div class="kt-portlet__head kt-portlet__head--lg">
        <div class="kt-portlet__head-label">
            <span class="kt-portlet__head-icon">
                <i class="kt-font-brand flaticon2-indent-dots"></i>
            </span>
            <h4 class="kt-portlet__head-text">
                @if(isset($data['name']))
                    {{ $data['name'] }}
                @endif
            </h4>
        </div>
        <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
                <button id="btn_show_search_box" onclick="check_collapse()" class="btn btn-dark m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class="la la-filter"></i>
                    @lang('general.text_show_search_box')
                    <i class="la la-angle-down"></i>
                </button>
{{--                <a style="margin: 0 10px 0 10px" href="javascript:;" onclick="showModal(null,'add_edit','{{ route('admin.category.form')}}','{{csrf_token()}}')" class="btn btn-primary m-btn m-btn--pill m-btn--custom m-btn--icon m-btn--air">--}}
{{--                <span><i class="la la-plus-circle"></i>--}}
{{--                    <span>{{trans('general.text_add')}} New Category</span>--}}
{{--                </span>--}}
{{--                </a>--}}
            </div>
        </div>
    </div>

    <div class="kt-portlet__body">
        <!--begin: Search Form -->
        <div class="kt-form kt-form--label-right kt-margin-t-20 kt-margin-b-10">
            <div class="row align-items-center">
                <div class="collapse col-xl-12" id="collapseExample">
                <div class="col-xl-12" id="filter_options">
                    <div class="form-group row">
                        <div class="col-lg-3">
                            <label for="s_name" class="form-control-label">Name:</label>
                            <input type="text" class="form-control" name="s_name" id="s_name" placeholder="Name"/>
                        </div>

                        <div class="col-lg-3">
                            <label for="b_enabled" class="form-control-label">Status:</label>
                            <select class="form-control m-input col-sm-12" name="b_enabled" id="b_enabled">
                                <option value="0">--</option>
                                <option value="1">Enabled</option>
                                <option value="2">Disabled</option>
                            </select>
                        </div>


                    </div>

                    <div class="form-group row">
                        <div class="col-lg-3">
                            <a href="javascript:;" style="width: 100%" class="btn btn-warning btn-elevate btn-sm btn-icon search_btn">
                                <span>
                                    <i class="la la-search"></i>
                                    <span>{{trans('general.text_do_search')}}</span>
                                </span>
                            </a>
                        </div>
                        <div class="col-lg-3">
                            <a href="javascript:;" style="width: 100%" class="btn btn-dark btn-elevate btn-sm btn-icon reset_form">
                                <span>
                                    <i class="la la-search-minus"></i>
                                    <span>{{trans('general.text_cancel_search')}}</span>
                                </span>
                            </a>
                        </div>

                    </div>
                </div>
                </div>
            </div>
        </div>

        <!--end: Search Form -->

        <!--begin: Datatable -->
        <table class="table table-striped- table-bordered table-hover table-checkable responsive no-wrap" id="data_table">
            <thead>
                <tr>
                    <th class="text-center" style="width: 10%">ID#</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Icon</th>
                    <th class="text-center" style="width: 18%">{{trans('constant.text_status')}}</th>
{{--                    <th class="text-center" style="width: 10%">{{trans('constant.text_options')}}</th>--}}
                </tr>
            </thead>
        </table>
    </div>
</div>
<!--end units-management -->
<div class="modal fade" id="add_edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@stop