@php $page = 'settings' @endphp
@extends('includes.layout')

@section('content')
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>Manage Settings</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="breadcrumb-item active">Manage Settings</li>
        </ol>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="box">
            <div class="row">
                <div class="col-lg-10 offset-lg-1">
                    <header>
                        <h2 class="text-lg text-center">Begin your ID-Verification</h2>
                        <p class="text-center">
                            To comply with regulation each participant will have to go through indentity verification
                            (KYC/AML) to prevent fraud causes.
                        </p>
                    </header>
                    <div class="p-10 shadow-lg ">
                        <form method="post" action="{{ route('store.kyc') }}" class="row" enctype="multipart/form-data">
                            @csrf
                            <header class="text-center col-lg-12">
                                <h2 class="text-gray-900">Personal Details</h2>
                                <p class="text-gray-600">Your simple personal information required for identification
                                </p>
                                <p>Please type carefully and fill out the form with your personal details. Your can’t
                                    edit these details once you submitted the form.</p>
                            </header>

                            <div class="form-group col-lg-12">
                                <x-input-label for="name" :value="__('Full Name')" />
                                <x-text-input id="name" name="name" type="text" class="form-control"
                                    :value="old('name', $user->name)" required autofocus autocomplete="name" />
                                <x-input-error class="text-danger" :messages="$errors->get('name')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="email" :value="__('Email')" />
                                <x-text-input id="email" name="email" type="email" class="form-control"
                                    :value="old('email', $user->email)" required autocomplete="username" />
                                <x-input-error class="text-danger" :messages="$errors->get('email')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="phone" :value="__('Phone Number')" />
                                <x-text-input id="phone" name="phone" type="tel" class="form-control"
                                    :value="old('phone', $user->phone)" required autocomplete="phone" />
                                <x-input-error class="text-danger" :messages="$errors->get('phone')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="gender" :value="__('Gender')" />
                                <select name="gender" id="gender" class="form-control">
                                    <option value="">Please Gender</option>
                                    <option {{ $user->gender == 'Male' ? 'selected' : '' }} value="Male">Male</option>
                                    <option {{ $user->gender == 'Female' ? 'selected' : '' }} value="Female">Female
                                    </option>
                                    <option {{ $user->gender == 'Other' ? 'selected' : '' }} value="Other">Other
                                    </option>
                                </select>
                                <x-input-error class="text-danger" :messages="$errors->get('gender')" />
                            </div>
                            {{-- <div class="form-group col-lg-6">
                                <x-input-label for="dob" :value="__('Date Of Birth')" />
                                <x-text-input id="dob" name="dob" type="date" class="form-control"
                                    :value="old('dob', optional($kyc)->dob)" required autocomplete="dob" />
                                <x-input-error class="text-danger" :messages="$errors->get('dob')" />
                            </div> --}}
                            <div class="form-group col-lg-6">
                                <x-input-label for="dob" :value="__('Date of Birth')" />
                                <div class="gap-2 d-flex">
                                    {{-- Day --}}
                                    <select name="dob_day" id="dob_day" class="form-control" required>
                                        <option value="">Day</option>
                                        @for ($d = 1; $d <= 31; $d++) <option value="{{ $d }}" {{ old('dob_day')==$d
                                            ? 'selected' : '' }}>
                                            {{ $d }}
                                            </option>
                                            @endfor
                                    </select>
                                    {{-- Month --}}
                                    <select name="dob_month" id="dob_month" class="form-control" required>
                                        <option value="">Month</option>
                                        @foreach ([
                                        1 => 'January', 2 => 'February', 3 => 'March',
                                        4 => 'April', 5 => 'May', 6 => 'June',
                                        7 => 'July', 8 => 'August', 9 => 'September',
                                        10 => 'October', 11 => 'November', 12 => 'December'
                                        ] as $num => $month)
                                        <option value="{{ $num }}" {{ old('dob_month')==$num ? 'selected' : '' }}>
                                            {{ $month }}
                                        </option>
                                        @endforeach
                                    </select>
                                    {{-- Year --}}
                                    <select name="dob_year" id="dob_year" class="form-control" required>
                                        <option value="">Year</option>
                                        @for ($y = now()->year; $y >= 1900; $y--)
                                        <option value="{{ $y }}" {{ old('dob_year')==$y ? 'selected' : '' }}>
                                            {{ $y }}
                                        </option>
                                        @endfor
                                    </select>
                                </div>
                                <x-input-error class="text-danger" :messages="$errors->get('dob')" />
                            </div>
                            <header class="text-center col-lg-12">
                                <h2 class="text-lg font-medium text-gray-900">Your Address</h2>
                                <p class="text-sm text-gray-600">Your simple location information required for
                                    identification</p>
                            </header>
                            <div class="form-group col-lg-6">
                                <x-input-label for="address" :value="__('Address')" />
                                <x-text-input id="address" name="address" type="text" class="form-control"
                                    :value="old('address', optional($user)->address)" required autocomplete="address" />
                                <x-input-error class="text-danger" :messages="$errors->get('address')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="city" :value="__('City')" />
                                <x-text-input id="city" name="city" type="text" class="form-control"
                                    :value="old('city', optional($kyc)->city)" required autocomplete="city" />
                                <x-input-error class="text-danger" :messages="$errors->get('city')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="state" :value="__('State')" />
                                <x-text-input id="state" name="state" type="text" class="form-control"
                                    :value="old('state', optional($kyc)->state)" required autocomplete="state" />
                                <x-input-error class="text-danger" :messages="$errors->get('state')" />
                            </div>
                            <div class="form-group col-lg-6">
                                <x-input-label for="country" :value="__('Nationality')" />
                                <select name="country" id="country" class="form-control">
                                    <option value="">Please Country</option>
                                    @forelse ($countries as $item)
                                    <option {{ $item->name == $user->country ? 'selected' : '' }} value="{{ $item->name
                                        }}">{{ $item->name }}</option>
                                    @empty
                                    <option value="">No Country Found</option>
                                    @endforelse
                                </select>
                                <x-input-error class="text-danger" :messages="$errors->get('country')" />
                            </div>
                            <header class="text-center col-lg-12">
                                <h2 class="text-lg font-medium text-gray-900">Document Upload</h2>
                                <p class="text-sm text-gray-600">Your simple personal document required for
                                    identification</p>
                            </header>
                            <div class="form-group col-lg-12">
                                <div class="c-inputs-stacked">
                                    <input name="document_type" type="radio" id="passport"
                                        value="International Passport" checked>
                                    <label for="passport" class="mr-30">International Passport</label>
                                    <input name="document_type" type="radio" id="national_id" value="National ID">
                                    <label for="national_id" class="mr-30">National ID</label>
                                    <input name="document_type" type="radio" id="license" value="Drivers License">
                                    <label for="license" class="mr-30"> Drivers License</label>
                                </div>
                            </div>
                            <div class="mb-5 col-lg-12">
                                <h6 class=" font-weight-bold">
                                    To avoid delays when verifying account, Please make sure your document meets the
                                    criteria below:
                                </h6>
                                <ul class="list-group " style="list-style: none">
                                    <li>
                                        <i class="fas fa-check-square text-primary"></i>
                                        Chosen credential must not have expired.
                                    </li>
                                    <li>
                                        <i class="fas fa-check-square text-primary"></i>
                                        Document should be in good condition and clearly visible.
                                    </li>
                                    <li>
                                        <i class="fas fa-check-square text-primary"></i>
                                        Make sure that there is no light glare on the document.
                                    </li>
                                </ul>
                            </div>
                            <div class="mt-5 form-group col-lg-12">
                                <label for="document_front">Upload Front Side:</label>
                                <input type="file" name="document_front" id="document_front" class="form-control"
                                    placeholder="Upload Front Side">
                            </div>
                            <div class="form-group col-lg-12">
                                <label for="document_back">Upload Back Side:</label>
                                <input type="file" name="document_back" id="document_back" class="form-control"
                                    placeholder="Upload Back Side">
                            </div>
                            <div class="checkbox col-lg-12">
                                <input type="checkbox" id="confirmation" name="confirmation" required>
                                <label for="confirmation">All The Information I Have Entered Is Correct.</label>
                            </div>
                            <div class="form-group col-lg-12">
                                <button type="submit" class="btn btn-danger">Save</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- /.content -->
</div>
<!-- /.content-wrapper -->
@endsection