@include('admin.layouts.header')
@include('admin.layouts.sidebar')
<style>
    table{
        width: 100%;
        font-family: Arial;
    }
    .emi-form > thead > tr > th{
        font-weight: 600 !important;
    }
    h4.panel-title > a{
        font-size: 14px;
        color: #5f5a5a !important;
    }
</style>
<div class="m-grid__item m-grid__item--fluid m-wrapper">
    <!-- BEGIN: Subheader -->
    <div class="m-subheader ">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    FLDG Categories
                </h3>
            </div>

        </div>
    </div>
<?php setlocale(LC_MONETARY, 'en_IN.UTF-8'); ?>
<!-- END: Subheader -->
    <div class="m-content">
        @if(Session::has('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('success') }}
            </div>
        @endif
        @if(Session::has('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
                {{ Session::get('error') }}
            </div>
        @endif
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon">
                            <i class="fa fa-file-text-o"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            FLDG Categories - {!! $merchant->merchant_name !!}
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body">
                <div class="m-section">
                    <div class="m-section__content">
                        <div class="col-md-12">
                            <div class="row col-md-12">
                                <div class="col-md-6">
                                    <table class="table">
                                        <tr>
                                            <td>
                                                <div style="text-align: center;font-weight: 700;">Categories</div>
                                                <table class="table categories-view-db">
                                                    <input type="hidden" value="{!! $merchant->id !!}" name="merchant_id"/>
                                                    <tr>
                                                        <td>ID</td><td>Category Name</td><td>% FLDG</td><td>Created By</td><td>Created At</td><td>Action</td>
                                                    </tr>
                                                    @foreach($categories as $category)
                                                    <tr data-name="{!! $category->name !!}" data-fldg="{!! $category->fldg !!}" id="cate-{!! $category->id !!}" data-id="{!! $category->id !!}">
                                                        <td>{!! $category->id !!}</td><td>{!! $category->name !!}</td><td>{!! $category->fldg !!}%</td><td>{!! $category->user->name or '-' !!}</td><td>{!! $category->created_at !!}</td><td><i data-id="{!! $category->id !!}" class="fa fa-edit edit-cate-view"></i> | <i data-id="{!! $category->id !!}" class="fa fa-trash delete-cate-view"></i></td>
                                                    </tr>
                                                    @endforeach
                                                </table>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <table class="table">
                                        <tr>
                                            <td>
                                                <div style="text-align: center;font-weight: 700;">Create Category</div>
                                                <table class="table">
                                                    <tr>
                                                        <td><input type="text" class="form-control" placeholder="Name of category" name="category"/></td>
                                                        <td><input type="text" class="form-control" placeholder="% FLDG" name="fldg"/></td>
                                                    </tr>
                                                    <tr>
                                                        <td><div style="display: inline-flex;"><div class="form-control btn btn-primary create-category">Create Category</div><div class="btn btn-default reset-cate-view" style="margin-left: 6px;">Reset</div> <img class="im-ld-i" style="display:none; margin-left: 8px;margin-top: 5px;" src="/assets/front/img/loading.gif"/></div></td>
                                                    </tr>
                                                </table>
                                                <div class="view-error-cate"></div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include("admin.layouts.footer")
<script>

    $(document).on('click', '.edit-cate-view', function () {
       $(".create-category").attr('data-id', $(this).attr('data-id'));

       let categoryObj = $("#cate-"+$(this).attr('data-id'));

        $("input[name='category']").val(categoryObj.attr('data-name'));
        $("input[name='fldg']").val(categoryObj.attr('data-fldg'));
    });

    $(".reset-cate-view").click(function(){
        $(".create-category").attr('data-id', 0);

        $("input[name='category']").val('');
        $("input[name='fldg']").val('');
    });


    $(document).on('click', '.delete-cate-view', function () {

        let event = $(this);

        let _token = '<?php echo csrf_token(); ?>';
        let user_id = '<?php echo \Illuminate\Support\Facades\Auth::user()->id; ?>';

        let cate_id = typeof event.attr('data-id') !== 'undefined' ? event.attr('data-id') : 0;
        $("tr#cate-"+cate_id).css({'display':'none'});

        if(window.confirm('Are you sure?')){
            $.ajax({
                type: 'POST',
                url: "/admin/merchant/fldg/delete-category",
                data: {
                    _token: _token, id: cate_id, user_id: user_id
                },
                dataType: "JSON",
                success: function (response) {
                    if(response.status == 'OK') {
                        $("tr#cate-"+cate_id).remove();
                    }else{
                        $("tr#cate-"+cate_id).css({'display':'inline-block'});
                        alert(response.message);
                    }
                }
            });
        }
    });

    $(".create-category").click(function(){

        let event = $(this);

        if(event.hasClass('disabled')){
            return false;
        }

        let category = $("input[name='category']");
        let fldg = $("input[name='fldg']");

        category.css({'border-color':'#ebedf2'});
        category.css({'border-color':'#ebedf2'});

        if(!category.val().length){
            category.css({'border-color':'red'});
            return false;
        }

        if(!fldg.val().length){
            fldg.css({'border-color':'red'});
            return false;
        }

        if(isNaN(fldg.val())){
            fldg.css({'border-color':'red'});
            return false;
        }

        event.addClass('disabled');
        $(".im-ld-i").css({'display':'inline-block'});

        let id = $("input[name='merchant_id']").val();
        let _token = '<?php echo csrf_token(); ?>';

        let cate_id = typeof event.attr('data-id') !== 'undefined' ? event.attr('data-id') : 0;
        if (cate_id){
            $(this).text('Update Category');
        }else{
            $(this).text('Create Category');
        }
        let user_id = '<?php echo \Illuminate\Support\Facades\Auth::user()->id; ?>';
        let username = '<?php echo \Illuminate\Support\Facades\Auth::user()->name; ?>';

        $.ajax({
            type: 'POST',
            url: "/admin/merchant/fldg/category",
            data: {
                _token: _token, merchant_id: id, fldg: fldg.val(), name: category.val(), id: cate_id, user_id: user_id
            },
            dataType: "JSON",
            success: function (response) {
                if(response.status == 'OK') {
                    category.val('');
                    fldg.val('');
                    if(cate_id == 0) {
                        $(".categories-view-db").append(
                            '<tr data-name="' + response.data.name + '" data-fldg="' + response.data.fldg + '" id="cate-' + response.data.id + '"><td>' + response.data.id + '</td><td>' + response.data.name + '</td><td>' + response.data.fldg + '%</td><td>' + response.data.created_at + '</td><td><i data-id="' + response.data.id + '" class="fa fa-edit edit-cate-view"></i> | <i data-id="' + response.data.id + '"  class="fa fa-trash delete-cate-view"></i></td></tr>'
                        );
                    }else{
                        let cate_id_pre = $("tr#cate-"+cate_id).prev().attr('data-id');
                        if(typeof cate_id_pre === 'undefined') {
                            cate_id_pre = $("tr#cate-"+cate_id).next().attr('data-id');
                            $("tr#cate-" + cate_id).remove();
                        }else{
                            $("tr#cate-" + cate_id).remove();
                        }

                        $("tr#cate-"+cate_id_pre).after(
                            '<tr data-name="' + response.data.name + '" data-fldg="' + response.data.fldg + '" id="cate-' + response.data.id + '"><td>' + response.data.id + '</td><td>' + response.data.name + '</td><td>' + response.data.fldg + '%</td><td>'+username+'</td><td>' + response.data.created_at + '</td><td><i data-id="' + response.data.id + '" class="fa fa-edit edit-cate-view"></i> | <i data-id="' + response.data.id + '"  class="fa fa-trash delete-cate-view"></i></td></tr>'
                        );
                    }
                }else{
                    $(".view-error-cate").text(response.message);
                }

                $(".create-category").attr('data-id', 0);

                category.val('');
                fldg.val('');

                $(".im-ld-i").css({'display':'none'});
                event.removeClass('disabled')
            }
        });
    })
</script>