@extends('layouts.main')

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

@section('content')

<div id="indexWrapper">
    <br>
    <div id="company-nav" class="ml-3 mb-2">
        <ul class="nav nav-pills ml-auto half-height">
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-info" data-status="PENDING">
                    New Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="APPROVED">
                    Approved Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="ACTIVE">
                    Active Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="INACTIVE">
                    InActive Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="EXPIRED">
                    Expired Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="REJECTED">
                    Rejected Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="DELETED">
                    Deleted Users
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetUsers bg-transparent" data-status="UNVERIFIED">
                    Unverified Users
                </button>
            </li>
        </ul>
    </div>
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Company Users</h3>
        </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="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">User</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="row">
                <div class="col-md-3">
                    <label>User Photo</label>
                    <img class="user_photo user_image_edit_prev" width="100%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('user_photo_edit').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="user_photo_edit" name="user_photo_edit" class="user_photo_edit form-control" hidden>
                </div>
                <div class="col-md-9">
                    <div class="form-group">
                        <label>User Name</label>
                        <input class="form-control form-control-sm" name="user_name" placeholder="User Name" >
                        <input name="id_user" hidden>
                    </div>
                    <div class="form-group">
                        <label>User Email</label>
                        <input type="email" class="form-control form-control-sm" name="user_email" placeholder="User Email" >
                    </div>
                    <div class="form-group">
                        <label>Password</label> <b class="text-danger" style="font-size:0.7rem"> * Leave empty if you dont wish to change user password</b>
                        <input type="password" class="form-control form-control-sm" name="password" placeholder="Password">
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control form-control-sm" name="confirm_password" placeholder="Confirm Password">
                    </div>
                    <div class="form-group">
                        <label>User IC Number</label>
                        <input type="number" class="form-control form-control-sm" name="user_ic_number" placeholder="User IC Number" >
                    </div>
                    <div class="form-group">
                        <label>User Telp</label>
                        <input type="number" class="form-control form-control-sm" name="user_telp" placeholder="User Telp" >
                    </div>
                    <div class="form-group">
                        <label>User Address</label>
                        <textarea class="form-control form-control-sm" name="user_address" placeholder="User Address" ></textarea>
                    </div>
                    <div class="form-group">
                        <label>Subscription</label>
                        <div class="form-group mb-3"> 
                            <select name="paket_subscription" id="paket_subscription" class="form-control" required autofocus>  
                            </select>
                        </div>
                        {{-- <input class="form-control form-control-sm" name="paket_subscription" placeholder="Paket Subscription" readonly> --}}
                    </div>
                    <div class="form-group">
                        <label>Expire Date</label>
                        <input class="form-control form-control-sm" name="user_expired" placeholder="Expire Date" type="date">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="button" class="btn btn-sm btn-default pull-left" onclick="setViewTo('INDEX')">Back</button>
            <div class="btn-approve-wrapper pull-left ml-2">
                <button type="button" class="btn btn-sm btn-success btn-approval-user btn-accept" data-status="ACCEPT">ACCEPT</button>
            </div>
            <div class="btn-reject-wrapper pull-left ml-2">
                <button type="button" class="btn btn-sm btn-danger btn-approval-user btn-reject" data-status="REJECT">REJECT</button>
            </div>
            <div class="btn-update-wrapper pull-left ml-2">
                <button type="submit" class="btn btn-sm btn-primary">Update</button>
            </div>
        </div>
    </div>
    </form>
</div>

