@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('kyc.update', $data->id)}}" enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <a href="{{imageUrl($data->userDetail->photo)}}" target="_blank" title="User Photo">
                                        <img src="{{imageUrl($data->userDetail->photo)}}" alt="user photo" class="br-rad mb-2" onerror="this.onerror=null; this.src='{{ asset('backend/no-pictures.png') }}'" height="100" width="100">
                                    </a>
                                    <br>
                                    <p><b>Name : </b> {{$data->name}}</p>
                                    <p><b>Designation: </b> {{$data->designation ? $data->designation->name : ""}}</p>
                                    <p><b>Phone : </b> {{$data->phone}}</p>
                                    <p><b>Address : </b>
                                        {{$data->userDetail->village->name}},
                                        {{$data->userDetail->gramPanchayat->name}},
                                        {{$data->userDetail->block->name}}, <br>
                                        {{$data->userDetail->district->name}},
                                        {{$data->userDetail->state->name}},
                                        {{$data->userDetail->country->name}}
                                    </p>
                                    <p><b>Aadhaar Number : </b> {{$data->userDetail->aadhar_number}}</p>
                                    <p><b>Pan Number : </b> {{$data->userDetail->pancard_number}}</p>

                                    <hr>
                                    <div class="col-md-12 mb-5">
                                        <select name="kyc_status" id="kyc_status" class="form-select" data-width="100%" onchange="assignDesignation()" required>
                                            <option value="not_updated" {{$data->userDetail->kyc_status=='not_updated' ? 'selected': ''}} disabled>Not Updated</option>
                                            <option value="pending" {{$data->userDetail->kyc_status=='pending' ? 'selected': ''}} disabled>Pending</option>
                                            <option value="approved" {{$data->userDetail->kyc_status=='approved' ? 'selected': ''}}>Approved</option>
                                            <option value="disapproved" {{$data->userDetail->kyc_status=='disapproved' ? 'selected': ''}}>Disapproved</option>
                                        </select>
                                    </div>
                                    <div class="col-md-12 mb-5 d-none designation">
                                        <label>Designation</label>
                                        <select name="designation_id" id="designation_id" class="form-select js-example-basic-single" data-width="100%" onchange="getStaff()" required>
                                            <option value="">Select Designation...</option>
                                            @foreach (App\Models\Backend\Designation::oldest()->get() as $designation)
                                                <option value="{{$designation->id}}" @if($data->designation_id == $designation->id) selected @endif>{{$designation->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-12 mb-5 after_designation"></div>
                                    <div class="col-md-12 mb-5 after_location"></div>
                                    <x-save-btn text="Update"/>
                                    @if($data->userDetail->kyc_status == "approved")
                                        {{-- <a class="btn btn-light btn-sm btn-icon-text" href="{{route('assign-designation.index')}}?user_id={{$data->id}}" title="Designation"><i class="btn-icon-prepend" data-feather="check-circle"></i> Designation</a> --}}
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <div class="row text-center">
                                        <div class="card-header">
                                            <div class="card-title"><h5>Documents</h5></div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card-body">
                                                <a href="{{imageUrl($data->userDetail->aadhar_front_doc)}}" target="_blank" title="Aadharcard Front">
                                                    <img src="{{imageUrl($data->userDetail->aadhar_front_doc)}}" class="card-img-top" alt="Aadharcard Front" onerror="this.onerror=null; this.src='{{ asset('backend/no-pictures.png') }}'" height="100" width="100">
                                                </a>
                                                <p><b>Aadharcard Front </b></p>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="card-body">
                                                <a href="{{imageUrl($data->userDetail->aadhar_back_doc)}}" target="_blank" title="Aadharcard Back">
                                                    <img src="{{imageUrl($data->userDetail->aadhar_back_doc)}}" class="card-img-top" alt="Aadharcard Back" onerror="this.onerror=null; this.src='{{ asset('backend/no-pictures.png') }}'" height="100" width="100">
                                                </a>
                                                <p><b>Aadharcard Back</b></p>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-4">
                                            <div class="card-body">
                                                <a href="{{imageUrl($data->userDetail->aadhar_back_doc)}}" target="_blank" title="Aadharcard Front">
                                                    <img src="{{imageUrl($data->userDetail->aadhar_back_doc)}}" class="card-img-top" alt="Aadharcard Front" onerror="this.onerror=null; this.src='{{ asset('backend/no-pictures.png') }}'" height="100" width="100">
                                                </a>
                                                <p><b>Pan Card</b></p>
                                            </div>
                                        </div> --}}
                                    </div>
                                    <div class="row">
                                        <div class="card-header text-center">
                                            <div class="card-title"><h5>Bank Details</h5></div>
                                        </div>
                                        <div class="card-body">
                                            <div class="col-md-6">
                                                <p><b>Bank Name : </b> {{$data->userDetail->bank_name}}</p>
                                                <p><b>Account Number : </b> {{$data->userDetail->bank_account_number}}</p>
                                                <p><b>Account Holder Name : </b> {{$data->userDetail->bank_holder_name}}</p>
                                                <p><b>IFSC Code : </b> {{$data->userDetail->bank_ifc_code}}</p>
                                                <p><b>UPI Id : </b> {{$data->userDetail->upi_id ?? '--'}}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

    @push('js')
        <script>

            $(assignDesignation());

            function assignDesignation(){
                var kyc_status = $('#kyc_status').val();
                if(kyc_status == 'approved'){
                    $('.designation').removeClass('d-none');
                }else{
                    $('.designation').addClass('d-none');
                }

                @if($data->designation_id)
                    getStaff();
                @endif
            }

            function getStaff(){
                var designation_id = $('#designation_id').val();
                $.ajax({
                    type: 'POST',
                    url: '{{route("get.staff.by.designation")}}',
                    data: {
                        _token:"{{csrf_token()}}",
                        designation_id:designation_id,
                        staff_id:"{{$data->id}}"
                    },
                    success: function(data) {
                        $('.after_designation').html(data);
                        $('.js-example-basic-single').select2();
                        $('.js-example-basic-multiple').select2();
                        @if($data->parent_id)
                            getLocation();
                        @endif
                    }
                });
            }

            function getLocation(){
                var staff = $('#staff').val();
                $.ajax({
                    type: 'POST',
                    url: '{{route("get.location.by.staff")}}',
                    data: {
                        _token:"{{csrf_token()}}",
                        staff:staff,
                        staff_id:"{{$data->id}}"
                    },
                    success: function(data) {
                        $('.after_location').html(data);
                        $('.js-example-basic-single').select2();
                        $('.js-example-basic-multiple').select2();
                    }
                });
            }

        </script>
    @endpush

@endsection