@extends('layouts.main')

@section('title','Organization')

@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 btnGetOrganization bg-info" data-status="PENDING">
                    New Application
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetOrganization bg-transparent" data-status="ACCEPTED">
                    Approved Organization
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetOrganization bg-transparent" data-status="INACTIVE">
                    InActive Organization
                </button>
            </li>
            <li class="nav-item half-height">
                <button class="btn btn-md btnGetOrganization bg-transparent" data-status="REJECTED">
                    Rejected Organization
                </button>
            </li>
        </ul>
    </div>
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Organization</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 Organization
                </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" class="form-update-data">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Organization</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>
            @if(false)
            <div class="row">
                <div class="col-md-3">
                    <label>Photo Organization</label>
                    <img class="img-organization organization_image_edit_prev" width="40%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('image_organization').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="image_organization" name="image_organization" class="image_organization form-control" hidden>
                    <br><a href="#" id="organization_img_link" target="new">View</a>
                </div>
            </div><br>
            @endif
            
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Organization Code</label>
                        <input class="form-control form-control-sm" name="organization_code" readonly>
                        <input name="id_organization" hidden>
                    </div>
                    <div class="form-group">
                        <label>Organization Name</label>
                        <input class="form-control form-control-sm" name="organization_name" placeholder="Organization Name" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Organization Email</label>
                        <input type="email" class="form-control form-control-sm" name="organization_email" placeholder="Organization Email" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Organization Telp</label>
                        <input type="number" class="form-control form-control-sm" name="organization_telp" placeholder="Organization Telp" 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="organization_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>
               
                
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Country</label>
                        <!--<input class="form-control form-control-sm" name="organization_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 class="form-group">
                        <label>State</label>
                        <!--<input class="form-control form-control-sm" name="organization_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 class="form-group">
                        <label>City</label>
                        <!--<input class="form-control form-control-sm" name="organization_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-organization btn-reject" data-status="REJECT">Reject</button>
            <button type="button" class="btn btn-sm btn-success btn-approval-organization 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">
    @csrf
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">New Organization</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>
            
            @if(false)
            <div class="row">
                <div class="col-md-3">
                    <label>Photo Organization</label>
                    <img class="img-organization organization_image_edit_prev" width="40%" style="cursor:pointer" onclick="event.preventDefault(); document.getElementById('image_organization').click();" onerror="imgError(this);">
                    <input type="file" accept="image/*" id="image_organization" name="image_organization" class="image_organization form-control" hidden>
                    <br><a href="#" id="organization_img_link" target="new">View</a>
                </div>
            </div><br>
            @endif
            
            <div class="row">
                <div class="col-md-6">
                    
                    <div class="form-group">
                        <label>Organization Name</label>
                        <input class="form-control form-control-sm" name="organization_name" placeholder="Organization Name" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Organization Email</label>
                        <input type="email" class="form-control form-control-sm" name="organization_email" placeholder="Organization Email" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Organization Telp</label>
                        <input type="number" class="form-control form-control-sm" name="organization_telp" placeholder="Organization Telp" required autofocus >
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control form-control-sm" name="organization_password" placeholder="Password" required autofocus>
                    </div>
                    <div class="form-group">
                        <label>Confirm Password</label>
                        <input type="password" class="form-control form-control-sm" name="confirm_password" placeholder="Confirm Password" required autofocus>
                    </div>
                    
                </div>
               
                
                <div class="col-md-6">
                    <div class="form-group">
                        <label>Country</label>
                        <!--<input class="form-control form-control-sm" name="organization_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 class="form-group">
                        <label>State</label>
                        <!--<input class="form-control form-control-sm" name="organization_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 class="form-group">
                        <label>City</label>
                        <!--<input class="form-control form-control-sm" name="organization_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="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 = {
        organization_status: "PENDING",
    }
    $(document).on("click", ".btnGetOrganization", function (e) {
        e.preventDefault();
        
        var me = $(this),
            indexWrapper = me.closest('#indexWrapper'),
            allBtn = indexWrapper.find('.btnGetOrganization'),
            status = me.data('status');
            // bpr = $('.btnConfirmPaymentRequest');
            
        params.organization_status = status;
        
        if(params.organization_status == 'INACTIVE'){
            params.organization_status = 'ACCEPTED';
            params.is_active = 'NO';
        } else {
            params.is_active = 'YES';
        }
        
        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');
        
        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);
        }
    }
    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_organization', function(e){
            var target = $('.organization_image_edit_prev');
                src = $('.image_organization');
                
            var fr = new FileReader();
            fr.onload = function() {
                target.attr('src', fr.result);
            }
            fr.readAsDataURL(src[0].files[0]); 
        });
        
        
        $(document).on('click', '.btn-approval-organization', function(e){
            e.preventDefault();
            
            var ini = $(this),
                status = ini.data('status'),
                wrp = ini.parents('#detailWrapper'),
                id = wrp.find('input[name=id_organization]').val();
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                $.ajax({
                    url: '/organizationApproval/'+id,
                    type: "post",
                    data: {
                            _token : wrp.find('input[name=_token]').val(),
                            id_organization: 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', '.organization_name', function(e){
            e.preventDefault();
            
            var ini = $(this);
                tr = ini.parents('tr')
                id = tr.find('.id_organization').html(),
                card = $('.card-body');
                dataTableRow = $('#dataTableRow');
            
            if($.isNumeric(id)) {
                var e_modal_wait = $("#modalWait");
                showLoading(e_modal_wait);
                setViewTo("DETAIL");
                $.ajax({
                    url: '/getOrganization',
                    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_organization = form.find("input[name=id_organization]").val(data.id_organization);
                            organization_code = form.find("input[name=organization_code]").val(data.organization_code);
                            organization_name = form.find("input[name=organization_name]").val(data.organization_name);
                            organization_email = form.find("input[name=organization_email]").val(data.organization_email);
                            organization_telp = form.find("input[name=organization_telp]").val(data.organization_telp);
                            
                            
                            organization_country = form.find("input[name=organization_country]").val(data.organization_country);
                            organization_state = form.find("input[name=organization_state]").val(data.organization_state);
                            organization_city = form.find("input[name=organization_city]").val(data.organization_city);
                            
                            img_organization = form.find(".img-organization");

                            img_organization.attr('src', '/upload_image/organization/'+data.organization_photo);

                            $('#organization_img_link').attr('href', '/upload_image/organization/'+data.organization_photo)

                            var $newOption = $("<option selected='selected'></option>").val(data.id_country).text(data.organization_country)
                            $('.searchCountry').append($newOption).trigger('change');
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_state).text(data.organization_state)
                            $('.searchState').append($newOption).trigger('change');
                            
                            var $newOption = $("<option selected='selected'></option>").val(data.id_city).text(data.organization_city)
                            $('.searchCity').append($newOption).trigger('change');
        
                            if(data.organization_status == "ACCEPTED"){
                                showButton("ACCEPT")
                            }else if(data.organization_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_organization";
            
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                organization_name: ini.find("input[name=organization_name]").val(),
                organization_email: ini.find("input[name=organization_email]").val(),
                organization_telp: ini.find("input[name=organization_telp]").val(),
                organization_password: ini.find("input[name=organization_password]").val(),
                confirm_password: ini.find("input[name=confirm_password]").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(),
            };
            
            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_organization]").val(),
                url = '/update_organization/'+id;
                
            var data = {
                is_ajax: true,
                _token: input_token.val(),
                organization_name: ini.find("input[name=organization_name]").val(),
                organization_email: ini.find("input[name=organization_email]").val(),
                organization_password: ini.find("input[name=organization_password]").val(),
                confirm_password: ini.find("input[name=confirm_password]").val(),
                organization_telp: ini.find("input[name=organization_telp]").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_organization = document.getElementById('image_organization'), image_organization = el_image_organization.files[0];


            postData(data);

            // if (typeof (image_organization) === "undefined") {
            //   postData(data);
            // } else {
            //     var readerLisence = new FileReader();
            //     readerLisence.readAsDataURL(image_organization);
            //     readerLisence.onloadend = function () {
            //         data.organization_photo =  readerLisence.result
                    
            //     };
            // }
            
            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){
        param = param;
        url = "/getOrganization";
        th = '<th width="5%">NO</th>' +
             '<th width="5%">ID</th>' +
             '<th class="text-dark cursor-default">Organization Name</th>' +
             '<th>Email</th>' +
             '<th>Telp</th>';
        columns = [
                    {"data": "no"},
                    {"data": "id_organization", className: "id_organization"},
                    {"data": "organization_name", className: "organization_name text-link"},
                    {"data": "organization_email"},
                    {"data": "organization_telp"},
                  ];
    
        col_def = [];   
        
        if(param.organization_status === "ACCEPTED"){
            th += '<th>Is Active</th>';
            th += '<th>Action</th>';
            columns.push({"data": "is_active"});
            columns.push({"data": "id_organization"});
            col_def.push(
                    {
                        "targets" : 6,
                        "data": "id_organization",
                        "render" : function (data, type, row) {
                            if(row.is_active === "YES"){
                                return '<button class="btn btn-sm btn-danger btn-is-active" data-id="'+row.id_organization+'">Deactive</button>';
                            }else{
                                return '<button class="btn btn-sm btn-info btn-is-active" data-id="'+row.id_organization+'">Activate</button>';
                            }
                        }
                    }
                );
            
        }
    
        currency = {
                    "url" : url,
                    "param" : param,
                    "th" : th,
                    "col_def" : col_def,
                    "columns" : columns,
                   }
        return currency;
    }
    
    $(document).on('click', '.btn-is-active', 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: '/organization/is_active',
                    type: "get",
                    data: {
                            id_organization: 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);
            }
        })
    
    $(".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)
    });
        
    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