@extends('user_dashboard.layouts.app')
@section('content')
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="section-title">
                                    <h3 class="rbt-title-style-style">KYC Detail
                                        @if(Auth::guard('web')->user()->kyc_status == 'not_verified')
                                            <span class="badge bg-warning">Pending</span>
                                        @elseif(Auth::guard('web')->user()->kyc_status == 'verified')
                                            <span class="badge bg-success">Success</span>
                                        @elseif(Auth::guard('web')->user()->kyc_status == 'rejected')
                                            <span class="badge bg-danger">Rejected</span>
                                        @endif
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <form action="{{ route('user.bank.detail.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">Name <span class="text-danger">*</span></label>
                                    <input type="text" id="name" name="name" value="{{ $user_details->name }}" class="form-control" required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                    <input type="email" id="email" name="email" value="{{ $user_details->email }}" class="form-control" placeholder="Email" readonly required>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label">Phone <span class="text-danger">*</span></label>
                                    <input type="number" id="phone" name="phone" value="{{ $user_details->phone }}" class="form-control" required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="holder_name" class="form-label">Holder Name <span class="text-danger">*</span></label>
                                    <input type="text" id="holder_name" name="holder_name" value="{{ optional($user_details->bankDetail)->holder_name }}" class="form-control" placeholder="Holder Name..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="ifsc_code" class="form-label">IFSC Code <span class="text-danger">*</span></label>
                                    <input type="text" id="ifsc_code" name="ifsc_code" value="{{ optional($user_details->bankDetail)->ifsc_code }}" class="form-control" placeholder="IFSC Code..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="account_number" class="form-label">Account Number <span class="text-danger">*</span></label>
                                    <input type="text" id="account_number" name="account_number" value="{{ optional($user_details->bankDetail)->account_number }}" class="form-control" placeholder="Account Number..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="bank_name" class="form-label">Bank Name <span class="text-danger">*</span></label>
                                    <input type="text" id="bank_name" name="bank_name" value="{{ optional($user_details->bankDetail)->bank_name }}" class="form-control" placeholder="Bank Name..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                {{-- <div class="col-md-6 mb-3">
                                    <label for="upi_id" class="form-label">UPI ID</label>
                                    <input type="text" id="upi_id" name="upi_id" class="form-control" value="{{ optional($user_details->bankDetail)->upi_id }}" placeholder="UPI ID..." @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div> --}}
                                <div class="col-md-6 mb-3">
                                    <label for="aadhaar_name" class="form-label">Aadhaar Name <span class="text-danger">*</span></label>
                                    <input type="text" id="aadhaar_name" name="aadhaar_name" value="{{ optional($user_details->bankDetail)->aadhaar_name }}" class="form-control" placeholder="Aadhaar Name..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="aadhaar_number" class="form-label">Aadhaar Number <span class="text-danger">*</span></label>
                                    <input type="text" id="aadhaar_number" name="aadhaar_number" value="{{ optional($user_details->bankDetail)->aadhaar_number }}" class="form-control" placeholder="Aadhaar Number..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="pan_name" class="form-label">Pan Name <span class="text-danger">*</span></label>
                                    <input type="text" id="pan_name" name="pan_name" value="{{ optional($user_details->bankDetail)->pan_name }}" class="form-control" placeholder="Pan Name..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="pan_number" class="form-label">Pan Number <span class="text-danger">*</span></label>
                                    <input type="text" id="pan_number" name="pan_number" value="{{ optional($user_details->bankDetail)->pan_number }}" class="form-control" placeholder="Pan Number..." required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="phone" class="form-label">DOB <span class="text-danger">*</span></label>
                                    <input type="date" id="dob" name="dob" value="{{ $user_details->dob }}" class="form-control" required @if(Auth::guard('web')->user()->kyc_status == 'verified') readonly @endif>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="gender">Gender <span class="text-danger">*</span></label>
                                    <div class="d-flex">
                                        <div class="rbt-form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="rbt-radio-1" value="male" @if ($user_details->gender == 'male') checked @endif>
                                            <label class="form-check-label" for="rbt-radio-1">Male</label>
                                            &nbsp; &nbsp;
                                        </div>
                                        <div class="rbt-form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="rbt-radio-2" value="female" @if ($user_details->gender == 'female') checked @endif>
                                            <label class="form-check-label" for="rbt-radio-2">Female</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="aadhaar_front_image" class="form-label">Aadhaar Front Image</label>
                                    <input type="file" name="aadhaar_front_image" id="aadhaar_front_image" class="form-control" accept="image/*" @if(!optional($user_details->bankDetail)->aadhaar_front_image) required @endif @if(Auth::guard('web')->user()->kyc_status == 'verified') disabled @endif>
                                    <div class="p-2">
                                        <img id="aadhaar_front_image_preview" src="{{asset('frontend/images/documents/'.optional($user_details->bankDetail)->aadhaar_front_image)}}" onerror="this.onerror=null;this.src='{{asset('backend/img/no-image.png')}}'" height="100px" width="100px">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="aadhaar_back_image" class="form-label">Aadhaar Back Image</label>
                                    <input type="file" name="aadhaar_back_image" id="aadhaar_back_image" class="form-control" accept="image/*" @if(!optional($user_details->bankDetail)->aadhaar_back_image) required @endif @if(Auth::guard('web')->user()->kyc_status == 'verified') disabled @endif>
                                    <div class="p-2">
                                        <img id="aadhaar_back_image_preview" src="{{asset('frontend/images/documents/'.optional($user_details->bankDetail)->aadhaar_back_image)}}" onerror="this.onerror=null;this.src='{{asset('backend/img/no-image.png')}}'" height="100px" width="100px">
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="pan_image" class="form-label">Pan Image</label>
                                    <input type="file" name="pan_image" id="pan_image" class="form-control" accept="image/*" @if(!optional($user_details->bankDetail)->pan_image) required @endif @if(Auth::guard('web')->user()->kyc_status == 'verified') disabled @endif>
                                    <div class="p-2">
                                        <img id="pan_image_preview" src="{{asset('frontend/images/documents/'.optional($user_details->bankDetail)->pan_image)}}" onerror="this.onerror=null;this.src='{{asset('backend/img/no-image.png')}}'" height="100px" width="100px">
                                    </div>
                                </div>
                            </div>
                            @if(Auth::guard('web')->user()->kyc_status != 'verified')
                                <button class="rbt-btn btn-sm btn-gradient radius-round ">Update Details</button>
                            @endif
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        aadhaar_front_image.onchange = evt =>{
            const [file] = aadhaar_front_image.files
            if (file) {
                aadhaar_front_image_preview.src = URL.createObjectURL(file)
            }
        }
        aadhaar_back_image.onchange = evt =>{
            const [file] = aadhaar_back_image.files
            if (file) {
                aadhaar_back_image_preview.src = URL.createObjectURL(file)
            }
        }
        pan_image.onchange = evt =>{
            const [file] = pan_image.files
            if (file) {
                pan_image_preview.src = URL.createObjectURL(file)
            }
        }
    </script>

@endsection