@extends('backend.superadmin.index')
@section('body')

    <!-- Main Container -->
    <main id="main-container">

        <!-- Hero -->
        <div class="bg-body-light">
            <div class="content content-full">
                <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                    <h1 class="flex-sm-fill font-size-h2 font-w400 mt-2 mb-0 mb-sm-2">Add New User</h1>
                </div>
            </div>
        </div>
        <!-- END Hero -->
        <!-- Page Content -->
        <div class="content">
            @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

        <!-- Full Table -->
            <div class="block block-rounded block-bordered">
                <div class="block-content">
                    <!-- Progress Wizards -->
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Progress Wizard -->
                            <div class="js-wizard-simple block block block-rounded block-bordered">

                                <!-- Form -->
                                <form action="" method="POST" enctype="multipart/form-data">

                                {{csrf_field()}}

                                <!-- Wizard Progress Bar -->

                                    <!-- Steps Content -->
                                    <div class="block-content block-content-full tab-content" style="min-height: 300px;">
                                        <!-- Step 1 -->
                                        <div class="tab-pane active" id="wizard-progress-step1" role="tabpanel">
                                            <div class="row">
                                                <div class="col-sm-12">
                                                    <div style="width: 150px; margin: 0 auto;">
                                                            <img class=""  id="featured_image" src="{{url('public/theme')}}/assets/media/avatars/avatar1.jpg" alt="" style="width: 100%; padding: 3px; background-color: lightgrey;">
                                                        <div class="form-group">
                                                            <div class="input-group mb-3">
                                                                <div class="input-group-prepend">
                                                                    <span class="input-group-text" id="inputGroupFileAddon01">Photo</span>
                                                                </div>
                                                                <div class="custom-file">
                                                                    <input type="file" class="custom-file-input"  onchange="readURL(this);" name="photo" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
                                                                    <label class="custom-file-label" for="inputGroupFile01">Update</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Full Name <span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <input type="text" class="form-control" id="example-group1-input1" value="{{old('full_name')}}" name="full_name"  placeholder="Admin Name" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Gender<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <select name="gender" class="form-control" id="" required>
                                                                <option value="Male" @if(old('gender')=='Male') selected @endif>Male</option>
                                                                <option value="Female" @if(old('gender')=='Female') selected @endif>Female</option>
                                                                <option value="Other" @if(old('gender')=='Other') selected @endif>Other</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Citizenship No. <span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <input type="text" class="form-control" id="example-group1-input1" value="{{old('citizenship_no')}}" name="citizenship_no"  placeholder="Citizenship No" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Date of Birth</strong>
                                                                </span>
                                                            </div>
                                                            <input type="text" value="{{old('dob')}}" class="js-flatpickr form-control bg-white" id="example-flatpickr-default" name="dob" placeholder="Y-m-d">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Mobile No.<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <input type="number" value="{{old('mobile')}}" class="form-control bg-white" name="mobile">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Father Name <span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <input type="text" class="form-control" id="example-group1-input1" value="{{old('father_name')}}" name="father_name"  placeholder="Father Name" required>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Country<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <select name="country_id" class="form-control" id="country_id" required>
                                                                <option value="">--Choose Type--</option>
                                                                @foreach($countries as $country)
                                                                    <option value="{{$country->id}}" @if(old('country_id')==$country->id) selected @endif>{{$country->name}}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>State<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <select name="state_id" class="form-control" id="state_id" required>
                                                                <option value="">--Select--</option>
                                                                @if(old('state_id')))
                                                                    @php
                                                                    $country = \App\Country::find(old('country_id'));
                                                                    @endphp
                                                                    @foreach($country->states()->orderBy('name')->get() as $state)
                                                                        <option value="{{$state->id}}" @if(old('state_id')==$state->id) selected @endif>{{$state->name}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>District<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <select name="district_id" class="form-control" id="district_id" required>
                                                                <option value="">--Select--</option>
                                                                @if(old('district_id'))
                                                                    @php
                                                                    $state_value = \App\State::find(old('state_id'));
                                                                    @endphp
                                                                    @foreach($state_value->districts()->orderBy('name')->get() as $district)
                                                                        <option value="{{$district->id}}" @if(old('district_id')==$district->id) selected @endif>{{$district->name}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>MNP/NP/VDC<span class="text-danger">*</span></strong>
                                                                </span>
                                                            </div>
                                                            <select name="city_id" class="form-control" id="city_id" required>
                                                                <option value="">--Select--</option>
                                                                @if(old('city_id'))
                                                                    @php
                                                                        $district_value = \App\District::find(old('district_id'));
                                                                    @endphp
                                                                    @foreach($district_value->cities()->orderBy('name')->get() as $city)
                                                                        <option value="{{$city->id}}" @if(old('city_id')==$city->id) selected @endif>{{$city->name}}</option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Tole</strong>
                                                                </span>
                                                            </div>
                                                            <input type="text" class="form-control" id="example-group1-input1" value="{{old('tole')}}" name="tole"  placeholder="Tole">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-4">
                                                    <div class="form-group">
                                                        <div class="input-group">
                                                            <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Ward No.</strong>
                                                                </span>
                                                            </div>
                                                            <input type="number" class="form-control" id="example-group1-input1" value="{{old('ward')}}" name="ward"  placeholder="Ward No.">
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12">
                                                    <div class="employemen-status"  style="background-color:lightcyan; padding:10px; border: 1px solid lightgrey;">
                                                        <label for=""><b>Employment Status</b></label>
                                                        <div class="row">
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Company Name</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" id="example-group1-input1" value="{{old('company_name')}}" name="company_name"  placeholder="Company Name">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Company Address</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" id="example-group1-input1" value="{{old('company_address')}}" name="company_address"  placeholder="Company Address">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Designation</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" id="example-group1-input1" value="{{old('designation')}}" name="designation"  placeholder="Designation">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-sm-12">
                                                    <div class="employemen-status"  style="background-color:lightcyan; padding:10px; border: 1px solid lightgrey;">
                                                        <label for=""><b>Login Details</b></label>
                                                        <div class="row">
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Username</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" id="example-group1-input1" value="{{old('username')}}" name="username"  placeholder="Username">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Email</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="email" class="form-control" id="example-group1-input1" value="{{old('email')}}" name="email"  placeholder="Email">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="col-sm-4">
                                                                <div class="form-group">
                                                                    <div class="input-group">
                                                                        <div class="input-group-prepend">
                                                                <span class="input-group-text">
                                                                    <strong>Password</strong>
                                                                </span>
                                                                        </div>
                                                                        <input type="text" class="form-control" id="example-group1-input1" value="{{old('password')}}" name="password"  placeholder="Password">
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                        <!-- END Step 1 -->

                                    </div>
                                    <!-- END Steps Content -->

                                    <!-- Steps Navigation -->
                                    <div class="block-content block-content-sm block-content-full bg-body-light rounded-bottom">
                                        <div class="row">
                                            <div class="col-6 text-right">
                                                <button type="button" class="btn btn-primary" data-wizard="next">
                                                    Next <i class="fa fa-angle-right ml-1"></i>
                                                </button>
                                                <button type="submit" class="btn btn-success d-none" data-wizard="finish">
                                                    <i class="fa fa-check mr-1"></i> Submit
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- END Steps Navigation -->
                                </form>
                                <!-- END Form -->
                            </div>
                            <!-- END Progress Wizard -->
                        </div>
                    </div>
                    <!-- END Progress Wizards -->
                </div>
            </div>
            <!-- END Full Table -->
        </div>
        <!-- END Page Content -->

    </main>
    <!-- END Main Container -->


@endsection
@section('script')
    <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">--Select--</option>');

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

                $('#city_id').empty();
                $('#city_id').append('<option value="0" disable="true" selected="true">--Select--</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">--Select--</option>');

                $('#city_id').empty();
                $('#city_id').append('<option value="0" disable="true" selected="true">--Select--</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">--Select--</option>');

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

    <script>
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#featured_image')
                        .attr('src', e.target.result);
                };

                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>

@endsection