@extends('layouts.company_main')

@section('title','Company')

@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 btnGetCompany bg-info" data-status="PENDING">
                    New Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetCompany bg-transparent" data-status="ACCEPTED">
                    Approved Companies
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetCompany bg-transparent" data-status="REJECTED">
                    Rejected Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetCompany bg-transparent" data-status="BANNED">
                    Banned Application
                </button>
            </li>
        </ul>
    </div>
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Company</h3>
            @if(Auth::guard('organization')->user())
            <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 Company
                </button>
            </div>
            @endif
        </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">Company</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>Lisence Image</label>
                    <img class="img-lisence lisence_image_edit_prev" width="40%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('image_lisence').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="image_lisence" name="image_lisence" class="image_lisence form-control" hidden>
                    <br><a href="#" id="license_img_link" target="new">View</a>
                </div>
                <div class="col-md-3">
                    <label>IC Number</label>
                    <img class="img-ic-number ic-number_image_edit_prev" width="40%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('image_ic_number').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="image_ic_number" name="image_ic_number" class="image_ic_number form-control" hidden>
                    <br><a href="#" id="ic_number_img_link" target="new">View</a>
                </div>
                <div class="col-md-3">
                    <label>Owner Photo</label>
                    <img class="img-owner-photo owner_photo_image_edit_prev" width="40%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('owner_photo').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="owner_photo" name="owner_photo" class="owner_photo form-control" hidden>
                    <br><a href="#" id="owner_img_link" target="new">View</a>
                </div>
            </div><br>
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Company Code</label>
                        <input class="form-control form-control-sm" name="company_code" readonly>
                        <input name="id_company" hidden>
                    </div>
                    <div class="form-group">
                        <label>Company Name</label>
                        <input class="form-control form-control-sm" name="company_name" placeholder="Company Name" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Company Email</label>
                        <input type="email" class="form-control form-control-sm" name="company_email" placeholder="Company Email" required autofocus >
                    </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="company_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>Company Telp</label>
                        <input type="number" class="form-control form-control-sm" name="company_telp" placeholder="Company Telp" required autofocus >
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Organization</label>
                        <!--<input class="form-control form-control-sm" name="company_country" placeholder="Company Country" >-->
                        <select class="form-control form-control-sm searchOrganization input_id_organization" id="id_organization" name="id_organization" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                    </div>
                    <div class="form-group">
                        <label>Company Fax</label>
                        <input class="form-control form-control-sm" name="company_fax" placeholder="Company Fax" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Company Lisence</label>
                        <input class="form-control form-control-sm" name="number_lisence" placeholder="Company Lisence" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Owner Name</label>
                        <input class="form-control form-control-sm" name="owner_name" placeholder="Owner Name" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Owner IC Number</label>
                        <input class="form-control form-control-sm" name="owner_ic_number" placeholder="Owner IC Number" required autofocus >
                    </div>
                </div>
                
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Country</label>
                        <!--<input class="form-control form-control-sm" name="company_country" placeholder="Company Country" >-->
                        <select class="form-control form-control-sm searchCountry input_id_country" id="id_country" name="id_country" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>State</label>
                        <!--<input class="form-control form-control-sm" name="company_state" placeholder="Company State" >-->
                        <select class="form-control form-control-sm searchState input_id_state" id="id_state" name="id_state" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>City</label>
                        <!--<input class="form-control form-control-sm" name="company_city" placeholder="Company City" >-->
                        <select class="form-control form-control-sm searchCity input_id_city" id="id_city" name="id_city" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
                    </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>
            <button type="button" class="btn btn-sm btn-danger btn-approval-company btn-reject" data-status="REJECT">Reject</button>
            <button type="button" class="btn btn-sm btn-success btn-approval-company btn-accept" data-status="ACCEPT">Approve</button>
            <button type="submit" class="btn btn-sm btn-primary">Update</button>
        </div>
    </div>
    </form>
