@extends('admin.layout.main_v')
@section('admins_active_class')
    @include('admin.layout.active_class')
@stop
@section('users_active_class')
    @include('admin.layout.active_class')
@stop
@section('style')
    @if(App::getLocale() == 'ar')
        <link href="{{asset('assets/assets/vendors/custom/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>
    <script src="{{asset('assets/assets_1/bootstrap-select/dist/js/bootstrap-select.js')}}" type="text/javascript"></script>
    <script src="{{asset('assets/assets_1/js/demo1/pages/crud/forms/widgets/bootstrap-select.js')}}" type="text/javascript"></script>

{{--    <script src="./assets/js/demo1/pages/crud/forms/widgets/bootstrap-select.js" type="text/javascript"></script>--}}
    <!--end::Page Vendors -->
    <!--end::Page Vendors -->
	<script>
        var add_edit_url = '{!!route('admin.admins.process')!!}';
        var data_table_url = '{!!route('admin.admins.list')!!}';

        var Modal = $('#add_edit');
        var Table = $('#data_table');
        $(document).ready(function() {
            Table.DataTable({
                processing: true,
                serverSide: true,
                "pageLength": 50,
                sDom: 'lrtip',
                "order": [[ 0, "desc" ]],
                @include('admin.shared.pagination')
                ajax:{
                    "url":  data_table_url,
                    "type": 'GET',
                    "data": function(d) {
                        d.s_name = $('#filter_options #s_name').val(),
                        d.b_enabled = $('#filter_options #b_enabled').val()
                        d.s_mobile_number = $('#filter_options #s_mobile_number').val()
                        d.s_email = $('#filter_options #s_email').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_mobile_number', name: 's_mobile_number', orderable: true, searchable: true},
                    {className: 'text-center', data: 'email', name: 'email', orderable: true, searchable: true},
                    {className: 'text-center', data: 'dt_creation_date', name: 'dt_created_date', 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() {
                $('#filter_options #s_name').val('');
                $('#filter_options #s_mobile_number').val('');
                $('#filter_options #s_email').val('');
                $('#filter_options #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(){
            // alert('ok');
            $("#add_edit_form").validate({
                // ignore: [],
                rules: {
                    's_name[]': {
                        required: true,
                    },
                    's_company_name[]': {
                        required: true,
                    },
                },
                messages: {
                    s_name: {
                        required: "هذا الحقل مطلوب",
                    }
                },
            });
            $('.select2').select2();
            $('.kt-selectpicker').selectpicker();
            $(".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 flaticon-users-1"></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.admins.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 Administrator</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="s_mobile_number" class="form-control-label">Mobile:</label>
                            <input type="text" class="form-control" name="s_mobile_number" id="s_mobile_number" placeholder="Mobile Number"/>
                        </div>

                        <div class="col-lg-3">
                            <label for="s_email" class="form-control-label">E-mail:</label>
                            <input type="text" class="form-control" name="s_email" id="s_email" placeholder="Email"/>
                        </div>

                        <div class="col-lg-3">
                            <label for="b_enabled" class="form-control-label">Status:</label>
                            <select class="form-control select2 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">ID#</th>
                    <th class="text-center">Name</th>
                    <th class="text-center">Mobile</th>
                    <th class="text-center">E-mail</th>
                    <th class="text-center" style="width: 10%">Date</th>
                    <th class="text-center" style="width: 15%">{{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" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"></div>
@stop