@extends('layouts.organization_main')

@section('title','Profile')

@section('content')

<div class="card martop-1">
    <form method="POST" action="/organization/update_profile" class="form-update-data">
    @csrf
        <div class="card-header">
            <h3 class="card-title">Profile</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-4">
                    <div class="form-group">
                        <label>Organization Code</label>
                        <input class="form-control form-control-sm" name="organization_code" readonly value="{{$organization->organization_code}}">
                        <input name="id_organization" hidden value="{{$organization->id_organization}}">
                    </div>
                    <div class="form-group">
                        <label>Organization Name</label>
                        <input class="form-control form-control-sm" name="organization_name" placeholder="organization Name" required autofocus readonly value="{{$organization->organization_name}}">
                    </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 readonly value="{{$organization->organization_email}}">
                    </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 readonly value="{{$organization->organization_telp}}">
                    </div>  
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Country</label>
                        <input class="form-control form-control-sm" name="organization_country" placeholder="Organization Country" readonly value="{{isset($organization->country->country_name)?$organization->country->country_name:'-'}}">
                    </div>
                    <div class="form-group">
                        <label>State</label>
                        <input class="form-control form-control-sm" name="organization_state" placeholder="Organization State" readonly value="{{isset($organization->state->state_name)?$organization->state->state_name:'-'}}">
                    </div>
                    <div class="form-group">
                        <label>City</label>
                        <input class="form-control form-control-sm" name="organization_city" placeholder="Organization City" readonly value="{{isset($organization->city->city_name)?$organization->city->city_name:'-'}}">
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <label>Password</label>
                <input type="password" class="form-control form-control-sm" name="organization_password" placeholder="Organization Password" required autofocus>
            </div>
            <div class="form-group">
                <label>Confirm Password</label>
                <input type="password" class="form-control form-control-sm" name="confirm_organization_password" placeholder="Confirm Password" required autofocus>
            </div>
        </div>
        <br>
        <br>
        <div class="fixed-bottom-input-footer" style="z-index:1">
            <button type="submit" class="btn btn-sm btn-success">Update</button>
        </div>
    </form>
</div>

<script>

    $(document).on('submit', '.form-update-data', function(e){
        e.preventDefault();
        var e_modal_wait = $("#modalWait");
        showLoading(e_modal_wait);
        
        var ini = $(this),  input_token = ini.find('input[name=_token]'),   url = ini.attr('action');
        
        var data = {
            is_ajax: true,
            _token: input_token.val(),
            id_organization: ini.find("input[name=id_organization]").val(),
            password: ini.find("input[name=organization_password]").val(),
            confirm_password: ini.find("input[name=confirm_organization_password]").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);
                    location.reload();
                } 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)
    });
        
    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