@extends('layouts.company_main')

@section('title','Category')

@section('content')

<div class="card martop-1">
    <div class="card-header">
        <h3 class="card-title">Category</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
            </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="modal fade" tabindex="-1" id="modal_new_data" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="text-center">
                <form method="POST" action="new_category" class="form-new-data">
                @csrf
                    <div class="modal-body">
                        <div class="form-group text-center">
                            <img class="prev-item-image" src="/images/upload.png" alt="category_image" width="100px" style="cursor:pointer"
                            onclick="event.preventDefault(); document.getElementById('kategori_image').click();">
                            <input type="file" accept="image/x-png,image/jpg,image/jpeg" id="kategori_image" name="kategori_image" class="kategori_image form-control" hidden>
                        </div>
                        <div class="form-group">
                            <label>Category</label>
                            <input class="form-control" name="kategori_name" placeholder="Category" required autofocus>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-info btn-sm text-light" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                        <button type="submit" class="btn btn-sm btn-success">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" tabindex="-1" id="modal_update_data" role="dialog" aria-labelledby="warning">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="text-center">
                <form method="POST" action="#update" class="form-update-data">
                @csrf
                    <div class="modal-body">
                        <div class="form-group text-center">
                            <img class="category_image prev-item-image-2" width="30%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('kategori_image_2').click();" onerror="imgError(this);">
                            <input type="file" accept="image/*" id="kategori_image_2" name="kategori_image_2" class="kategori_image_2 form-control" hidden>
                        </div>
                        <div class="form-group">
                            <label>Category</label>
                            <input class="form-control" name="kategori_name" placeholder="Category" required autofocus>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn btn-info btn-sm text-light" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                        <button type="submit" class="btn btn-sm btn-success">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        loadThis();
        
        $(document).on('click', '.kategori_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_kategori').html(),
                mdl = $('#modal_update_data');
            
            if($.isNumeric(id)) {
                mdl.modal('show');
                form = $('.form-update-data');
                form.attr('action', 'update_category/'+id);
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: 'getCategory',
                    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'),
                            kategori_name = form.find("input[name=kategori_name]").val(data.kategori_name);
                            kategori_image = form.find(".prev-item-image-2").attr('src', '/upload_image/category/'+data.kategori_image);
                            el_image = form.find("input[name=kategori_image]").val(null);
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.btn-new-data', function(e){
            e.preventDefault();
            $('#modal_new_data').modal('show');
        });
        
        $(document).on('submit', '.form-new-data', function(e){
            e.preventDefault();
            $('#modal_new_data').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 post_data = {
                is_ajax: true,
                _token: input_token.val(),
                kategori_name: ini.find("input[name=kategori_name]").val()
            };
            
            var el_photo = document.getElementById('kategori_image'), photo = el_photo.files[0];
            
            if (typeof (photo) === "undefined") {
            hideLoading(e_modal_wait);
            var message = 'Category Photo can not be empty!';
            failedAlert(message);
            return false;
            }
            
            if(true){
                var rP = new FileReader();
                rP.readAsDataURL(photo);
                rP.onloadend = function () {
                    post_data.photo = rP.result;
                    postData(post_data);
                };
            }
            function postData(post_data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_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);
            }
        });
        
        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            $('#modal_update_data').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 post_data = {
                is_ajax: true,
                _token: input_token.val(),
                kategori_name: ini.find("input[name=kategori_name]").val()
            };
            
            var el_photo = $('#kategori_image_2'), photo = el_photo[0].files[0];
            if (typeof (photo) === "undefined") {
                postData(post_data);
            } else {
                var reader_photo = new FileReader();
                reader_photo.readAsDataURL(photo);
                reader_photo.onloadend = function () {
                    post_data.kategori_image = reader_photo.result;
                    postData(post_data);
                };
            }
            function postData(post_data) {
                $.ajax({
                    url: url,
                    type: "post",
                    data: post_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);
            }
        });
        
        $(document).on('click', '.btn-is-active', function(e){
            e.preventDefault();
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this), id = ini.data('id'), url = '/company/category/is_active/'+id;
            $.ajax({
                url: url,
                type: "get",
                data: {}
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if (result.status) {
                    var message = result.message || 'Success';
                    successAlert(message);
                    loadThis();
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
            }).fail(ajax_fail);
        });
        
        $(document).on('change input', '.kategori_image', function(e){
            var target = $('.prev-item-image');
                src = $('.kategori_image');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('change input', '.kategori_image_2', function(e){
            var target = $('.prev-item-image-2');
                src = $('.kategori_image_2');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
    });
    function loadThis(){
        var datas = loadAsData();
        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 = {};
        url = "getCategory";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th width="5%">Image</th>' +
             '<th class="text-dark cursor-default">Category</th>' +
             '<th width="15%">Is Active</th>' +
             '<th width="5%">Action</th>';
        columns = [
                    {"data": "no"},
                    {"data": "id_kategori", className: "id_kategori"},
                    {"data": "kategori_image"},
                    {"data": "kategori_name", className: "kategori_name text-link"},
                    {"data": "is_active"},
                    {"data": "id_kategori"},
                  ];
    
        col_def = [
                {
                    "targets" : 2,
                    "data": "kategori_image",
                    "render" : function ( url, type, full) {
                       if(!url){
                           return '<img height="100px" src="/images/logo.png">';
                       }
                       return '<img height="100px" src="/upload_image/category/'+url+'" />';
                    }
                },
                {
                    "targets" : 5,
                    "data": "id_kategori",
                    "render" : function ( data, type, row) {
                        var btn = '', is_active = row.is_active, text = "ACTIVATE", btn_bg = 'btn-success';
                        if(is_active == "YES"){
                            text = "INACTIVATE";
                            btn_bg = 'btn-warning';
                        }
                        
                        btn = '<button data-id="'+row.id_kategori+'" class="btn btn-md btn-is-active '+btn_bg+'">'+text+'</button>'
                        return btn;
                    }
                },
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
</script>
@endsection