@extends('layouts.layout')
@section('title', 'Store Hub')
@section('body_class', 'nav-md')
@section('body_content')
<title>Lakuemas | Store Hub</title>
<style>
table.dataTable tbody td {
    word-break: break-word;
    vertical-align: top;
}

</style>

<div class="container body">
    <div class="main_container">
        @include('includes.sidebar')
        <div class="right_col" role="main">
            <div class="page-title">
                <div class="title_left">
                    <h3><i class="fa fa-edit"></i> Master Store Hub</h3>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="x_panel">
                        <div class="x_title">
                            Filter
                        </div>
                        <div class="x_content">
                            <form id="form-search" class="form-horizontal">
                                <div class="col-xs-12 col-sm-12">
                                    <div class="form-group">
                                        <label class="col-xs-12 col-sm-3 control-label">Store Hub Name :</label>
                                        <div class="col-xs-12 col-sm-9">
                                            <input type="text" class="form-control" name="store_hub_name" id="store_hub_name" placeholder="Store Hub Name">
                                        </div>
                                    </div>
                                    <div class="form-group" style="margin-top:20px">
                                        <label class="col-xs-12 col-sm-3 control-label"></label>
                                        <div class="col-xs-12 col-sm-9">
                                            <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> Search</button>
                                            <button type="button" class="btn btn-warning" id="reset_btn"><i class="fa fa-trash"></i> Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">                
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            Store Hub List
                        </div>
                        <div class="col-md-12 text-right" style="margin-top:5px;">
                            <button class="btn btn-primary add_store_hub mt-3 mb-3"><i class="fa fa-plus"></i> Add</button>
                        </div>
                        <div class="panel-body">
                            <table id="table_store_hub" class="table table-bordered table-striped" style="width:100%;">
                                <thead>
                                    <tr>
                                        <th>Store Hub Name</th>
                                        <th>Branch Manager</th>
                                        <th>Location Store</th>
                                        <th>Store Member</th>
                                        <th>QC Hub</th>
                                        <th>QC Hub Gadai</th>
                                        <th>AE Hub</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody class="response" id="scroll">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            @include('pages.store_hub.store_hubModal')
        </div>
        @include('includes.footer')
    </div>
</div>
@endsection