</div>
<div class="display-none" id="createWrapper">
    <form method="POST" action="#create" class="form-new-data" enctype="multipart/form-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">New Company</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-6">
        		            <div class="form-group">
            				    <label class="text">Company Name</label>
            				    <input name="company_name" class="form-control form-control-sm company_name" placeholder="Company Name" required autofocus>
            				</div>
            				<div class="form-group">
            				    <label class="text">Company Email</label>
            				    <input name="company_email" type="email" class="form-control form-control-sm company_email" placeholder="Email" required autofocus>
            				</div>
            				<div class="form-group">
            				    <label class="text">Company Phone Number</label>
            				    <input name="company_telp" 
            				    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            				    type="number" 
            				    maxlength = "11"
            				    class="form-control form-control-sm company_telp" 
            				    placeholder="Phone Number" 
            				    required autofocus>
            				</div>
            				<div class="form-group">
            				    <label class="text">Company Fax</label>
            				    <input name="company_fax" 
            				    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
            				    type="number" 
            				    maxlength = "11"
            				    class="form-control form-control-sm company_fax" 
            				    placeholder="Fax Number" 
            				    required autofocus>
            				</div>
            				<div class="form-group">
            				    <label class="text">Company Lisence Number</label>
            				    <input name="number_lisence"type="text"  class="form-control form-control-sm number_lisence" placeholder="Company Lisence Numberr" required autofocus>
            				</div>
        		        </div>
        		        
        		        <div class="col-md-6">
        		            <div class="form-group">
            				    <label class="text">Owner Name</label>
            				    <input name="owner_name" class="form-control form-control-sm owner_name" placeholder="Owner Name" required autofocus>
            				</div>
        		            <div class="form-group">
            				    <label class="text">Owner MYKAD No./Passport No.</label>
            				    <input type="number" name="owner_ic_number" class="form-control form-control-sm owner_ic_number" placeholder="Owner MYKAD No./Passport No." required autofocus>
            				</div>
            				<div class="form-group">
            				    <label class="text">Country</label>
            				    <select class="form-control form-control-sm searchCountry input_id_country" id="id_country" name="id_country" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
            				</div>
            				<div class="form-group" id="div_province">
            				    <label class="text">Province</label>
            				    <select class="form-control form-control-sm searchState input_id_province" id="id_state" name="id_state" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
            				    
            				</div>
        		            <div class="form-group" id="div_city">
            				    <label class="text">City</label>
            				    <select class="form-control form-control-sm searchCity input_id_city" id="id_city" name="id_city" style="width: 100%; height: calc(2.19rem + 2px) !important;" required autofocus></select>
            				</div>
        		        </div>
        		        <div class="col-md-12">
        		            <div class="row">
        		                <div class="col-md-4">
        		                    <div class="form-group">
                    				    <label class="text">Trading License Photo</label>
                    				    <input name="image_lisence_create" type="file" accept="image/*" class="form-control form-control-sm image_lisence_create" id="image_lisence_create" required autofocus>
                    				</div>  
        		                </div>
        		                <div class="col-md-4">
        		                    <div class="form-group">
                    				    <label class="text">Company Logo</label>
                    				    <input name="owner_photo_create" type="file" accept="image/*" class="form-control form-control-sm owner_photo_create" id="owner_photo_create" required autofocus>
                    				</div>
        		                </div>
        		                <div class="col-md-4">
                    				<div class="form-group">
                    				    <label class="text">Owner IC Number Photo</label>
                    				    <input name="image_ic_number_create" type="file" accept="image/*" class="form-control form-control-sm image_ic_number_create" id="image_ic_number_create" required autofocus>
                    				</div>
        		                </div>
        		            </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>
            <button type="submit" class="btn btn-sm btn-info">Save</button>
        </div>
    </div>
    </form>
</div>

<div class="display-none" id="updateCompanyStatusWrapper">
    <form method="POST" action="#update" class="form-update-company-status" enctype="multipart/form-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Update Company Status</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-6">
	            <div class="form-group">
				    <label class="text">Company Status</label>
				    <input name="company_status" class="form-control form-control-sm company_status" placeholder="Company Status" readonly required autofocus>
				    <input name="id_company" hidden class="form-control form-control-sm company_status" placeholder="Company Status" readonly required autofocus>
				</div>
				<div class="form-group">
				    <label class="text">Reason</label>
				    <textarea name="reason" class="form-control form-control-sm reason" placeholder="Reason" rows="3" required autofocus></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>
            <button type="submit" class="btn btn-sm btn-info">Save</button>
        </div>
    </div>
    </form>
</div>

