@extends('layouts.admin')
@section('title','GIMS')
@section('script')
<script>
    //Fetch Dzongkhag in dropdown list  after selecting country 
    $('#country_id').change(function() {
        var country_id = $(this).val();
        $.ajax({

            url: "{{ route('get-dzongkhag-by-country')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                country_id: country_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                var dzongkhag_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {
                    $.each(response.data, function(key, value) {
                        dzongkhag_html += "<option value='" + value.id + "'>" + value.dzongkhag_name + "</option>";
                    });
                    $('#dzongkhag_id').html(dzongkhag_html);
                }
            }
        });
    });
    $('#dzongkhag_id').change(function() {
        var dzongkhag_id = $(this).val();

        $.ajax({

            url: "{{ route('get-dungkhag-by-dzongkhag')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                dzongkhag_id: dzongkhag_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                var dungkhag_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {

                    $.each(response.data, function(key, value) {
                        dungkhag_html += "<option value='" + value.id + "'>" + value.dungkhag_name + "</option>";
                    });
                    $('#dungkhag_id').html(dungkhag_html);
                }
            }
        });
    });
    $('#dungkhag_id').change(function() {
        var dungkhag_id = $(this).val();

        $.ajax({

            url: "{{ route('get-gewog-by-dungkhag')}}",
            type: "post",
            data: {
                _token: "{{ csrf_token() }}",
                dungkhag_id: dungkhag_id
            },
            success: function(response) {
                if (typeof(response) != 'object') {
                    response = JSON.parse(response);
                }

                var gewog_html = "<option value='' selected>-- Select Any one --</option>";
                if (response.status) {

                    $.each(response.data, function(key, value) {
                        gewog_html += "<option value='" + value.id + "'>" + value.gewog_name + "</option>";
                    });
                    $('#gewog_id').html(gewog_html);
                }
            }
        });
    });
</script>
@endsection
@section('content')
<style>
    .button {
        background-color: #2C5F2D;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .button:hover {
        background-color: #97BC62FF;
    }

    .buttond {
        background-color: #db1709;
        border: none;
        color: white;
        padding: 5px 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
    }

    .buttond:hover {
        background-color: #e68524;
    }

    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
        border-color: #80d8ff;
    }
</style>

<div class="page-content fade-in-up">

    <div class="row">
        <div class="col-lg-12">
            <div class="ibox">
                <div class="ibox-head">
                    <div class="ibox-title">
                        Village : Add Form
                    </div>
                </div>
                <div class="ibox-body">
                    {{ Form::open(['url'=>route('village.store'), 'class'=>'form']) }}

                    <div class="form-group row">
                        <div class="col-3"></div>
                        {{ Form::label('country','Country Name: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-4">

                            {{ Form::select('country_name', $village_data, '',['class'=>'form-control form-control-sm','id'=>'country_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-3"></div>
                        {{ Form::label('dzongkhag_id','Dzongkhag Name: ',['class'=>'col-sm-2','id'=>'dzongkhag_title']) }}
                        <div class="col-sm-4">
                            {{ Form::select('dzongkhag_id', [], '',['class'=>'form-control form-control-sm','id'=>'dzongkhag_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-3"></div>
                        {{ Form::label('dungkhag_id','Dungkhag Name: ',['class'=>'col-sm-2','id'=>'dungkhag_title']) }}
                        <div class="col-sm-4">
                            {{ Form::select('dungkhag_id', [], '',['class'=>'form-control form-control-sm','id'=>'dungkhag_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-3"></div>
                        {{ Form::label('gewog_id','Gewog Name: ',['class'=>'col-sm-2','id'=>'gewog_title']) }}
                        <div class="col-sm-4">
                            {{ Form::select('gewog_id', [], '',['class'=>'form-control form-control-sm','id'=>'gewog_id','required'=>true,'placeholder'=>'--Select Any One--' ] ) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-3"></div>
                        {{ Form::label('village_name','Village Name: ',['class'=>'col-sm-2']) }}
                        <div class="col-sm-4">
                            {{ Form::text('village_name','', ['class'=>'form-control form-control-sm','required'=>true, 'id'=>'village_id','pattern'=>'[a-zA-Z ]*','maxlength'=>'100','placeholder'=>'Enter Name...']) }}
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-6 offset-5">
                            <div class="row">
                                <div class="col-3"> {{ Form::button("<i class='fa fa-trash'></i> Reset",['class'=>'btn btn-danger', 'type'=>'reset']) }}</div>
                                <div class="col-3"> {{ Form::button("<i class='fa fa-paper-plane'></i> Submit",['class'=>'btn button', 'type'=>'submit']) }}</div>
                            </div>
                        </div>
                    </div>
                    {{ Form::close() }}
                </div>
            </div>
        </div>

    </div>

</div>
@endsection