@extends('backend.layouts.app')
@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-6 card-title"><h4>{{$page_title}}</h4></div>
                            <div class="col-6 text-end">
                                <x-cancle-btn route="{{ route('agent.index') }}" text="Back"/>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="valid_form" method="Post" action="{{route('agent.store')}}" enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-3">
                                <div class="col-md-4 mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name" value="{{old('name')}}" placeholder="Enter Name..." required>
                                    @error('name')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="father_name" class="form-label">Father/Husband Name</label>
                                    <input type="text" class="form-control" name="father_name" value="{{old('father_name')}}" placeholder="Enter Father/Husband Name..." required>
                                    @error('father_name')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="mobile_number" class="form-label">Mobile Number</label>
                                    <input type="number" class="form-control" name="mobile_number" value="{{old('mobile_number')}}" placeholder="Enter Mobile Number..." required>
                                    @error('mobile_number')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="password" class="form-label">Password</label>
                                    <input type="password" class="form-control" name="password" value="{{old('password')}}" placeholder="Enter Password..." required>
                                    @error('password')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="country_id" class="form-label">Country</label>
                                    <select name="country_id" id="country_id" class="form-select js-example-basic-single" onchange="getState()" required>
                                        <option value="">Select Country...</option>
                                        @foreach ($countries as $country)
                                            <option value="{{$country->id}}" @if(old('country_id') == $country->id) selected @endif>{{$country->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('country_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="state_id" class="form-label">State</label>
                                    <select name="state_id" id="state_id" class="form-select js-example-basic-single" onchange="getDistrict()" required>
                                        <option value="">Select State...</option>
                                    </select>
                                    @error('state_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="district_id" class="form-label">District</label>
                                    <select name="district_id" id="district_id" class="form-select js-example-basic-single" onchange="getBlock()" required>
                                        <option value="">Select District...</option>
                                    </select>
                                    @error('district_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="block_id" class="form-label">Block</label>
                                    <select name="block_id" id="block_id" class="form-select js-example-basic-single" onchange="getGramPanchayat()" required>
                                        <option value="">Select Block...</option>
                                    </select>
                                    @error('block_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="gram_panchayat_id" class="form-label">Gram Panchayat</label>
                                    <select name="gram_panchayat_id" id="gram_panchayat_id" class="form-select js-example-basic-single" onchange="getVillage()" required>
                                        <option value="">Select Gram Panchayat...</option>
                                    </select>
                                    @error('gram_panchayat_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="village_id" class="form-label">Village</label>
                                    <select name="village_id" id="village_id" class="form-select js-example-basic-single" required>
                                        <option value="">Select Village...</option>
                                    </select>
                                    @error('village_id')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="photo" class="form-label">Photo</label>
                                    <input type="file" name="photo" id="photo" class="form-control" required>
                                    @error('photo')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="aadhar_front" class="form-label">Aadhar Front Photo</label>
                                    <input type="file" name="aadhar_front" id="aadhar_front" class="form-control">
                                    @error('aadhar_front')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label for="aadhar_back" class="form-label">Aadhar Back Photo</label>
                                    <input type="file" name="aadhar_back" id="aadhar_back" class="form-control">
                                    @error('aadhar_back')
                                        <span class="text-danger">{{$message}}</span>
                                    @enderror
                                </div>
                            </div>
                            <x-save-btn text="Save" />
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('js')

        <script>

            @if(old('country_id'))
                $(getState());
            @endif

            function getState(){
                var country_id = $('#country_id').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("getStateByCountry","")}}/'+country_id,
                    success: function(data) {
                        $('#state_id').empty();
                        $('#state_id').append("<option value=''>Select State...</option>");
                        var old_state_id = "{{old('state_id')}}";
                        $.each(data, function(key,val) {
                            if(old_state_id == val.id){
                                $('#state_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                            }else{
                                $('#state_id').append("<option value="+val.id+" >"+val.name+"</option>");
                            }
                        });

                        @if(old('state_id'))
                            $(getDistrict());
                        @endif
                    }
                });
            }

            function getDistrict(){
                var state_id = $('#state_id').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("getDistrictByState","")}}/'+state_id,
                    success: function(data) {
                        $('#district_id').empty();
                        $('#district_id').append("<option value=''>Select District...</option>");
                        var old_district_id = "{{old('district_id')}}";
                        $.each(data, function(key,val) {
                            if(old_district_id == val.id){
                                $('#district_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                            }else{
                                $('#district_id').append("<option value="+val.id+" >"+val.name+"</option>");
                            }
                        });

                        @if(old('district_id'))
                            $(getBlock());
                        @endif
                    }
                });
            }

            function getBlock(){
                var district_id = $('#district_id').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("getBlockByDistrict","")}}/'+district_id,
                    success: function(data) {
                        $('#block_id').empty();
                        $('#block_id').append("<option value=''>Select Block...</option>");
                        var old_block_id = "{{old('block_id')}}";
                        $.each(data, function(key,val) {
                            if(old_block_id == val.id){
                                $('#block_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                            }else{
                                $('#block_id').append("<option value="+val.id+" >"+val.name+"</option>");
                            }
                        });

                        @if(old('block_id'))
                            $(getGramPanchayat());
                        @endif
                    }
                });
            }

            function getGramPanchayat(){
                var block_id = $('#block_id').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("getGramPanchayatByBlock","")}}/'+block_id,
                    success: function(data) {
                        $('#gram_panchayat_id').empty();
                        $('#gram_panchayat_id').append("<option value=''>Select Gram Panchayat...</option>");
                        var old_gram_panchayat_id = "{{old('gram_panchayat_id')}}";
                        $.each(data, function(key,val) {
                            if(old_gram_panchayat_id == val.id){
                                $('#gram_panchayat_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                            }else{
                                $('#gram_panchayat_id').append("<option value="+val.id+" >"+val.name+"</option>");
                            }
                        });

                        @if(old('gram_panchayat_id'))
                            $(getVillage());
                        @endif
                    }
                });
            }

            function getVillage(){
                var gram_panchayat_id = $('#gram_panchayat_id').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("getVillageByGramPanchayat","")}}/'+gram_panchayat_id,
                    success: function(data) {
                        $('#village_id').empty();
                        $('#village_id').append("<option value=''>Select Village...</option>");
                        var old_village_id = "{{old('village_id')}}";
                        $.each(data, function(key,val) {
                            if(old_village_id == val.id){
                                $('#village_id').append("<option value="+val.id+" selected>"+val.name+"</option>");
                            }else{
                                $('#village_id').append("<option value="+val.id+" >"+val.name+"</option>");
                            }
                        });
                    }
                });
            }

        </script>

    @endpush

@endsection