<script>
    var params = {
        company_status: "PENDING",
    }
    $(document).on("click", ".btnGetCompany", function (e) {
        e.preventDefault();
        
        var me = $(this),
            indexWrapper = me.closest('#indexWrapper'),
            allBtn = indexWrapper.find('.btnGetCompany'),
            status = me.data('status');
            // bpr = $('.btnConfirmPaymentRequest');
            
        params.company_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 previewImage(src, target){
        src = src[0];
        var fr = new FileReader();
        fr.onload = function() {
            target.attr("src",fr.result);
        }
        if(src.files[0]){
            fr.readAsDataURL(src.files[0]);
        }
    }
    function setViewTo(wrp){
        var index = $('#indexWrapper'),
            create = $('#createWrapper'),
            detail = $('#detailWrapper');
            update_company_status = $('#updateCompanyStatusWrapper');
        
        if(wrp === "DETAIL"){
            hide_element(index);
            hide_element(create);
            hide_element(update_company_status);
            show_element(detail);
        }else if(wrp === "CREATE"){
            hide_element(index);
            hide_element(detail);
            hide_element(update_company_status);
            show_element(create);
        }else if(wrp === "UPDATE_COMPANY_STATUS"){
            hide_element(index);
            hide_element(detail);
            hide_element(create);
            show_element(update_company_status);
        }else{
            show_element(index);
            hide_element(create);
            hide_element(detail);
            hide_element(update_company_status);
            loadThis(params);
        }
    }
    function showButton(to){
        var accept = $('.btn-accept'),
            reject = $('.btn-reject');
        
        if(to === "REJECT"){
            show_element(accept);
            hide_element(reject);
        }else if(to === "ACCEPT"){
            hide_element(accept);
            show_element(reject);
        }else{
            show_element(accept);
            show_element(reject);
        }
    }
    
    $(document).ready(function () {
        loadThis(params);
        
        $(document).on('change input', '.image_lisence', function(e){
            var target = $('.lisence_image_edit_prev');
                src = $('.image_lisence');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('change input', '.owner_photo', function(e){
            var target = $('.owner_photo_image_edit_prev');
                src = $('.owner_photo');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('change input', '.image_ic_number', function(e){
            var target = $('.ic-number_image_edit_prev');
                src = $('.image_ic_number');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        $(document).on('click', '.btn-approval-company', function(e){
            e.preventDefault();
            
            var ini = $(this),
                status = ini.data('status'),
                wrp = ini.parents('#detailWrapper'),
                id = wrp.find('input[name=id_company]').val();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/companyApproval/'+id,
                    type: "post",
                    data: {
                            _token : wrp.find('input[name=_token]').val(),
                            id_company: 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', '.company_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_company').html(),
                card = $('.card-body');
                dataTableRow = $('#dataTableRow');
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/getCompany',
                    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_company = form.find("input[name=id_company]").val(data.id_company);
                            company_code = form.find("input[name=company_code]").val(data.company_code);
                            company_name = form.find("input[name=company_name]").val(data.company_name);
                            company_email = form.find("input[name=company_email]").val(data.company_email);
                            company_telp = form.find("input[name=company_telp]").val(data.company_telp);
                            company_fax = form.find("input[name=company_fax]").val(data.company_fax);
                            number_lisence = form.find("input[name=number_lisence]").val(data.number_lisence);
                            owner_name = form.find("input[name=owner_name]").val(data.owner_name);
                            owner_ic_number = form.find("input[name=owner_ic_number]").val(data.owner_ic_number);
                            
                            company_organization = form.find("input[name=company_organization]").val(data.company_organization);
                            company_country = form.find("input[name=company_country]").val(data.company_country);
                            company_state = form.find("input[name=company_state]").val(data.company_state);
                            company_city = form.find("input[name=company_city]").val(data.company_city);
                            
                            img_lisence = form.find(".img-lisence");
                            img_ic_number = form.find(".img-ic-number");
                            img_owner_photo = form.find(".img-owner-photo");
                            
                            img_lisence.attr('src', '/upload_image/lisence/'+data.image_lisence);
                            img_ic_number.attr('src', '/upload_image/ic_owner/'+data.image_ic_number);
                            img_owner_photo.attr('src', '/upload_image/company/'+data.owner_photo);
                            
                            $('#license_img_link').attr('href', '/upload_image/lisence/'+data.image_lisence)
                            $('#ic_number_img_link').attr('href', '/upload_image/ic_owner/'+data.image_ic_number)
                            $('#owner_img_link').attr('href', '/upload_image/company/'+data.owner_photo)
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_organization).text(data.company_organization)
                            $('.searchOrganization').append($newOption).trigger('change');
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_country).text(data.company_country)
                            $('.searchCountry').append($newOption).trigger('change');
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_state).text(data.company_state)
                            $('.searchState').append($newOption).trigger('change');
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_city).text(data.company_city)
                            $('.searchCity').append($newOption).trigger('change');
        
                            if(data.company_status == "ACCEPTED"){
                                showButton("ACCEPT")
                            }else if(data.company_status == "REJECTED"){
                                showButton("REJECT")
                            }else{
                                showButton("ALL")
                            }
                    }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 = '/new_company';
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                company_name: ini.find("input[name=company_name]").val(),
                company_email: ini.find("input[name=company_email]").val(),
                company_telp: ini.find("input[name=company_telp]").val(),
                company_fax: ini.find("input[name=company_fax]").val(),
                number_lisence: ini.find("input[name=number_lisence]").val(),
                owner_name: ini.find("input[name=owner_name]").val(),
                owner_ic_number: ini.find("input[name=owner_ic_number]").val(),
                id_city: ini.find("select[name=id_city]").val(),
                id_state: ini.find("select[name=id_state]").val(),
                id_country: ini.find("select[name=id_country]").val(),
            };
            
            var el_image_lisence = document.getElementById('image_lisence_create'), image_lisence = el_image_lisence.files[0],
            el_owner_photo = document.getElementById('owner_photo_create'), owner_photo = el_owner_photo.files[0],
            el_image_ic_number = document.getElementById('image_ic_number_create'), image_ic_number = el_image_ic_number.files[0];
    
            if (typeof (image_lisence) === "undefined") {
                if (typeof (owner_photo) === "undefined") {
                    if (typeof (image_ic_number) === "undefined") {
                        postData(data);
                    } else {
                        var reader_image_ic_number = new FileReader();
                        reader_image_ic_number.readAsDataURL(image_ic_number);
                        reader_image_ic_number.onloadend = function () {
                            data.image_ic_number = reader_image_ic_number.result;
                            postData(data);
                        };
                    }
                } else {
                    var reader_owner_photo = new FileReader();
                    reader_owner_photo.readAsDataURL(owner_photo);
                    reader_owner_photo.onloadend = function () {
                        data.owner_photo = reader_owner_photo.result;
                        
                        if (typeof (image_ic_number) === "undefined") {
                            postData(data);
                        } else {
                            var reader_image_ic_number = new FileReader();
                            reader_image_ic_number.readAsDataURL(image_ic_number);
                            reader_image_ic_number.onloadend = function () {
                                data.image_ic_number = reader_image_ic_number.result;
                                postData(data);
                            };
                        }
                        
                    };
                }
            } else {
                var readerLisence = new FileReader();
                readerLisence.readAsDataURL(image_lisence);
                readerLisence.onloadend = function () {
                    data.image_lisence =  readerLisence.result
                    
                    if (typeof (owner_photo) === "undefined") {
                        if (typeof (image_ic_number) === "undefined") {
                            postData(data);
                        } else {
                            var reader_image_ic_number = new FileReader();
                            reader_image_ic_number.readAsDataURL(image_ic_number);
                            reader_image_ic_number.onloadend = function () {
                                data.image_ic_number = reader_image_ic_number.result;
                                postData(data);
                            };
                        }
                    } else {
                        var reader_owner_photo = new FileReader();
                        reader_owner_photo.readAsDataURL(owner_photo);
                        reader_owner_photo.onloadend = function () {
                            data.owner_photo = reader_owner_photo.result;
                            
                            if (typeof (image_ic_number) === "undefined") {
                                postData(data);
                            } else {
                                var reader_image_ic_number = new FileReader();
                                reader_image_ic_number.readAsDataURL(image_ic_number);
                                reader_image_ic_number.onloadend = function () {
                                    data.image_ic_number = reader_image_ic_number.result;
                                    postData(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);
            }
            // postData(data)
        });
        
        $(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_company]").val(),
                url = '/update_company/'+id;
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                company_name: ini.find("input[name=company_name]").val(),
                company_email: ini.find("input[name=company_email]").val(),
                company_password: ini.find("input[name=company_password]").val(),
                confirm_password: ini.find("input[name=confirm_password]").val(),
                company_telp: ini.find("input[name=company_telp]").val(),
                company_fax: ini.find("input[name=company_fax]").val(),
                number_lisence: ini.find("input[name=number_lisence]").val(),
                owner_name: ini.find("input[name=owner_name]").val(),
                owner_ic_number: ini.find("input[name=owner_ic_number]").val(),
                id_organization: ini.find("select[name=id_organization]").val(),
                id_city: ini.find("select[name=id_city]").val(),
                id_state: ini.find("select[name=id_state]").val(),
                id_country: ini.find("select[name=id_country]").val(),
            };
            var el_image_lisence = document.getElementById('image_lisence'), image_lisence = el_image_lisence.files[0],
                el_owner_photo = document.getElementById('owner_photo'), owner_photo = el_owner_photo.files[0],
                el_image_ic_number = document.getElementById('image_ic_number'), image_ic_number = el_image_ic_number.files[0];
    
            if (typeof (image_lisence) === "undefined") {
                if (typeof (owner_photo) === "undefined") {
                    if (typeof (image_ic_number) === "undefined") {
                        postData(data);
                    } else {
                        var reader_image_ic_number = new FileReader();
                        reader_image_ic_number.readAsDataURL(image_ic_number);
                        reader_image_ic_number.onloadend = function () {
                            data.image_ic_number = reader_image_ic_number.result;
                            postData(data);
                        };
                    }
                } else {
                    var reader_owner_photo = new FileReader();
                    reader_owner_photo.readAsDataURL(owner_photo);
                    reader_owner_photo.onloadend = function () {
                        data.owner_photo = reader_owner_photo.result;
                        
                        if (typeof (image_ic_number) === "undefined") {
                            postData(data);
                        } else {
                            var reader_image_ic_number = new FileReader();
                            reader_image_ic_number.readAsDataURL(image_ic_number);
                            reader_image_ic_number.onloadend = function () {
                                data.image_ic_number = reader_image_ic_number.result;
                                postData(data);
                            };
                        }
                        
                    };
                }
            } else {
                var readerLisence = new FileReader();
                readerLisence.readAsDataURL(image_lisence);
                readerLisence.onloadend = function () {
                    data.image_lisence =  readerLisence.result
                    
                    if (typeof (owner_photo) === "undefined") {
                        if (typeof (image_ic_number) === "undefined") {
                            postData(data);
                        } else {
                            var reader_image_ic_number = new FileReader();
                            reader_image_ic_number.readAsDataURL(image_ic_number);
                            reader_image_ic_number.onloadend = function () {
                                data.image_ic_number = reader_image_ic_number.result;
                                postData(data);
                            };
                        }
                    } else {
                        var reader_owner_photo = new FileReader();
                        reader_owner_photo.readAsDataURL(owner_photo);
                        reader_owner_photo.onloadend = function () {
                            data.owner_photo = reader_owner_photo.result;
                            
                            if (typeof (image_ic_number) === "undefined") {
                                postData(data);
                            } else {
                                var reader_image_ic_number = new FileReader();
                                reader_image_ic_number.readAsDataURL(image_ic_number);
                                reader_image_ic_number.onloadend = function () {
                                    data.image_ic_number = reader_image_ic_number.result;
                                    postData(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);
            }
            // postData(data)
        });
        
    });
    
    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){
        
        // var d = {{ auth()->user()->id_organization }};
        // alert(d);
        
        param = param;
        url = "/getCompany";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th>Organization</th>' +
             '<th class="text-dark cursor-default">Company Name</th>' +
             '<th>Email</th>' +
             '<th>Telp</th>' +
             '<th>Fax</th>' +
             '<th>Lisence</th>' +
             '<th>Owner Name</th>' +
             '<th>Owner IC Num</th>'
        columns = [
                    {"data": "no"},
                    {"data": "id_company", className: "id_company"},
                    {"data": "company_organization"},
                    {"data": "company_name", className: "company_name text-link"},
                    {"data": "company_email"},
                    {"data": "company_telp"},
                    {"data": "company_fax"},
                    {"data": "number_lisence"},
                    {"data": "owner_name"},
                    {"data": "owner_ic_number"},
                  ];
    
        col_def = [];   
        
        if(param.company_status === "ACCEPTED"){
            th += '<th>Action</th>';
            columns.push({"data": "id_compay"});
            col_def.push(
                    {
                        "targets" : 10,
                        "data": "id_company",
                        "render" : function (data, type, row) {
                                return '<button class="btn btn-sm btn-danger btn-ban" data-id="'+row.id_company+'">Ban</button>';
                        
                        }
                    }
                );
            
        }
        
        if(param.company_status === "BANNED"){
            th += '<th>Reason</th>';
            th += '<th>Action</th>';
            columns.push({"data": "reason_ban"});
            columns.push({"data": "id_company"});
            col_def.push(
                    {
                        "targets" : 11,
                        "data": "id_company",
                        "render" : function (data, type, row) {
                                return '<button class="btn btn-sm btn-info btn-ban" data-id="'+row.id_company+'">Unban</button>';
                        
                        }
                    }
                );
            
        }
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    
    $(document).on('click', '.btn-ban', function(e){
            e.preventDefault();
            var ini = $(this),
                id = ini.data('id');
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo('UPDATE_COMPANY_STATUS');
                $.ajax({
                    url: '/getCompany',
                    type: "get",
                    data: {
                            id: id
                          }
                })
                .done(function (result) {
                    hideLoading(e_modal_wait);
                    if(result.data[0]){
                        var update_status = result.data[0].company_status != 'BANNED' ? 'BAN' : 'UNBAN';

                        var data = result.data[0],
                            form = $('.form-update-company-status'),
                            id_company = form.find("input[name=id_company]").val(data.id_company);
                            company_status = form.find("input[name=company_status]").val(update_status);
                            
                    }else{
                        var message = result.message || 'Not found!';
                        failedAlert(message);
                    }
                })
                .fail(ajax_fail);
            }
        })
        
    $(document).on('submit', '.form-update-company-status', function(e){
            e.preventDefault();
        
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            
            var ini = $(this),  input_token = ini.find('input[name=_token]'),   
                url = '/update_company_status';
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                id_company: ini.find("input[name=id_company]").val(),
                company_status: ini.find("input[name=company_status]").val(),
                reason: ini.find("textarea[name=reason]").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);
                        setViewTo('INDEX');
                        loadThis(params);
                    } else {
                        var message = result.message || 'Api connection problem';
                        failedAlert(message);
                    }
                    input_token.val(result.newtoken);
                })
                .fail(ajax_fail);
            }
            postData(data);
        });
    
    $(".searchCountry").select2({
        placeholder: "Please Select",
        ajax: {
            url: '/getCountry',
            data: {},
            dataType: "json",
            delay: 250,
            width: "resolve",
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            return {
                                text: item.country_name,
                                id: item.id_country
                            };
                    })
                };
            },
            cache: false
        }
    }).on('change', function (e) {
        id_country = this.value;
        loadSearchState(id_country)
    });
    
    $(".searchOrganization").select2({
        placeholder: "Please Select",
        ajax: {
            url: '/getOrganization',
            data: {},
            dataType: "json",
            delay: 250,
            width: "resolve",
            processResults: function (data) {
                data = data.data;
                return {
                    results: $.map(data, function (item) {
                            return {
                                text: item.organization_name,
                                id: item.id_organization
                            };
                    })
                };
            },
            cache: false
        }
    }).on('change', function (e) {
        id_organization = this.value;
        // loadSearchState(id_country)
    });
        
    function loadSearchState(id_country){
        $(".searchState").select2({
            placeholder: "Please Select",
            ajax: {
                url: '/getState',
                data: {
                    id_country: id_country
                },
                dataType: "json",
                delay: 250,
                width: "resolve",
                processResults: function (data) {
                    data = data.data;
                    return {
                        results: $.map(data, function (item) {
                                return {
                                    text: item.state_name,
                                    id: item.id_state
                                };
                        })
                    };
                },
                cache: false
            }
        }).on('change', function (e) {
            id_state = this.value;
            loadSearchCity(id_state)
        });
        var $newOption = $("<option selected='selected'></option>").val('').text('Please Select')
        $('.searchState').append($newOption).trigger('change');
    }
    function loadSearchCity(id_state){
        $(".searchCity").select2({
            placeholder: "Please Select",
            ajax: {
                url: '/getCity',
                data: {
                    id_state: id_state
                },
                dataType: "json",
                delay: 250,
                width: "resolve",
                processResults: function (data) {
                    data = data.data;
                    return {
                        results: $.map(data, function (item) {
                                return {
                                    text: item.city_name,
                                    id: item.id_city
                                };
                        })
                    };
                },
                cache: false
            }
        });
        var $newOption = $("<option selected='selected'></option>").val('').text('Please Select')
        $('.searchCity').append($newOption).trigger('change');
    }
</script>
@endsection