@extends('layouts.main')

@section('title','Category Company')

@section('content')

<div class="card martop-1">
    <div class="card-header">
        <h3 class="card-title">Category Company</h3>
        <div class="card-tools user_data_tools" id="user_data_tools">
            <button class="btn btn-sm btn-success btn-new-data">
                <i class="fa fa-plus"></i> New Category Company
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive dataTableRow" id="dataTableRow">
            <label class="el-waiting-message">Loading your data. It may take some time..</label>
        </div>
    </div>
</div>

<div class="create_fields display-none">
    @csrf
    <div class="form-group">
        <label>Category</label>
        <input class="form-control" name="name" placeholder="Category" required autofocus>
    </div>
</div>

<script>
    var params = {}
    
    $(document).ready(function () {
        loadThis(params);
        
        $(document).on('click', '.category_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.category_id').html();
            
            if($.isNumeric(id)) {
                var form = '<form action="update_category_company/'+id+'" class="form-update-data">';
                var create = $('.create_fields');
                var fields = create.html();
                var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
                modalCreateMd(form, fields, btn_submit);
                
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/getCategoryCompany',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.data[0]){
                        var data = result.data[0],
                            form = $('.form-update-data');
                            
                        form.find("input[name=name]").val(data.category);
                    
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.btn-new-data', function(e){
            e.preventDefault();
            var form = '<form action="/new_category_company" class="form-new-data">';
            var create = $('.create_fields');
            var fields = create.html();
            var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
            modalCreateMd(form, fields, btn_submit)
        });
        
        $(document).on('submit', '.form-new-data', function(e){
            e.preventDefault();
            $('#modal_create_md').modal('hide');
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                name: ini.find("input[name=name]").val(),
            };
            
            function postData(data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: data
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    input_token.val(result.newtoken);
                    if (result.status) {
                        var message = result.message || 'Success';
                        successAlert(message);
                        loadThis();
                    } else {
                        var message = result.message || 'Api connection problem';
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            postData(data)
        });
        
        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            $('#modal_create_md').modal('hide');
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                name: ini.find("input[name=name]").val(),
            };
            
            function postData(data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: data
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    input_token.val(result.newtoken);
                    if (result.status) {
                        var message = result.message || 'Success';
                        successAlert(message);
                        loadThis();
                    } else {
                        var message = result.message || 'Api connection problem';
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            postData(data)
        });
        
        $(document).on('click', '.btn-is-active', function(e){
            e.preventDefault();
            var ini = $(this),
                id = ini.data('id');
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/category_company/is_active',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.status){
                        var message = result.message;
                        successAlert(message);
                        loadThis(params);
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        })
        
    });
    function loadThis(params){
        var datas = loadAsData(params);
        url = datas.url;
        param = datas.param;
        th = datas.th;
        col_def = datas.col_def;
        columns = currency.columns;
        
        loadTable(url, param, th, col_def, columns);
    }
        
    function loadAsData(param){
        // param = {};
        url = "/getCategoryCompany";
        th = '<th width="5%">ID</th>' +
             '<th class="text-dark cursor-default">Category</th>'+
             '<th width="5%">Is Active</th>';
        columns = [
                    {"data": "id", className: "category_id"},
                    {"data": "category", className: "category_name text-link"},
                    {"data": "is_active", className: 'text-center'}
                  ];
    
        col_def = [
                {
                    "targets" : 2,
                    "data": "is_active",
                    "render" : function (data, type, row) {
                        text = 'DEACTIVATE';
                        color = 'btn-danger';
                        if(row.is_active === "NO"){
                            text = 'ACTIVATE';
                            color = 'btn-success';
                        }
                        return '<button class="btn btn-sm '+color+' btn-is-active" data-id="'+row.id+'">'+text+'</button>';
                    }
                }
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
</script>
@endsection