@extends('layouts.company_main')

@section('title','Customer')

@section('content')

<div id="indexWrapper">
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Customer</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> Apply New Customer
                </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="display-none" id="detailWrapper">
    <form method="POST" action="update_customer" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Customer</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>Customer Photo</label>
                    <img class="customer_image customer_image_edit_prev" width="100%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('customer_image_edit').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="customer_image_edit" name="customer_image_edit" class="customer_image_edit form-control" hidden>
                </div>
                <div class="col-md-9">
                    <div class="form-group">
                        <label>Customer Name</label>
                        <input class="form-control form-control-sm" name="customer_name" placeholder="Customer Name" required autofodus>
                        <input name="id_customer" hidden>
                    </div>
                    <div class="form-group">
                        <label>Customer Email</label>
                        <input type="email" class="form-control form-control-sm" name="customer_email" placeholder="User Email" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>Customer Telp</label>
                        <input type="number" class="form-control form-control-sm" name="customer_telp" placeholder="User Telp" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>Customer Address</label>
                        <textarea class="form-control form-control-sm" name="customer_address" placeholder="User Address" required autofodus></textarea>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="submit" class="btn btn-sm btn-success">Update</button>
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</div>

<div class="display-none" id="createWrapper">
    <form method="POST" action="new_customer" class="form-new-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">New Customer</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-12">
                    <div class="form-group">
                        <label>Customer Photo</label>
                        <input type="file" class="form-control form-control-sm" accept="image/*" name="customer_image" id="customer_image" placeholder="User Photo" required autofocus>
                    </div>
                    <div class="form-group">
                        <label>Customer Name</label>
                        <input class="form-control form-control-sm" name="customer_name" placeholder="Customer Name" required autofodus>
                        <input name="id_customer" hidden>
                    </div>
                    <div class="form-group">
                        <label>Customer Email</label>
                        <input type="email" class="form-control form-control-sm" name="customer_email" placeholder="User Email" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>Customer Telp</label>
                        <input type="number" class="form-control form-control-sm" name="customer_telp" placeholder="User Telp" required autofodus>
                    </div>
                    <div class="form-group">
                        <label>Customer Address</label>
                        <textarea class="form-control form-control-sm" name="customer_address" placeholder="User Address" required autofodus></textarea>
                    </div>
                </div>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="submit" class="btn btn-sm btn-success">Save</button>
            <button type="button" class="btn btn-sm btn-default" onclick="setViewTo('INDEX')">Back</button>
        </div>
    </div>
    </form>
</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">
                        Customer will permanently be deleted Continue?
                        <hr>
                        <span style="font-weight:bold" class="text-danger">All customer transactions will also be deleted!</span>
                    </span>
                </p>
                    
                <div class="modal-footer" id="delete_footer">
                    
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var params = {
        status: "",
    }
    
    function setViewTo(wrp){
        var index = $('#indexWrapper'),
            create = $('#createWrapper'),
            detail = $('#detailWrapper');
        
        if(wrp === "DETAIL"){
            hide_element(index);
            hide_element(create);
            show_element(detail);
        }else if(wrp === "CREATE"){
            hide_element(index);
            hide_element(detail);
            show_element(create);
        }else{
            show_element(index);
            hide_element(create);
            hide_element(detail);
            loadThis(params);
        }
    }
    
    $(document).ready(function () {
        loadThis(params)
        
        $(document).on('change input', '.customer_image_edit', function(e){
            var target = $('.customer_image_edit_prev');
                src = $('.customer_image_edit');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('click', '.customer_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_customer').html();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/company/getCustomers',
                    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_customer = form.find("input[name=id_customer]").val(data.id_customer);
                            customer_name = form.find("input[name=customer_name]").val(data.customer_name);
                            customer_email = form.find("input[name=customer_email]").val(data.customer_email);
                            customer_telp = form.find("input[name=customer_telp]").val(data.customer_telp);
                            customer_address = form.find("textarea[name=customer_address]").val(data.customer_address);
                            customer_image = form.find(".customer_image").attr('src', '/upload_image/customer/'+data.customer_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_customer');
                mdl = $('#delete_confirmation'),
                ftr = $('#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-customer" data-id="'+id+'">DELETE</button>';
            
            ftr.html(ftr_html);
            if($.isNumeric(id)) {
                mdl.modal('show');
            }
        });
        $(document).on('click', '.btn-delete-customer', 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: 'deleteCustomer',
                type: "get",
                data: {
                        id_customer: 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();
            setViewTo("CREATE");
        });
        $(document).on('submit', '.form-new-data', function(e){
            e.preventDefault();
            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(),
                customer_name: ini.find("input[name=customer_name]").val(),
                customer_email: ini.find("input[name=customer_email]").val(),
                customer_telp: ini.find("input[name=customer_telp]").val(),
                customer_address: ini.find("textarea[name=customer_address]").val(),
            };
            
            var el_photo = document.getElementById('customer_image'), photo = el_photo.files[0];
            
            if (typeof (photo) === "undefined") {
            hideLoading(e_modal_wait);
            var message = 'Customer 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(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);
            }
        });
        $(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]'),   url = ini.attr('action');
            
            var post_data = {
                is_ajax: true,
                _token: input_token.val(),
                id_customer: ini.find("input[name=id_customer]").val(),
                customer_name: ini.find("input[name=customer_name]").val(),
                customer_email: ini.find("input[name=customer_email]").val(),
                customer_telp: ini.find("input[name=customer_telp]").val(),
                customer_address: ini.find("textarea[name=customer_address]").val(),
            };
            
            var el_photo = $('#customer_image_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 () {
                    post_data.customer_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);
                        setViewTo('INDEX');
                        loadThis();
                    } 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 = "getCustomers";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th width="5%">Photo</th>' +
             '<th class="text-dark cursor-default">Customer Name</th>' +
             '<th>Email</th>' +
             '<th>Telp</th>' +
             '<th>Address</th>' +
             '<th>Created_At</th>' +
             '<th width="5%">Action</th>';
        columns = [
                    {"data": "no"},
                    {"data": "id_customer", className: "id_customer"},
                    {"data": "customer_image"},
                    {"data": "customer_name", className: "customer_name text-link"},
                    {"data": "customer_email"},
                    {"data": "customer_telp"},
                    {"data": "customer_address"},
                    {"data": "create_date"},
                    {"data": "id_customer"}
                  ];
        
        col_def = [
                    {
                        "targets" : 1,
                        "data": "id_customer", 
                        "visible" : true,
                    },
                    {
                        "targets" : 2,
                        "data": "customer_image", 
                        "render" : function ( url, type, full) {
                           return '<img height="60rem" src="/upload_image/customer/'+url+'" />';
                        }
                    },
                    {
                    "targets" : 8,
                    "data": "id",
                    "orderable": false,
                    "render" : function (data, type, row) {
                        var drd = '<div>' +
                                    '<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="border-radius: .9rem;">' +
                                    '</button>'+
                                    '<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 38px, 0px); top: 0px; left: 0px; will-change: transform;">' +
                                        '<a class="dropdown-item btn-delete-data" data-id_customer="'+row.id_customer+'" href="#">Delete</a>' +
                                    '</div>' +
                                  '</div>';
                        return drd;
                    }
                },
            ];   
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    
</script>
@endsection