<script>
    var params = {
        user_status: "PENDING",
    }
    
    $(document).on("click", ".btnGetUsers", function (e) {
        e.preventDefault();
        
        var me = $(this),
            indexWrapper = me.closest('#indexWrapper'),
            allBtn = indexWrapper.find('.btnGetUsers'),
            status = me.data('status');
            // bpr = $('.btnConfirmPaymentRequest');
            
        params.user_status = status;
        allBtn.removeClass('active').removeClass('bg-info');
        allBtn.addClass('bg-transparent');
        me.removeClass('bg-transparent');
        me.addClass('active').addClass('bg-info');

        loadThis(params);
        
        if(status === "UNPAID"){
            // bpr.removeClass('display-none');   
        }else{
            // bpr.addClass('display-none');
        }
    });
    
    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(params);
        }
    }
    
    $(document).ready(function () {
        loadThis(params);
        
        $(document).on('change input', '.user_photo_edit', function(e){
            var target = $('.user_image_edit_prev');
                src = $('.user_photo_edit');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('click', '.btn-approval-user', function(e){
            e.preventDefault();
            
            var ini = $(this),
                status = ini.data('status'),
                wrp = ini.parents('#detailWrapper'),
                id = wrp.find('input[name=id_user]').val();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/userCompanyApproval/'+id,
                    type: "post",
                    data: {
                            _token : wrp.find('input[name=_token]').val(),
                            id_user: id,
                            status: status,
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.status){
                        var message = result.message || 'Success';
                            successAlert(message);
                            setViewTo('INDEX');
                            loadThis(params);
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('click', '.user_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_user').html();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/getUsers',
                    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');

                            const paketSubscription = $("#paket_subscription");
                            paketSubscription.empty();

                            paketSubscription.append($('<option>', {
                                value: '',
                                text: 'Choose Subscription',
                                disabled: true,
                                selected: true
                            }));

                            $.each(data.paket_available, function(index, item) {
                                paketSubscription.append($('<option>', {
                                    value: item.id,
                                    text: item.name
                                }));
                            });

                            id_user = form.find("input[name=id_user]").val(data.id_user);
                            user_name = form.find("input[name=user_name]").val(data.user_name);
                            user_email = form.find("input[name=user_email]").val(data.user_email);
                            user_ic_number = form.find("input[name=user_ic_number]").val(data.user_ic_number);
                            user_telp = form.find("input[name=user_telp]").val(data.user_telp);
                            user_address = form.find("textarea[name=user_address]").val(data.user_address);

                            paketSubscription.val(data.id_paket_subscription).trigger('change');

                            // paket_subscription = form.find("input[name=paket_subscription]").val(data.paket_subscription);
                            
                            user_expired = form.find("input[name=user_expired]").val(data.user_expired_2);
                            user_photo = form.find(".user_photo").attr('src', '/upload_image/user/'+data.user_photo);
                        
                        var btn_approve = $('.btn-approve-wrapper');
                        var btn_reject = $('.btn-reject-wrapper');
                        var btn_update = $('.btn-update-wrapper');

                        if(data.user_status === "PENDING" && data.is_active === "YES"){
                            show_element(btn_approve);
                            show_element(btn_reject);
                            hide_element(btn_update);
                        } else if (data.user_status === "ACCEPTED" && data.is_active === "YES" && data.payment_status === "UNPAID") {
                            hide_element(btn_approve);
                            show_element(btn_reject);
                            show_element(btn_update);
                        } else if (data.user_status === "ACCEPTED" && data.is_active === "YES" && data.payment_status === "PAID") {
                            hide_element(btn_approve);
                            hide_element(btn_reject);
                            show_element(btn_update);
                        }
                        
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        });
        
        $(document).on('submit', '.form-update-data', function(e){
            e.preventDefault();
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this),  input_token = ini.find('input[name=_token]'),   
                id = ini.find("input[name=id_user]").val(),
                url = '/update_company_user/'+id;
            
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                user_name: ini.find("input[name=user_name]").val(),
                user_email: ini.find("input[name=user_email]").val(),
                user_ic_number: ini.find("input[name=user_ic_number]").val(),
                user_telp: ini.find("input[name=user_telp]").val(),
                user_address: ini.find("textarea[name=user_address]").val(),
                user_expired: ini.find("input[name=user_expired]").val(),
                paket_subscription: ini.find("select[name=paket_subscription]").val(),
                password: ini.find("input[name=password]").val(),
                confirm_password: ini.find("input[name=confirm_password]").val(),
            };
            
            var el_photo = $('#user_photo_edit'), 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 (e) {
                    post_data.user_photo = e.target.result;
                    postData(post_data);
                };
            }
            
            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);
                        setViewTo('INDEX');
                        loadThis(params);
                    } else {
                        var message = result.message || 'Api connection problem';
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
        });
        
    });
    
    function loadThis(data){
        var datas = loadAsData(data);
        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 = param;
        url = "/getUsers";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th width="5%">Photo</th>' +
             '<th>Company</th>' +
             '<th class="text-dark cursor-default">User Name</th>' +
             '<th>Code</th>' +
             '<th>Email</th>' +
             '<th>Telp</th>';
        columns = [
                    {"data": "no"},
                    {"data": "id_user", className: "id_user"},
                    {"data": "user_photo"},
                    {"data": "company_name"},
                    {"data": "user_name", className: "user_name text-link"},
                    {"data": "user_code"},
                    {"data": "user_email"},
                    {"data": "user_telp"}
                  ];
    
        col_def = [
                    {
                        "targets" : 2,
                        "data": "user_photo",
                        "render" : function ( url, type, full) {
                       if(!url){
                           return '<img height="60rem" src="/images/logo.png" >';
                       }
                       return '<img height="60rem" src="/upload_image/user/'+url+'" />';
                    }
                    },
            ];   
            
        if(param.user_status != "UNVERIFIED"){
            th += '<th class="now_wrap">Action</th>';
            columns.push({"data": "id_user"});
            col_def.push(
                    {
                        "targets" : 8,
                        "data": "id_user",
                        "render" : function (data, type, row) {
                            return '<button class="btn btn-sm btn-danger btn-delete" data-id="'+row.id_user+'">Delete</button>';
                            
                        }
                    }
                );
         }

        if(param.user_status === "UNVERIFIED"){
            th += '<th class="now_wrap">Verification Code</th>';
            th += '<th class="now_wrap">Action</th>';
            columns.push({"data": "email_verified_at"});
            columns.push({"data": "verification_code"});
            col_def.push(
                    {
                        "targets" : 9,
                        "data": "email_verified_at",
                        "render" : function (data, type, row) {
                            return '<button class="btn btn-sm btn-primary btn-verify" data-id="'+row.id_user+'">Verify</button>';
                            
                        }
                    }
                );
         }
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    $(".searchPaket").select2({
        placeholder: "Please Select",
        ajax: {
            url: "/getPaketSubscription",
            dataType: "json",
            delay: 250,
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            item_text =  item.name;
                            return {
                                text: item_text,
                                id: item.id
                            };
                    })
                };
            },
            cache: false
        }
    });
    
    $(document).on('click', '.btn-delete', 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: '/user_company/delete',
                    type: "get",
                    data: {
                            id_user: 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);
            }
    })

    $(document).on('click', '.btn-verify', 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: '/user_company/verify',
                    type: "get",
                    data: {
                            id_user: 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);
            }
    })
    
</script>
@endsection