@section('scripts')
@include('includes.helper_js')
<script>
   var store_hub = {
		table: function(url = '/butik/store/store_hub/datatables'){
			return $('#table_store_hub').DataTable({
	            processing: true,
                serverSide: false,
                select: true,
                dom: 'Bflrtip',
                responsive: true,
                language: {
                    search: '',
                    searchPlaceholder: "Search..."
                },
                oLanguage: {
                    sLengthMenu: "_MENU_",
                },
                ajax: {
                    url: Helper.url(url),
                    "type": "get"
                },
	            columns: [
	            	{
	                    data: "name",
	                    name: "name",
	                },
	            	{
                        data: 'branch_manager.name',
                        name: 'branch_manager.name',
                        render: function(data,type,full) {
                            return data ? data : '-';
                        }
                    },
                    {
                        data: 'location_store.name',
                        name: 'location_store.name',
                        render: function(data,type,full) {
                            return data ? (full.location_store.brand.name + ' - ' + data) : '-';
                        }
                    },
	            	{
                        data: 'store_hub_member',
                        name: 'store_hub_member',
                        width: '300px',
                        render: function(data,type,full) {
                            var content = '';
                            _.forEach(data, function(value) {
                                let brand_store_name = (value.store.brand && value.store.brand.name ? value.store.brand.name : '-') + ' - ' + value.store.name;
                                content += '<span class="label label-pill label-warning">'+brand_store_name+'</span>&nbsp;';
                            });
                            return content;
                        },
                    },
                    {
                        data: 'qc_hub_user',
                        name: 'qc_hub_user',
                        width: '150px',
                        render: function(data,type,full) {
                            var content = '';
                            _.forEach(data, function(value) {
                                content += '<span class="label label-pill label-default">'+value.user?.name+'</span>&nbsp;';
                            });
                            return content;
                        },
                    },
                    {
                        data: 'qc_hub_user_gadai',
                        name: 'qc_hub_user_gadai',
                        width: '150px',
                        render: function(data,type,full) {
                            var content = '';
                            _.forEach(data, function(value) {
                                content += '<span class="label label-pill label-default">'+value.user?.name+'</span>&nbsp;';
                            });
                            return content;
                        },
                    },
                    {
                        data: 'ae_hub_user',
                        name: 'ae_hub_user',
                        width: '150px',
                        render: function(data,type,full) {
                            var content = '';
                            _.forEach(data, function(value) {
                                content += '<span class="label label-pill label-default">'+value.user?.name+'</span>&nbsp;';
                            });
                            return content;
                        },
                    },
                    {
                        data: "id",
	                    name: "id",
	                	render: function(data, type, full) {
		                    return "<button title='Edit Store Hub' data-id='"+data+"' type='button' class='edit_store_hub btn btn-warning btn-white btn-sm'><i class='fa fa-pencil-square-o'></i></button> <button data-id='"+data+"' title='Delete Store Hub' type='button' class='delete_store_hub btn btn-danger btn-sm'><i class='fa fa-trash'></i></button>";
		                }
                    }
	            ],
	        });
		}
	};
    var table_store_hub = store_hub.table();
    globalCRUD.select2Static(".branch_manager_id", '/select2/user/store_manager');
    globalCRUD.select2Static(".location_store_id", '/butik/store/select2', function(item) {
        return {
            id: item.id,
            text:item.brand.name + ' - ' + item.name
        }
    });
    globalCRUD.select2Tags(".store_member", '/butik/store/select2', function(item) {
        return {
            id: item.id,
            text: item.brand.name + ' - ' + item.name
        }
    });
    globalCRUD.select2Tags(".qc_hub", '/select2/user');
    globalCRUD.select2Tags(".qc_hub_gadai", '/select2/user');
    globalCRUD.select2Tags(".ae_hub", '/select2/user/ae');
    //check is found store on store_hub
    $('.location_store_id').on('select2:select', function (e) {
        is_found_store(e.params.data.id);
    });
    function is_found_store(params) {
        Axios.post('/butik/store/store_hub/is_found_store', {
            store_id : params
        })
        .then(function(response) {
            if(response.data) {
                Helper.warningNotif('Location Store sudah pernah dijadikan Store Hub !');
                $('.location_store_id').val('').change();
            }
        })
        .catch(function(error) {
            Helper.handleErrorResponse(error)
        });
    }
    // add store_hub
    $(document)
        .on('click', '.add_store_hub', function(){
            $('#modal_store_hub').modal('show');
            $('.id').val('');
            $('.name').val('');
            $('.branch_manager_id').val('').change();
            $('.location_store_id').val('').change();
            $('.store_member').empty();
            $('.qc_hub').empty();
            $('.qc_hub_gadai').empty();
            $('.ae_hub').empty();
           
        })
    // save store_hub
    $('#form_store_hub')
        .submit(function(e){
            data = Helper.serializeForm($(this));
            // console.log(data);
            if (data.id == '') {
                Axios.post('/butik/store/store_hub/store', data)
                    .then(function(response) {
                        //send notif
                        Helper.successNotif('Save data Store Hub success !');
                        // reload table
                        table_store_hub.ajax.reload();
                    })
                    .catch(function(error) {
                        Helper.handleErrorResponse(error)
                        if (error.response.status == 500) {
                            // window.location.href = Helper.redirectUrl('/butik/store/store_hub');
                        }
                    });
            }

            if (data.id != '') {
                Axios.post('/butik/store/store_hub/' + data.id, data)
                    .then(function(response) {
                        // send notif
                        Helper.successNotif('Update data Store Hub has been succeded !');
                        // // reload table
                        table_store_hub.ajax.reload();
                    })
                    .catch(function(error) {
                        Helper.handleErrorResponse(error)
                    });
            }

            $('#modal_store_hub').modal('hide');
            e.preventDefault();
        })

     // edit store_hub
     $(document).on('click', '.edit_store_hub', function(){
        var id = $(this).attr('data-id');
        Axios.get('/butik/store/store_hub/edit/'+id+'')
            .then(function(response) {
                if(response.eror != 0) {
                    $('#modal_store_hub').modal('show');
                    let data = response.data.data;
                    // console.log(data);
                    $('.id').val(data.id);
                    $('.name').val(data.name);
                    $('.branch_manager_id').val(data.branch_manager_id).change();
                    $('.location_store_id').val(data.location_store_id).change();
                    $('.store_member').empty();
                    $('.store_member').select2({data: data.store_member_select2});
                    globalCRUD.select2Tags(".store_member", '/butik/store/select2', function(item) {
                        return {
                            id: item.id,
                            text: item.brand.name + ' - ' + item.name
                        }
                    });
                    $('.qc_hub').empty().select2({data: data.qc_hub_select2});
                    $('.qc_hub_gadai').empty().select2({data: data.qc_hub_gadai_select2});
                    globalCRUD.select2Tags(".qc_hub", '/select2/user');
                    globalCRUD.select2Tags(".qc_hub_gadai", '/select2/user');
                    $('.ae_hub').empty().select2({data: data.ae_hub_select2});
                    globalCRUD.select2Tags(".ae_hub", '/select2/user/ae');

                } else {
                    Helper.errorNotif('error');
                    // console.log(response.data)
                }
            })
            .catch(function(error) {
                console.log(error)
                Helper.handleErrorResponse(error)
            });
    });

    // delete store_hub
    $(document)
        .on('click', '.delete_store_hub', function(){
            id = $(this).attr('data-id');
            Helper.confirm(function() {
                Axios.delete('/butik/store/store_hub/'+id+'')
                    .then(function(response) {
                        // send notif
                        Helper.successNotif('Success Deleted !');
                        // reload table
                        $('.id').val('');
                        table_store_hub.table().ajax.reload();
                    })
                    .catch(function(error) {
                        console.log(error)
                        Helper.handleErrorResponse(error)
                    });
            })
        })

    // search datatables;
    $("#form-search").submit(function(e) {
        e.preventDefault();
        let input = Helper.serializeForm($(this));
        playload = '?';
        _.each(input, (val, key) => {
            playload += key + '=' + val + '&'
        });
        playload = playload.substring(0, playload.length - 1);
        console.log(playload);
        url = Helper.url('/butik/store/store_hub/datatables' + playload);
        table_store_hub.ajax.url(url).load();
    });

    //reset field pencarian
    $("#reset_btn").click(function(e) {
        e.preventDefault();
        $('#store_hub_name').val('');
    });

    

</script>
@endsection