@extends('layouts.company_main')

@section('title','Expenses')

@section('content')

<div class="card martop-1">
    <div class="card-header">
        <h3 class="card-title">Expenses</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 Expenses
            </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="">
                <form method="POST" action="new_purchase" 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="alt_image" width="100px" style="cursor:pointer"
                            onclick="event.preventDefault(); document.getElementById('purchase_image').click();">
                            <input type="file" accept="image/x-png,image/jpg,image/jpeg" id="purchase_image" name="purchase_image" class="purchase_image form-control" hidden>
                        </div>
                        <div class="form-group">
                            <label>User</label>
                            <select class="form-control form-control-sm searchUser id_user" id="id_user" name="id_user" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                        </div>
                        <div class="form-group">
                            <label>Expenses</label>
                            <input class="angka form-control" name="purchase" placeholder="Expenses" required autofocus type="text">
                        </div>
                        <div class="form-group">
                            <label>Note</label>
                            <textarea class="form-control" name="note" placeholder="Note" required autofocus rows="2"></textarea>
                        </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>
                <form method="POST" action="#update" class="form-update-data">
                @csrf
                    <div class="modal-body">
                        <div class="form-group text-center">
                            <img class="image_prev prev-item-image-2" width="50%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('purchase_image_2').click();" onerror="imgError(this);">
                            <input type="file" accept="image/*" id="purchase_image_2" name="purchase_image_2" class="purchase_image_2 form-control" hidden>
                            <br><br><a href="#" id="purchase_image_link" target="new"><h3>View</h3></a>
                        </div>
                        <div class="form-group">
                            <label>User</label>
                            <input class="form-control" name="user_name" placeholder="User Name" readonly>
                            <input name="id_user" hidden>
                        </div>
                        <div class="form-group">
                            <label>Expenses</label>
                            <input class="form-control" name="purchase" placeholder="Expenses" required autofocus type="number">
                        </div>
                        <div class="form-group">
                            <label>Note</label>
                            <textarea class="form-control" name="note" placeholder="Note" required autofocus rows="2"></textarea>
                        </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="delete_confirmation" role="dialog" aria-labelledby="failed">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body text-center">
                <img src="{{asset('images/icon_failed.png')}}" width="35%" height="40%">
                <br>
                <p class="mt-4">
                    <span style="font-weight:bold">
                        Expenses will permanently be deleted Continue?
                        <br>
                        User Cash in Hand will fully be refunded! 
                    </span>
                </p>
                    
                <div class="modal-footer" id="purchase_delete_footer">
                    
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function () {
        loadThis();
        
        $(document).on('click', '.user_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr'),
                id = tr.find('.id_purchase').html(),
                mdl = $('#modal_update_data');
            
            if($.isNumeric(id)) {
                mdl.modal('show');
                form = $('.form-update-data');
                form.attr('action', 'update_purchase/'+id);
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: 'getPurchase',
                    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'),
                            id_user = form.find("input[name=id_user]").val(data.id_user);
                            user_name = form.find("input[name=user_name]").val(data.user_name);
                            purchase = form.find("input[name=purchase]").val(data.purchase);
                            note = form.find("textarea[name=note]").val(data.note);
                            image = form.find(".prev-item-image-2").attr('src', '/upload_image/purchase/'+data.image);
                            el_image = form.find("input[name=purchase_image_2]").val(null);
                            
                            $('#purchase_image_link').attr('href', '/upload_image/purchase/'+data.image)
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.btn-delete-data', function(e){
            e.preventDefault();
            
            var ini = $(this);
                id = ini.data('id');
                mdl = $('#delete_confirmation'),
                ftr = $('#purchase_delete_footer');
            
            ftr_html = '<a href="#" class="btn btn-info btn-sm" data-dismiss="modal">Close</a>' +
                       '<button class="btn btn-sm btn-danger btn-delete-purchase" data-id="'+id+'">DELETE</button>';
            
            ftr.html(ftr_html);
            if($.isNumeric(id)) {
                mdl.modal('show');
            }
        });
        $(document).on('click', '.btn-delete-purchase', function(e){
            e.preventDefault();
            
            var ini = $(this),
                id = ini.data('id'),
                e_modal_wait = $("#modalWait");
            
            $('#delete_confirmation').modal('hide');
            showLoading(e_modal_wait);
            $.ajax({
                url: 'deletePurchase',
                type: "get",
                data: {
                        id: id
                      }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if(result.status){
                    loadThis();
                }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(),
                id_user: ini.find("select[name=id_user]").val(),
                purchase: ini.find("input[name=purchase]").val(),
                note: ini.find("textarea[name=note]").val(),
            };
            
            var el_photo = document.getElementById('purchase_image'), photo = el_photo.files[0];
            
            if (typeof (photo) === "undefined") {
            hideLoading(e_modal_wait);
            var message = 'Purchase 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);
                        
                        id_user = ini.find("select[name=id_user]");
                        var $newOption = $("<option selected='selected'></option>").val(null).text(null)
                        id_user.append($newOption).trigger('change');
                        
                        ini.find("input[name=purchase]").val(null);
                        ini.find("textarea[name=note]").val(null);
                        ini.find(".prev-item-image").attr('src', '/images/upload.png');
                        ini.find("input[name=purchase_image]").val(null);
                        
                        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(),
                id_user: ini.find("input[name=id_user]").val(),
                purchase: ini.find("input[name=purchase]").val(),
                note: ini.find("textarea[name=note]").val(),
            };
            
            var el_photo = $('#purchase_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.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('change input', '.purchase_image', function(e){
            var target = $('.prev-item-image');
                src = $('.purchase_image');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('change input', '.purchase_image_2', function(e){
            var target = $('.prev-item-image-2');
                src = $('.purchase_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;
        order = [['0', 'desc']];
        
        loadTable(url, param, th, col_def, columns, order);
    }
    function loadAsData(){
        param = {};
        url = "getPurchase";
        th = '<th width="5%">ID</th>' +
             '<th width="5%">Image</th>' +
             '<th class="text-dark cursor-default">User</th>' +
             '<th>Expenses</th>' +
             '<th>Note</th>' +
             '<th>Created_At</th>' +
             '<th width="5%">Action</th>';
        columns = [
                    {"data": "id_purchase", className: "id_purchase"},
                    {"data": "image"},
                    {"data": "user_name", className: "user_name text-link"},
                    {"data": "purchase"},
                    {"data": "note"},
                    {"data": "create_date"},
                    {"data": "id_purchase"},
                  ];
    
        col_def = [
                {
                    "targets" : 1,
                    "data": "image",
                    "render" : function ( url, type, full) {
                       if(!url){
                           return '<img height="100px" src="/images/logo.png" >';
                       }
                       return '<img height="100px" src="/upload_image/purchase/'+url+'" />';
                    }
                },
                {
                    "targets" : 3,
                    "data": "purchase",
                    "render" : function (data, type, row) {
                        return 'RM ' + row.purchase;
                    }
                },
                {
                    "targets" : 6,
                    "data": "id_purchase",
                    "render" : function (data, type, row) {
                       return '<a href="#" data-id="'+row.id_purchase+'" class="btn-delete-data btn btn-sm btn-danger">' +
                                '<i class="fa fa-trash"></i> DELETE' + 
                              '</a>';
                    }
                }
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    
    $(".searchUser").select2({
        placeholder: "Please Select",
        ajax: {
            url: "/company/getUsers",
            dataType: "json",
            data:{
                user_status: "ACTIVE"
            },
            delay: 250,
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            item_text =  item.user_name;
                            return {
                                text: item_text,
                                id: item.id_user
                            };
                    })
                };
            },
            cache: false
        }
    });
    
    $('.angka').on('change, keyup', function() {
        var currentInput = $(this).val();
        var fixedInput = currentInput.replace(/[A-Za-z!@#$%^&*()]/g, '');
        $(this).val(fixedInput);
        console.log(fixedInput);
    });
</script>
@endsection