@extends('layouts.user')

@section('title')
    Account Settings
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative lg:pb-24 pb-16 md:mt-[84px] mt-[70px]">
    <div class="relative md:container container-fluid">
        <div class="relative overflow-hidden md:rounded-md shadow dark:shadow-gray-700 h-52 bg-[url('../../assets/images/hero/pages.html')] bg-center bg-no-repeat bg-cover" 
        style="background-image: url('{{ asset('images/profile-1.jpg') }}');"></div>
    </div><!--end container-->

    <div class="container relative mt-16 md:mt-24">
        <div class="md:flex">
            <div class="lg:w-1/4 md:w-1/3 md:px-3">
                <div class="relative -mt-32 md:-mt-48">
                    <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                        <div class="mb-5 text-center profile-pic">
                            <!-- <input id="pro-img" name="profile-image" type="file" class="hidden" onchange="loadFile(event)" /> -->
                            <div>
                                <div class="relative mx-auto h-28 w-28">
                                    <img src="{{ asset('images/avatar-1.png') }}" class="rounded-full shadow dark:shadow-gray-800 ring-4 ring-slate-50 dark:ring-slate-800" id="profile-image" alt="">
                                    <label class="absolute inset-0 cursor-pointer" for="pro-img"></label>
                                </div>

                                <div class="mt-4">
                                    <h5 class="text-lg font-semibold">{{ auth()->user()->username }}</h5>
                                    <p class="text-slate-400">{{ auth()->user()->email }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Side Nav -->
                        <x-side-nav/>
                        
                    </div>
                </div>
            </div>
            
            <div class="mt-6 lg:w-3/4 md:w-2/3 md:px-3 md:mt-0">
                <x-alert/>
                @if ($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="p-6 bg-white rounded-md shadow dark:shadow-gray-800 dark:bg-slate-900">
                    <h5 class="mb-4 text-lg font-semibold">Personal Information :</h5>
                    <form action="{{ route('add-kyc') }}" method="post" enctype="multipart/form-data"> 
                        @csrf
                        <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
                            <div>
                                <div style="color: red;">
                                    <ul>
                                        <li>Uploaded file must not be more than 4mb</li>
                                    </ul>
                                </div>
                                <label class="font-medium form-label">Clear Photo :</label>
                                <small class="text-slate-400">Submit a clear photo of yourself</small>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="file" name="avatar" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" id="avatar" required>
                                </div>
                            </div>

                            <div>
                                <label class="font-medium form-label">Confirm First Name :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="text" name="first_name" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="First Name:" id="firstname" required>
                                </div>
                            </div>

                            <div>
                                <label class="font-medium form-label">Confirm Last Name :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user-check" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="text" name="last_name" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Last Name:" id="lastname" required>
                                </div>
                            </div>
                            
                            <div>
                                <label class="font-medium form-label">Date Of Birth :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="calendar" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="date" name="dob" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" required>
                                </div>
                            </div>
                            
                            <div>
                                <label class="font-medium form-label">Phone Number :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user-check" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="tel" name="mobile" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" placeholder="Phone Number:" required>
                                </div>
                            </div>
                        </div><!--end grid-->   

                        <h5 class="mt-6 text-lg font-semibold">Valid ID :</h5>
                        <small class="mb-4 text-slate-400 ">Kindly submit a clear photo of the front and back page of any valid document you select below</small>
                        <div>
                            <label class="font-medium form-label">Document Type :</label>
                            <div class="relative mt-2 form-icon">
                                <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                <select name="id_type" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" id="id_type" required>
                                    <option value="Driver's License">Driver's License</option>
                                    <option value="State ID">State ID</option>
                                    <option value="Passport">Passport</option>
                                </select>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 gap-5 mt-4 lg:grid-cols-2">
                            <div>
                                <div style="color: red;">
                                    <ul>
                                        <li>Uploaded file must not be more than 4mb</li>
                                    </ul>
                                </div>
                                <label class="font-medium form-label">Valid ID Front :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="file" name="dl_front" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" id="avatar" required>
                                </div>
                            </div>
                            <div>
                                <div style="color: red;">
                                    <ul>
                                        <li>Uploaded file must not be more than 4mb</li>
                                    </ul>
                                </div>
                                <label class="font-medium form-label">Valid ID Back :</label>
                                <div class="relative mt-2 form-icon">
                                    <i data-feather="user" class="absolute w-4 h-4 top-3 start-4"></i>
                                    <input type="file" name="dl_back" class="w-full h-10 px-3 py-2 bg-transparent border border-gray-100 rounded outline-none ps-12 dark:bg-slate-900 dark:text-slate-200 dark:border-gray-800 focus:ring-0" id="avatar" required>
                                </div>
                            </div>
                        </div>

                        <button type="submit" id="submit" class="inline-block px-5 py-2 mt-5 text-base font-semibold tracking-wide text-center text-white align-middle duration-500 bg-orange-500 rounded-md">Submit Information</button>
                    </form><!--end form-->
                </div>
            </div>
        </div><!--end grid-->
    </div><!--end container-->
</section><!--end section-->
<!-- End Hero -->

@endsection