@extends('layouts.main')

@section('title','Country')

@section('content')

<div id="indexWrapper">
    <div class="card martop-1">
        <div class="card-header">
            <h3 class="card-title">Country</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 Country
                </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="create_fields display-none">
    @csrf
    <div class="form-group">
        <label>Country Name</label>
        <input class="form-control" name="country_name" placeholder="Country Name" required autofocus>
    </div>
</div>
<div class="create_fields_state display-none">
    @csrf
    <div class="form-group">
        <label>State Name</label>
        <input class="form-control" name="state_name" placeholder="State Name" required autofocus>
    </div>
</div>

<div class="modal fade" id="modal_city" role="dialog" aria-labelledby="import">
    <div class="modal-dialog modal-dialog">
        <form method="post" action="/submit_city" enctype="multipart/form-data" class="form-city">
        @csrf
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">City</h5>
                
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            
            <div class="modal-body">
                <div class="form-group">
                    <label>State</label>
                    <select class="form-control form-control searchState id_state" id="id_state" name="id_state" style="width: 100%;" required autofocus></select>
                </div>
                <div class="form-group">
                    <label>City Name</label>
                    <input class="form-control" name="city_name" placeholder="City Name" required autofocus>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-info btn-md text-light" style="font-weight:bold; font-size:15px" data-dismiss="modal">Close</a>
                <button type="submit" class="btn btn-md btn-success" type="submit">Submit</button>
            </div>
        </div>
        </form>
    </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">Country</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="form-group">
                <label>Country Name</label>
                <div class="input-group">
                    <input class="form-control" name="country_name" placeholder="Country Name" required autofocus>
                    <input name="id_country" hidden>
                    <div class="input-group-append">
                        <button type="submit" class="input-group-text btn-success bg-success" style="cursor:pointer">
                            <i class="fa fa-save"></i>
                        </button>
                    </div>
                </div>
            </div>
            <br><hr><br>
            <div class="card">
                <div class="card-header top-border-cyan">
                    <h3 class="card-title">State(s)</h3>
                    <div class="card-tools">
                        <button class="btn btn-sm btn-success btn-new-state">
                            <i class="fa fa-plus"></i> New State
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive stateTableRow" id="stateTableRow">
                        <label class="el-waiting-message">Loading your data. It may take some time..</label>
                    </div>
                </div>
            </div>
            <br><hr><br>
            <div class="card">
                <div class="card-header top-border-cyan">
                    <h3 class="card-title">Cities</h3>
                    <div class="card-tools">
                        <button class="btn btn-sm btn-success btn-new-city">
                            <i class="fa fa-plus"></i> New City
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive cityTableRow" id="cityTableRow">
                        <label class="el-waiting-message">Loading your data. It may take some time..</label>
                    </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>

<script>

function setViewTo(wrp){
    var index = $('#indexWrapper'),
        detail = $('#detailWrapper');
    
    if(wrp === "DETAIL"){
        hide_element(index);
        show_element(detail);
    }else{
        show_element(index);
        hide_element(detail);
        loadThis();
    }
}

