@extends('backend.student.layouts.right_side_bar')
@section('studentBody')

    <div class="content p-0">

        @if(session('success'))
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        <span class="btn btn-success btn-xs">Success</span> {{session('success')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
            @endif
            @if(session('error'))
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        <span class="btn btn-danger btn-xs">Error</span> {{session('error')}}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
            @endif
            @if($errors->any())
                <div class="col-sm-12">
                    <div role="alert" style="background-color:#d4edda; color:#155724; border-radius: 5px;" class="alert  alert-dismissible show">
                        @foreach($errors->all() as $error)
                            <span class="btn btn-danger btn-xs">Error</span> {{$error}}<br>
                        @endforeach
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </div>
                <div style="clear: both;"></div>
        @endif
            <!-- Overview -->
            <div class="block block-rounded block-bordered">
                <div class="block-header block-header-default">
                    <div>
                        <a class="font-w600" href="javascript:void(0)">Change Password</a>
                    </div>
                </div>

                <div class="block-content">
                    <div class="row">
                        <div class="col-md-12">
                            <form action="" method="POST" enctype="multipart/form-data">

                            {{csrf_field()}}


                                <!-- Steps Content -->
                                <div class="block-content block-content-full tab-content" style="min-height: 300px;">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>Old Password <span class="text-danger">*</span></strong>
                                                </span>
                                                    </div>
                                                    <input type="text" class="form-control" id="example-group1-input1" name="old_password"  required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>New Password <span class="text-danger">*</span></strong>
                                                </span>
                                                    </div>
                                                    <input type="text" class="form-control" id="example-group1-input1"  name="password"  required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                <span class="input-group-text">
                                                    <strong>Re-Type Password <span class="text-danger">*</span></strong>
                                                </span>
                                                    </div>
                                                    <input type="text" class="form-control" id="example-group1-input1" name="password_confirmation"  required>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-sm-12">
                                            <div class="form-group">
                                                <button class="btn btn-primary"><i class="fa fa-save"></i> Change</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END Overview -->
        </div>
        <!-- END Page Content -->

    <script>
        $('#country_id').on('change', function(e){
            console.log(e);
            var country_id = e.target.value;
            $.get('get_state?country_id=' + country_id,function(data) {
                console.log(data);
                $('#state_id').empty();
                $('#state_id').append('<option value="0" disable="true" selected="true">--Choose State--</option>');

                $('#district_id').empty();
                $('#district_id').append('<option value="0" disable="true" selected="true">--Choose District--</option>');

                $('#city_id').empty();
                $('#city_id').append('<option value="0" disable="true" selected="true">--Choose--</option>');

                $.each(data, function(index, statesObj){
                    $('#state_id').append('<option value="'+ statesObj.id +'">'+ statesObj.name +'</option>');
                })
            });
        });

        $('#state_id').on('change', function(e){
            console.log(e);
            var state_id = e.target.value;
            $.get('get_district?state_id=' + state_id,function(data) {
                console.log(data);
                $('#district_id').empty();
                $('#district_id').append('<option value="0" disable="true" selected="true">--Choose District--</option>');

                $('#city_id').empty();
                $('#city_id').append('<option value="0" disable="true" selected="true">--Choose--</option>');

                $.each(data, function(index, districtsObj){
                    $('#district_id').append('<option value="'+ districtsObj.id +'">'+ districtsObj.name +'</option>');
                })
            });
        });

        $('#district_id').on('change', function(e){
            console.log(e);
            var district_id = e.target.value;
            $.get('get_city?district_id=' + district_id,function(data) {
                console.log(data);
                $('#city_id').empty();
                $('#city_id').append('<option value="0" disable="true" selected="true">--Choose--</option>');

                $.each(data, function(index, city){
                    $('#city_id').append('<option value="'+ city.id +'">'+ city.name +'</option>');
                })
            });
        });
    </script>

@endsection