@extends('layouts.master')

@section('body')
    <div class="page-title">
        <div class="row">

            <div class="col-12">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{url('user/dashboard')}}"> <i data-feather="home"></i></a></li>
                    <li class="breadcrumb-item active"><a href="{{url('user/salokha-application')}}">Salokha Application</a></li>
                </ol>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-header bg-primary py-3">
                        <h3 class="text-white">Salokha Application</h3>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{url('user/salokha-application')}}" enctype="multipart/form-data">
                            @csrf
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label"><b>Select Second Farmer Name <span class="error">*</span></b></label>
                                    <select name="secondfarmer" id="selectFarmer" class="form-select" required>
                                        <option value="">Select</option>
                                        @foreach($farmers as $farmer)
                                        <option value="{{$farmer->id}}">{{$farmer->fname.' '.$farmer->mname.' '.$farmer->lname}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><b>Mobile No. <span class="error">*</span></b></label>
                                    <input class="form-control" type="text" id="mobileno" placeholder="Enter mobile number" value="" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><b>Aadhar No. <span class="error">*</span></b></label>
                                    <input class="form-control" type="text" id="aadharno" placeholder="Enter..." value="" readonly>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label"><b>Gat No. / Survay No. <span class="error">*</span></b></label>
                                    <input class="form-control" type="text" id="survayno" placeholder="Enter..." value="" readonly>
                                </div>



                                <div class="col-md-6 mt-2">
                                    <div id="farmarimage"></div>
                                </div>


                            </div>

                            <div class="card-footer text-center">

                                <button class="btn btn-primary" type="submit" data-bs-original-title="" title="">Confirm</button>
                                <a href="{{ url('user/salokha-application') }}"><button class="btn btn-warning" type="button" data-bs-original-title="" title="">Cancel</button></a>

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function(){
                $('#selectFarmer').change(function(){
                    let farmer = $(this).val();
                    $.ajax({
                        url: '/user/get-salokha-application-farmar',
                        method: 'get',
                        data: {farmer:farmer},
                        beforeSend: function()
                        {
                            $('.loader-wrapper').css('background', '#ffffff73');
                            $('.loader-wrapper').show()
                            console.log('loader')
                        },
                        success:function(data) {
                            if(data.status === 200)
                            {
                                $('#mobileno').val(data.data.mobile_no)
                                $('#aadharno').val(data.data.aadhar_no)
                                $('#survayno').val(data.data.gat_no)
                                if(data.data.profile != null){
                                    $('#farmarimage').html(`<img src="{{asset('storage/')}}/${data.data.profile}" style="width:150px" class="img-responsive" />`);
                                }else{
                                    $('#farmarimage').html('');
                                }
                            }
                            else
                            {
                                console.log('Something is wrong');
                            }
                        },
                        error: function(xhr) {
                            $('.loader-wrapper').css('background', '#fff');
                            $('.loader-wrapper').hide()
                            $(placeholder).removeClass('loading');
                        },
                        complete: function() {
                            $('.loader-wrapper').css('background', '#fff');
                            $('.loader-wrapper').hide()
                            $(placeholder).removeClass('loading');
                        },
                    })
                    .fail(function(jqXHR, ajaxOptions, thrownError){
                        console.log('server not responding');console.log(thrownError)
                    });
                })
            })
        </script>
    @endpush
@endsection