$(document).ready(function () {
    loadThis();
    $(document).on('click', '.btn-new-data', function(e){
        e.preventDefault();
        var form = '<form action="new_country" class="form-new-data">';
        var create = $('.create_fields');
        var fields = create.html();
        var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
        modalCreateMd(form, fields, btn_submit)
    });
    $(document).on('submit', '.form-new-data', function(e){
        e.preventDefault();
        $('#modal_create_md').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            country_name: ini.find("input[name=country_name]").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);
                    loadThis();
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
    $(document).on('click', '.country_name', function(e){
        e.preventDefault();
        
        var ini = $(this);
            tr = ini.parents('tr')
            id = tr.find('.id_country').html();
        
        if($.isNumeric(id)) {
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            $.ajax({
                url: '/getCountry',
                type: "get",
                data: {
                        id: id
                      }
            }).done(function (result) {
                hideLoading(e_modal_wait);
                if(result.data[0]){
                    var data = result.data[0];
                    setDetail(data)
                }else{
                    var message = result.message || 'Not found!';
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
            hideLoading(e_modal_wait);
        }
    });
    $(document).on('submit', '.form-update-data', function(e){
        e.preventDefault();
        $('#modal_create_md').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        id_country = $("input[name=id_country]").val();
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = '/update_country/'+id_country;
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            country_name: ini.find("input[name=country_name]").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);
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
    
    $(document).on('click', '.btn-new-state', function(e){
        e.preventDefault();
        var form = '<form action="new_state" class="form-new-state">';
        var create = $('.create_fields_state');
        var fields = create.html();
        var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
        modalCreateMd(form, fields, btn_submit)
    });
    $(document).on('submit', '.form-new-state', function(e){
        e.preventDefault();
        $('#modal_create_md').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            id_country: $("input[name=id_country]").val(),
            state_name: ini.find("input[name=state_name]").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);
                    new_param_state = {
                        id_country: result.data.id_country
                    }
                    loadState(new_param_state);
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
    $(document).on('click', '.state_name', function(e){
        e.preventDefault();
        
        var ini = $(this);
            tr = ini.parents('tr')
            id = tr.find('.id_state').html(),
            card = $('.card-body');
            dataTableRow = $('#dataTableRow');
        
        if($.isNumeric(id)) {
            var form = '<form action="update_state/'+id+'" class="form-update-state">';
            var create = $('.create_fields_state');
            var fields = create.html();
            var btn_submit = '<button type="submit" class="btn btn-success btn-md text-light">Submit</button>';
            modalCreateMd(form, fields, btn_submit);
            
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            $.ajax({
                url: '/getState',
                type: "get",
                data: {
                        id: id
                      }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if(result.data[0]){
                    var data = result.data[0],
                        form = $('.form-update-state'),
                        state_name = form.find("input[name=state_name]").val(data.state_name);
                }else{
                    var message = result.message || 'Not found!';
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        }
    });
    $(document).on('submit', '.form-update-state', function(e){
        e.preventDefault();
        $('#modal_create_md').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            state_name: form.find("input[name=state_name]").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);
                    update_param_state = {
                        id_country: result.data.id_country
                    }
                    loadState(update_param_state);
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
    
    $(document).on('click', '.btn-new-city', function(e){
        e.preventDefault();
        var form = $('.form-city');
            form.find('input[name=city_name]').val('');
            form.attr('action', '/submit_city');
        $('#modal_city').modal('show');
    });
    $(document).on('click', '.city_name', function(e){
        // return alert('otw');
        e.preventDefault();
        
        var ini = $(this);
            tr = ini.parents('tr')
            id = tr.find('.id_city').html();
        var form = $('.form-city');
        if($.isNumeric(id)) {
            var e_modal_wait = $("#modalWait");
            showLoading(e_modal_wait);
            $('#modal_city').modal('show');
            form.attr('action', '/update_city/'+id+'');
            $.ajax({
                url: '/getCity',
                type: "get",
                data: {
                        id: id
                      }
            })
            .done(function (result) {
                hideLoading(e_modal_wait);
                if(result.data[0]){
                    var data = result.data[0],
                        city_name = form.find("input[name=city_name]").val(data.city_name);
                        id_state = form.find("select[name=id_state]");
                    var $newOption = $("<option selected='selected'></option>").val(data.id_state).text(data.state.state_name)
                    id_state.append($newOption).trigger('change');
                }else{
                    var message = result.message || 'Not found!';
                    failedAlert(message);
                }
            })
            .fail(ajax_fail);
        }
    });
    $(document).on('submit', '.form-city', function(e){
        e.preventDefault();
        $('#modal_city').modal('hide');
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            city_name: ini.find("input[name=city_name]").val(),
            id_state: ini.find("select[name=id_state]").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);
                    new_param_city = {
                        id_country: $("input[name=id_country]").val()
                    }
                    loadCity(new_param_city);
                } else {
                    var message = result.message || 'Api connection problem';
                    failedAlert(message);
                }
                input_token.val(result.newtoken);
            })
            .fail(ajax_fail);
        }
        postData(data)
    });
});

function loadCity(data){
    var datas = loadDataCity(data);
    url = datas.url;
    param = datas.param;
    th = datas.th;
    col_def = datas.col_def;
    columns = datas.columns;
    wrapper = $('#cityTableRow');
    table_settings = {
        "lengthMenu": [[10, 25, 50, 100, 150, 200, 250, 500], [10, 25, 50, 100, 150, 200, 250, 500]],
        "destroy": true,
        "bDestroy": true,
        "processing": true,
        "serverSide": true,
        "ordering": true,
        "searching": true,
        "ajax": {
            "url": url,
            "data": param
        },
        "dataSrc": function (result) {
            var json = result.model.rows;
            return json;
        },
        "columns": columns,
        "columnDefs": col_def,
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true,
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>',//+'Br',
        // 'buttons': datatablesButtons()
    }
    
    loadTableScd(wrapper, url, param, th, col_def, columns, table_settings)
}
function loadDataCity(data){
    param = data;
    url = "/getCity";
    th = '<th width="5%">NO</th>' +
         '<th class="text-dark cursor-default">City Name</th>' +
         '<th>State Name</th>';
    columns = [
                {"data": "id_city", className: "id_city"},
                {"data": "city_name", className: "city_name text-link"},
                {"data": "id_state"}
              ];

    col_def = [
            {
                "targets" : 2,
                "data": "id_state",
                "render" : function (data, type, row) {
                    return row.state.state_name;
                }
            },
        ];

    table = {
                "url" : url,
                "param" : param,
                "th" : th,
                "col_def" : col_def,
                "columns" : columns,
               }
    return table;
}

function loadState(data){
    var datas = loadDataState(data);
    url = datas.url;
    param = datas.param;
    th = datas.th;
    col_def = datas.col_def;
    columns = datas.columns;
    wrapper = $('#stateTableRow');
    table_settings = {
        "lengthMenu": [[10, 25, 50, 100, 150, 200, 250, 500], [10, 25, 50, 100, 150, 200, 250, 500]],
        "destroy": true,
        "bDestroy": true,
        "processing": true,
        "serverSide": true,
        "ordering": true,
        "searching": true,
        "ajax": {
            "url": url,
            "data": param
        },
        "dataSrc": function (result) {
            var json = result.model.rows;
            return json;
        },
        "columns": columns,
        "columnDefs": col_def,
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": true,
        "bInfo": true,
        "bAutoWidth": true,
        "sDom": '<"row view-filter"<"col-sm-12"<"pull-left"l><"pull-right"f><"clearfix">>>t<"row view-pager"<"col-sm-12"<"pull-left"i><"pull-right"p>>>',//+'Br',
        // 'buttons': datatablesButtons()
    }
    
    loadTableScd(wrapper, url, param, th, col_def, columns, table_settings)
}
function loadDataState(data){
    param = data;
    url = "/getState";
    th = '<th width="5%">NO</th>' +
         '<th class="text-dark cursor-default">State Name</th>';
        //  '<th>Action</th>';
    columns = [
                {"data": "id_state", className: "id_state"},
                {"data": "state_name", className: "state_name text-link"},
                // {"data": "id_state"}
              ];

    col_def = [
                // {
                //     "targets" : 2,
                //     "data": "id_state",
                //     "render" : function (data, type, row) {
                //         var btn_group = '<div class="btn-group">'+
                //                             '<button class="btn btn-sm btn-danger btn-remove-state" data-id="'+row.id_state+'">'+
                //                                 '<i class="fa fa-trash nav-icon text-light"></i>' +
                //                             '</button>' +
                //                         </div>';
                //         return btn_group;
                //     }
                // },
        ];

    table = {
                "url" : url,
                "param" : param,
                "th" : th,
                "col_def" : col_def,
                "columns" : columns,
               }
    return table;
}

function loadThis(){
    var datas = loadAsData();
    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 = {};
    url = "/getCountry";
    th = '<th width="5%">NO</th>' +
         '<th class="text-dark cursor-default">Country Name</th>';
    columns = [
                {"data": "id_country", className: "id_country"},
                {"data": "country_name", className: "country_name text-link"}
              ];

    col_def = [];   

    currency = {
                "url" : url,
                "param" : param,
                "th" : th,
                "col_def" : col_def,
                "columns" : columns,
               }
    return currency;
}

function setDetail(data){
    var index = $('#indexWrapper');
    var detail = $('#detailWrapper');
        index.addClass('display-none');
        detail.removeClass('display-none');
    
    var ini = detail,  
        input_token = ini.find('input[name=_token]'),   url = ini.attr('action'),
        id = ini.find("input[name=id_country]").val(data.id_country);
        country_name = ini.find("input[name=country_name]").val(data.country_name);
    
    state_param = {
        id_country: data.id_country
    }
    loadState(state_param);
    loadCity(state_param);
    loadSelect2()
}

var id_country = $("input[name=id_country]").val();
function loadSelect2(){
    $(document).ready(function() {
        $(".searchState").select2({
            placeholder: "Please Select",
            dropdownParent: $("#modal_city"),
            ajax: {
                url: "/getState",
                dataType: "json",
                delay: 250,
                // data: {
                //     id_country: $("input[name=id_country]").val()
                // },
                processResults: function (data) {
                    data = data.data;
                    return {
                        results: $.map(data, function (item) {
                            var query = {
                                search: item.term,
                                page: item.page || 1
                              }
                                return {
                                    text: item.state_name,
                                    id: item.id_state
                                };
                        })
                    };
                },
                cache: false
            }
        });
    });
}

</script>
@endsection