@extends('layouts.UserDashboard')
@section('user')
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">KYC Verification</h4>

                <div class="page-title-right">
                    <a href="{{route('user.dashboard')}}" class="btn btn-secondary btn-sm">
                        ← Back
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <!-- KYC Form -->
    <div class="row">
        <div class="col-lg-8 col-md-10">
            <div class="card shadow-sm border-0 rounded-3">
                <div class="card-body">
                    <h5 class="card-title mb-4">KYC Verification</h5>
                    
                    @if($kyc && $kyc->full_name)
                        {{-- ✅ Show KYC Details --}}
                        <div class="alert alert-info mb-4">
                            <strong>Status:</strong> {{ ucfirst($kyc->status) }}
                        </div>

                        <ul class="list-group">
                            <li class="list-group-item"><strong>Full Name:</strong> {{ $kyc->full_name }}</li>
                            <li class="list-group-item"><strong>Date of Birth:</strong> {{ $kyc->dob }}</li>
                            <li class="list-group-item"><strong>Nationality:</strong> {{ $kyc->nationality }}</li>
                            <li class="list-group-item"><strong>ID Type:</strong> {{ ucfirst($kyc->id_type) }}</li>
                            <li class="list-group-item"><strong>ID Number:</strong> {{ $kyc->id_number }}</li>
                            <li class="list-group-item"><strong>Phone:</strong> {{ $kyc->phone }}</li>
                            <li class="list-group-item"><strong>Address:</strong> {{ $kyc->address }}</li>
                            <li class="list-group-item">
                                <strong>ID Front:</strong><br>
                                <img src="{{ asset($kyc->id_front) }}" alt="ID Front"
                                     class="img-thumbnail mt-2" style="max-width: 100px;width: 100px;">
                            </li>
                            <li class="list-group-item">
                                <strong>ID Back:</strong><br>
                                <img src="{{ asset($kyc->id_back) }}" alt="ID Back"
                                     class="img-thumbnail mt-2" style="max-width: 100px;width: 100px;">
                            </li>
                            <li class="list-group-item">
                                <strong>Selfie with ID:</strong><br>
                                <img src="{{ asset($kyc->selfie) }}" alt="Selfie" class="img-thumbnail mt-2"
                                     style="max-width: 100px;width: 100px;">
                            </li>
                        </ul>
                    @else
                        {{-- ✅ Show KYC Form if not submitted yet --}}
                        <form action="{{ route('user.kyc.submit') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="full_name" class="form-label">Full Name</label>
                                    <input type="text" class="form-control" id="full_name" name="full_name"
                                           placeholder="John Doe" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="dob" class="form-label">Date of Birth</label>
                                    <input type="date" class="form-control" id="dob" name="dob" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="nationality" class="form-label">Nationality</label>
                                    <input type="text" class="form-control" id="nationality" name="nationality"
                                           placeholder="Bangladeshi" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="id_type" class="form-label">ID Type</label>
                                    <select class="form-select" id="id_type" name="id_type" required>
                                        <option value="">Select ID Type</option>
                                        <option value="passport">Passport</option>
                                        <option value="nid">National ID</option>
                                        <option value="driving_license">Driving License</option>
                                    </select>
                                </div>

                                <div class="col-md-6">
                                    <label for="id_number" class="form-label">ID Number</label>
                                    <input type="text" class="form-control" id="id_number" name="id_number"
                                           placeholder="Enter ID number" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="phone" class="form-label">Phone Number</label>
                                    <input type="text" class="form-control" id="phone" name="phone"
                                           placeholder="+8801XXXXXXXXX" required>
                                </div>

                                <div class="col-12">
                                    <label for="address" class="form-label">Residential Address</label>
                                    <textarea class="form-control" id="address" name="address" rows="2"
                                              placeholder="123 Main Street, City, Country" required></textarea>
                                </div>

                                <div class="col-md-6">
                                    <label for="id_front" class="form-label">Upload ID Front</label>
                                    <input type="file" class="form-control" id="id_front" name="id_front"
                                           accept="image/*" required>
                                </div>

                                <div class="col-md-6">
                                    <label for="id_back" class="form-label">Upload ID Back</label>
                                    <input type="file" class="form-control" id="id_back" name="id_back" accept="image/*"
                                           required>
                                </div>

                                <div class="col-md-12">
                                    <label for="selfie" class="form-label">Selfie with ID</label>
                                    <input type="file" class="form-control" id="selfie" name="selfie" accept="image/*"
                                           required>
                                </div>

                                <div class="col-12 text-end mt-3">
                                    <button type="submit" class="btn btn-primary px-4">Submit KYC</button>
                                    <button type="reset" class="btn btn-light ms-2">Reset</button>
                                </div>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>

@endsection