@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('kyc.edit', $data->id) }}" text="Back"/>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <form id="valid_form" method="Post" action="{{route('assign-designation.store')}}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="user_id" value="{{$data->id}}">
                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <div class="card card-body">
                                        <a href="{{imageUrl($data->userDetail->photo)}}" target="_blank" title="Mechanic 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>Phone : </b> {{$data->phone}}</p>
                                        @if ($data->designation)
                                            <p><b>Designation : </b> {{$data->designation->name}} </p>
                                        @endif
                                        <hr>
                                        <div class="col-md-12">
                                            <select name="designation_id" id="designation_id" class="form-select js-example-basic-single" data-width="100%" required onchange="getDesignationData()">
                                                <option value="" selected disabled>Select Designation</option>
                                                @foreach ($designationList as $designation)
                                                    <option value="{{$designation->id}}" @if($data->designation_id == $designation->id) selected @endif>{{$designation->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-8 designation_data card card-body">
                                    <div class="text-center text-danger">
                                        <i class="link-icon" data-feather="frown" style="width: 50px; height:50px;"></i><br>
                                        Opps!! No Designation Select..
                                    </div>
                                </div>
                            </div>
                            <div class="text-end">
                                <x-save-btn text="Assign Designation"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        @if($data->designation_id)
            $(getDesignationData());
        @endif
        function getDesignationData(){
            var designation_id = $("#designation_id").val();
            var user_id = "{{$data->id}}";
            $.get("{{ route('designationView', '') }}/"+designation_id+"?user_id="+user_id, function(data){
                $('.designation_data').html(data);
            });
        }
    </script>
@endsection