@extends('layouts.main')

@section('title','License')

@section('content')

<div id="indexWrapper">
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">License</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 License
                </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>

<div class="create_fields display-none">
    @csrf
    <div class="form-group">
        <label>License Key</label>
        <input class="form-control" name="license_key" placeholder="License Key" required autofocus>
    </div>
    <div class="form-group">
        <label>License Name</label>
        <input class="form-control" name="license_name" placeholder="License Name" required>
    </div>
    <div class="form-group">
        <label>Valid Days</label>
        <input class="form-control" name="valid_days" type="number" placeholder="Valid Days" required>
    </div>
</div>

<div class="display-none" id="detailWrapper">
    <form method="POST" action="#update" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">License</h3>
        </div>
        <div class="card-body">
            <div class="form-group display-none err_msg_div">
                <p class="alert err_msg_p">
                    <a class="close" aria-hidden="true" data-dismiss="alert">x</a>
                </p>
            </div>
            <div class="form-group">
                <label>License Key</label>
                <div class="input-group">
                    <input class="form-control" name="license_key" placeholder="License Key" required autofocus>
                    <input name="id_license" hidden>
                    <div class="input-group-append">
                        <button type="submit" class="input-group-text btn-success bg-success" style="cursor:pointer">
                            <i class="fa fa-save"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>License Name</label>
                <input class="form-control" name="license_name" placeholder="License Name" required>
            </div>
            <div class="form-group">
                <label>Valid Days</label>
                <input class="form-control" name="valid_days" type="number" placeholder="Valid Days" required>
            </div>
            <div class="form-group">
                <label>Device IP</label>
                <input class="form-control" name="device_ip" placeholder="Device IP" readonly>
            </div>
            <div class="form-group">
                <label>Activation Date</label>
                <input class="form-control" name="activation_date" placeholder="Activation Date" readonly>
            </div>
            <div class="form-group">
                <label>Expiry Date</label>
                <input class="form-control" name="expiry_date" placeholder="Expiry Date" readonly>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</div>

<script>

function setViewTo(wrp){
    var index = $('#indexWrapper'),
        detail = $('#detailWrapper');
    
    if(wrp === "DETAIL"){
        hide_element(index);
        show_element(detail);
    }else{
        show_element(index);
        hide_element(detail);
        loadThis();
    }
}

$(document).ready(function () {
    loadThis();
    $(document).on('click', '.btn-new-data', function(e){
        e.preventDefault();
        var form = '<form action="new_license" 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(),
            license_key: ini.find("input[name=license_key]").val(),
            license_name: ini.find("input[name=license_name]").val(),
            valid_days: ini.find("input[name=valid_days]").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', '.license_name', function(e){
        e.preventDefault();
        
        var ini = $(this);
            tr = ini.parents('tr')
            id = tr.find('.id_license').html();
        
        if($.isNumeric(id)) {
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            $.ajax({
                url: '/getLicense',
                type: "get",
                data: {
                        id: id
                      }
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if(result.data[0]){
                    var data = result.data[0];
                    setDetail(data)
                }else{
                    var message = result.message || 'Not found!';
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
            hideLoading(e_modal_wait);
        }
    });
    $(document).on('submit', '.form-update-data', function(e){
        e.preventDefault();
        $('#modal_create_md').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        id_license = $("input[name=id_license]").val();
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = '/update_license/'+id_license;
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            license_key: ini.find("input[name=license_key]").val(),
            license_name: ini.find("input[name=license_name]").val(),
            valid_days: ini.find("input[name=valid_days]").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);
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
});

function loadThis(){
    var datas = loadAsData();
    url = datas.url;
    param = datas.param;
    th = datas.th;
    col_def = datas.col_def;
    columns = datas.columns;
    
    loadTable(url, param, th, col_def, columns);
}
function loadAsData(){
    param = {};
    url = "/getLicense";
    th = '<th width="5%">NO</th>' +
         '<th class="text-dark cursor-default">License Key</th>' +
         '<th class="text-dark cursor-default">License Name</th>' +
         '<th>Valid Days</th>' +
         '<th>Device IP</th>' +
         '<th>Activation Date</th>' +
         '<th>Expiry Date</th>';
    columns = [
                {"data": "id_license", className: "id_license"},
                {"data": "license_key"},
                {"data": "license_name", className: "license_name text-link"},
                {"data": "valid_days"},
                {"data": "device_ip"},
                {"data": "activation_date"},
                {"data": "expiry_date"}
              ];

    col_def = [];   

    currency = {
                "url" : url,
                "param" : param,
                "th" : th,
                "col_def" : col_def,
                "columns" : columns,
               }
    return currency;
}

function setDetail(data){
    var index = $('#indexWrapper');
    var detail = $('#detailWrapper');
        index.addClass('display-none');
        detail.removeClass('display-none');
    
    var ini = detail,  
        input_token = ini.find('input[name=_token]'),   url = ini.attr('action'),
        id = ini.find("input[name=id_license]").val(data.id_license);
        license_key = ini.find("input[name=license_key]").val(data.license_key);
        license_name = ini.find("input[name=license_name]").val(data.license_name);
        valid_days = ini.find("input[name=valid_days]").val(data.valid_days);
        device_ip = ini.find("input[name=device_ip]").val(data.device_ip);
        activation_date = ini.find("input[name=activation_date]").val(data.activation_date);
        expiry_date = ini.find("input[name=expiry_date]").val(data.expiry_date);
}

</script>
@endsection