@extends('layouts.user.base')

@section('page-title')
    Settings
@endsection

@php
    $user = auth()->user();
    $kyc_status = $user->active_kyc ? 1 : 0;
    $kyc2_status = 1;
    if ($kyc_status == 1) {
        $kyc2_status = !$user->requires_kyc2_upload();
    } 
@endphp

@section('content')


<div class="row">
    @include('user.settings.layouts.sidebard')

    <div class="col mb-3 mb-xl-4 mb-lg-3 mb-md-3">
        <div class="row">
            <div class="col-md-8">
                <div class="card card-bg border-0">
                    <div class="card-body">
                        <form id="profileuploadform" method="POST" action="{{ route('user_upload_profile_picture') }}" enctype="multipart/form-data" x-data="{show: false}">
                            @csrf
                            <style>
                                .filepond--root.form-control.filepond {
                                    height: 100px !important;
                                    width: 100px !important;
                                    border-radius: 100% !important;
                                }

                                .filepond--drop-label label {

                                    font-size: .6em !important;

                                }
                            </style><!-- Start: Image Upload -->
                            <div class="d-flex" :class="{'d-none': !show, 'd-block': show}">
                                <div class="mb-3"><input class="form-control no_filepond filepond border-0"
                                        type="file" id="upload-img" name="upload_file" single=""
                                        accept="image/png, image/jpeg, image/gif, image/webp"></div>
                                <div class="mb-3"><button class="btn btn-primary py-2 px-3 mt-4 ms-3"
                                        type="submit">Upload</button></div>
                            </div><!-- End: Image Upload -->
                            <!-- Start: Profile Image -->
                            <div class="form-group mb-3" :class="{'d-none': show, 'd-block': !show}"><a
                                    href="#"><img class="rounded-circle img-fluid" width="90px"
                                        height="90px" src="{{ $user->profile_picture_path(true) }}"></a><a
                                    class="text-decoration-none alt-btn ms-3"
                                    x-on:click="show = !show">Upload<svg
                                        xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                        fill="currentColor" viewBox="0 0 16 16"
                                        class="bi bi-cloud-upload ms-1">
                                        <path fill-rule="evenodd"
                                            d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z">
                                        </path>
                                        <path fill-rule="evenodd"
                                            d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z">
                                        </path>
                                    </svg></a>
                                </div><!-- End: Profile Image -->
                        </form>
                        @if(!empty($user->picture_filename))
                        {{-- <br> --}}
                            <form action="{{ route('user_remove_profile_picture') }}" method="post">@csrf
                                <button type="submit" class="btn btn-sm btn-danger">Remove Picture</button>
                            </form>
                        @endif
                        <div>
                            <p x-show="{{ $kyc_status }} == 0 || {{ $kyc2_status }} == 0"><svg xmlns="http://www.w3.org/2000/svg" width="1em"
                                    height="1em" fill="currentColor" viewBox="0 0 16 16"
                                    class="bi bi-patch-exclamation-fill me-1 text-red"
                                    data-bs-toggle="tooltip" data-bss-tooltip=""
                                    title="Pending verification">
                                    <path
                                        d="M10.067.87a2.89 2.89 0 0 0-4.134 0l-.622.638-.89-.011a2.89 2.89 0 0 0-2.924 2.924l.01.89-.636.622a2.89 2.89 0 0 0 0 4.134l.637.622-.011.89a2.89 2.89 0 0 0 2.924 2.924l.89-.01.622.636a2.89 2.89 0 0 0 4.134 0l.622-.637.89.011a2.89 2.89 0 0 0 2.924-2.924l-.01-.89.636-.622a2.89 2.89 0 0 0 0-4.134l-.637-.622.011-.89a2.89 2.89 0 0 0-2.924-2.924l-.89.01-.622-.636zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z">
                                    </path>
                                </svg>KYC:&nbsp;<a class="text-decoration-none ms-2" href="{{ route('user_kyc') }}"
                                    rel="external">Complete KYC {{ $kyc2_status == 0 ? "2" : ""}}<svg
                                        xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"
                                        fill="currentColor" viewBox="0 0 16 16"
                                        class="bi bi-arrow-right ms-1">
                                        <path fill-rule="evenodd"
                                            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z">
                                        </path>
                                    </svg></a></p>
                        </div>
                        <form id="editprofileform" class="w-60" method="POST" action="{{ route('user_profile_update') }}">
                            @csrf
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="firstname">Full Name</label><input
                                            class="form-control" type="text" id="firstname" autofocus=""
                                            value="{{ $user->name }}"
                                            name="name"
                                            autocomplete="on" required="" minlength="2"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                        for="editemail">E-mail</label><input class="form-control"
                                        type="email" id="editemail" autocomplete="on"
                                        value="{{ $user->email }}" disabled="" readonly=""
                                        inputmode="email"></div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="contactnumber">Contact Number</label><input
                                            class="form-control" type="tel" id="contactnumber"
                                            value="{{ $user->contact_number }}"
                                            name="contact_number"
                                            autofocus="" inputmode="tel" minlength="10" maxlength="14">
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="address">Address</label><input class="form-control"
                                            value="{{ $user->address }}"
                                            name="address"
                                            type="text" id="address" autofocus=""></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="city">City</label><input class="form-control"
                                            value="{{ $user->city }}"
                                            name="city"
                                            type="text" id="city"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="state">State</label><input class="form-control"
                                            value="{{ $user->state }}"
                                            name="state"
                                            type="text" id="state"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="zipcode">Zipcode</label><input class="form-control"
                                            value="{{ $user->zipcode }}"
                                            name="zipcode"
                                            type="text" id="zipcode"></div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3"><label class="form-label"
                                            for="country">Country</label><input class="form-control"
                                            value="{{ $user->country }}"
                                            name="country"
                                            type="text" id="country" list="countries">
                                            <datalist
                                            id="countries">
                                            <option value="Afghanistan" />
                                            <option value="Albania" />
                                            <option value="Algeria" />
                                            <option value="American Samoa" />
                                            <option value="Andorra" />
                                            <option value="Angola" />
                                            <option value="Anguilla" />
                                            <option value="Antarctica" />
                                            <option value="Antigua and Barbuda" />
                                            <option value="Argentina" />
                                            <option value="Armenia" />
                                            <option value="Aruba" />
                                            <option value="Australia" />
                                            <option value="Austria" />
                                            <option value="Azerbaijan" />
                                            <option value="Bahamas" />
                                            <option value="Bahrain" />
                                            <option value="Bangladesh" />
                                            <option value="Barbados" />
                                            <option value="Belarus" />
                                            <option value="Belgium" />
                                            <option value="Belize" />
                                            <option value="Benin" />
                                            <option value="Bermuda" />
                                            <option value="Bhutan" />
                                            <option value="Bolivia" />
                                            <option value="Bosnia and Herzegovina" />
                                            <option value="Botswana" />
                                            <option value="Bouvet Island" />
                                            <option value="Brazil" />
                                            <option value="British Indian Ocean Territory" />
                                            <option value="Brunei Darussalam" />
                                            <option value="Bulgaria" />
                                            <option value="Burkina Faso" />
                                            <option value="Burundi" />
                                            <option value="Cambodia" />
                                            <option value="Cameroon" />
                                            <option value="Canada" />
                                            <option value="Cape Verde" />
                                            <option value="Cayman Islands" />
                                            <option value="Central African Republic" />
                                            <option value="Chad" />
                                            <option value="Chile" />
                                            <option value="China" />
                                            <option value="Christmas Island" />
                                            <option value="Cocos (Keeling) Islands" />
                                            <option value="Colombia" />
                                            <option value="Comoros" />
                                            <option value="Congo" />
                                            <option value="Congo, The Democratic Republic of The" />
                                            <option value="Cook Islands" />
                                            <option value="Costa Rica" />
                                            <option value="Cote D'ivoire" />
                                            <option value="Croatia" />
                                            <option value="Cuba" />
                                            <option value="Cyprus" />
                                            <option value="Czech Republic" />
                                            <option value="Denmark" />
                                            <option value="Djibouti" />
                                            <option value="Dominica" />
                                            <option value="Dominican Republic" />
                                            <option value="Ecuador" />
                                            <option value="Egypt" />
                                            <option value="El Salvador" />
                                            <option value="Equatorial Guinea" />
                                            <option value="Eritrea" />
                                            <option value="Estonia" />
                                            <option value="Ethiopia" />
                                            <option value="Falkland Islands (Malvinas)" />
                                            <option value="Faroe Islands" />
                                            <option value="Fiji" />
                                            <option value="Finland" />
                                            <option value="France" />
                                            <option value="French Guiana" />
                                            <option value="French Polynesia" />
                                            <option value="French Southern Territories" />
                                            <option value="Gabon" />
                                            <option value="Gambia" />
                                            <option value="Georgia" />
                                            <option value="Germany" />
                                            <option value="Ghana" />
                                            <option value="Gibraltar" />
                                            <option value="Greece" />
                                            <option value="Greenland" />
                                            <option value="Grenada" />
                                            <option value="Guadeloupe" />
                                            <option value="Guam" />
                                            <option value="Guatemala" />
                                            <option value="Guinea" />
                                            <option value="Guinea-bissau" />
                                            <option value="Guyana" />
                                            <option value="Haiti" />
                                            <option value="Heard Island and Mcdonald Islands" />
                                            <option value="Holy See (Vatican City State)" />
                                            <option value="Honduras" />
                                            <option value="Hong Kong" />
                                            <option value="Hungary" />
                                            <option value="Iceland" />
                                            <option value="India" />
                                            <option value="Indonesia" />
                                            <option value="Iran, Islamic Republic of" />
                                            <option value="Iraq" />
                                            <option value="Ireland" />
                                            <option value="Israel" />
                                            <option value="Italy" />
                                            <option value="Jamaica" />
                                            <option value="Japan" />
                                            <option value="Jordan" />
                                            <option value="Kazakhstan" />
                                            <option value="Kenya" />
                                            <option value="Kiribati" />
                                            <option value="Korea, Democratic People's Republic of" />
                                            <option value="Korea, Republic of" />
                                            <option value="Kuwait" />
                                            <option value="Kyrgyzstan" />
                                            <option value="Lao People's Democratic Republic" />
                                            <option value="Latvia" />
                                            <option value="Lebanon" />
                                            <option value="Lesotho" />
                                            <option value="Liberia" />
                                            <option value="Libyan Arab Jamahiriya" />
                                            <option value="Liechtenstein" />
                                            <option value="Lithuania" />
                                            <option value="Luxembourg" />
                                            <option value="Macao" />
                                            <option
                                                value="Macedonia, The Former Yugoslav Republic of" />
                                            <option value="Madagascar" />
                                            <option value="Malawi" />
                                            <option value="Malaysia" />
                                            <option value="Maldives" />
                                            <option value="Mali" />
                                            <option value="Malta" />
                                            <option value="Marshall Islands" />
                                            <option value="Martinique" />
                                            <option value="Mauritania" />
                                            <option value="Mauritius" />
                                            <option value="Mayotte" />
                                            <option value="Mexico" />
                                            <option value="Micronesia, Federated States of" />
                                            <option value="Moldova, Republic of" />
                                            <option value="Monaco" />
                                            <option value="Mongolia" />
                                            <option value="Montserrat" />
                                            <option value="Morocco" />
                                            <option value="Mozambique" />
                                            <option value="Myanmar" />
                                            <option value="Namibia" />
                                            <option value="Nauru" />
                                            <option value="Nepal" />
                                            <option value="Netherlands" />
                                            <option value="Netherlands Antilles" />
                                            <option value="New Caledonia" />
                                            <option value="New Zealand" />
                                            <option value="Nicaragua" />
                                            <option value="Niger" />
                                            <option value="Nigeria" />
                                            <option value="Niue" />
                                            <option value="Norfolk Island" />
                                            <option value="Northern Mariana Islands" />
                                            <option value="Norway" />
                                            <option value="Oman" />
                                            <option value="Pakistan" />
                                            <option value="Palau" />
                                            <option value="Palestinian Territory, Occupied" />
                                            <option value="Panama" />
                                            <option value="Papua New Guinea" />
                                            <option value="Paraguay" />
                                            <option value="Peru" />
                                            <option value="Philippines" />
                                            <option value="Pitcairn" />
                                            <option value="Poland" />
                                            <option value="Portugal" />
                                            <option value="Puerto Rico" />
                                            <option value="Qatar" />
                                            <option value="Reunion" />
                                            <option value="Romania" />
                                            <option value="Russian Federation" />
                                            <option value="Rwanda" />
                                            <option value="Saint Helena" />
                                            <option value="Saint Kitts and Nevis" />
                                            <option value="Saint Lucia" />
                                            <option value="Saint Pierre and Miquelon" />
                                            <option value="Saint Vincent and The Grenadines" />
                                            <option value="Samoa" />
                                            <option value="San Marino" />
                                            <option value="Sao Tome and Principe" />
                                            <option value="Saudi Arabia" />
                                            <option value="Senegal" />
                                            <option value="Serbia and Montenegro" />
                                            <option value="Seychelles" />
                                            <option value="Sierra Leone" />
                                            <option value="Singapore" />
                                            <option value="Slovakia" />
                                            <option value="Slovenia" />
                                            <option value="Solomon Islands" />
                                            <option value="Somalia" />
                                            <option value="South Africa" />
                                            <option
                                                value="South Georgia and The South Sandwich Islands" />
                                            <option value="Spain" />
                                            <option value="Sri Lanka" />
                                            <option value="Sudan" />
                                            <option value="Suriname" />
                                            <option value="Svalbard and Jan Mayen" />
                                            <option value="Swaziland" />
                                            <option value="Sweden" />
                                            <option value="Switzerland" />
                                            <option value="Syrian Arab Republic" />
                                            <option value="Taiwan, Province of China" />
                                            <option value="Tajikistan" />
                                            <option value="Tanzania, United Republic of" />
                                            <option value="Thailand" />
                                            <option value="Timor-leste" />
                                            <option value="Togo" />
                                            <option value="Tokelau" />
                                            <option value="Tonga" />
                                            <option value="Trinidad and Tobago" />
                                            <option value="Tunisia" />
                                            <option value="Turkey" />
                                            <option value="Turkmenistan" />
                                            <option value="Turks and Caicos Islands" />
                                            <option value="Tuvalu" />
                                            <option value="Uganda" />
                                            <option value="Ukraine" />
                                            <option value="United Arab Emirates" />
                                            <option value="United Kingdom" />
                                            <option value="United States" />
                                            <option value="United States Minor Outlying Islands" />
                                            <option value="Uruguay" />
                                            <option value="Uzbekistan" />
                                            <option value="Vanuatu" />
                                            <option value="Venezuela" />
                                            <option value="Viet Nam" />
                                            <option value="Virgin Islands, British" />
                                            <option value="Virgin Islands, U.S" />
                                            <option value="Wallis and Futuna" />
                                            <option value="Western Sahara" />
                                            <option value="Yemen" />
                                            <option value="Zambia" />
                                            <option value="Zimbabwe" />
                                        </datalist></div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-3"><button class="btn btn-primary" type="submit">Save Profile</button></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="col"></div>
        </div>
    </div>
    
</div>

@endsection

@section('scripts')

@endsection