@extends('layouts.host', ['header' => true, 'header_image' => false])
@section('title', 'Update Profile')
@section('back_button')
    {{-- <a href="{{ route('home') }}" class="back-btn-back">
        <i class="fa-solid fa-chevron-left"></i>
    </a> --}}
    <a href="javascript:void(0)" class="back-btn-back navbar-toggler">
        <i class="fa-solid fa-chevron-left"></i>
    </a>
@endsection
@section('content')
    <section class="member-sec">
        <div class="container">
            <div class="">
                <form action="{{ route('host.updateProfile') }}" method='post' enctype="multipart/form-data"
                    id='hostProfileForm'>
                    {{-- <input type="hidden" name='redirect' value="{{ $redirect ?? session('redirect') }}"> --}}
                    @csrf
                    <div class="member-create-profile mb-80 host-profile-layout ">

                        <h2>Welcome</h2>
                        <h3>to the Ready-Aim-Fire Leaderboard Community</h3>
                        <div class="create-profile-dp-box">
                            <div class="profile-dp-box">
                                <div class="profile-dp-box-inner">
                                    {{-- <img src="{{ auth()->user()->user_details->profile_pic_path ? Storage::url(auth()->user()->user_details->profile_pic_path) : asset('images/user-sm.svg') }}"
                                        id='profile-dp-preview' alt=""> --}}
                                    <img src="{{ getHostProfile()?->profile_pic_path ? Storage::url(getHostProfile()->profile_pic_path) : Storage::url($latestEventLogo) }}"
                                        id='profile-dp-preview' alt="">
                                </div>
                            </div>
                            <label for="upload-dp-host" class="profile-upload-box">
                                <img src="{{ asset('images/add-photo-img.svg') }}" alt="">
                                {{-- <input style="display: none;" type="file" name="profile_dp" class="form-control" accept="jpg,jpeg,png"
                                    value=" " id="upload-dp-host" disabled> --}}
                                <input type="file" name="profile_dp" class="form-control" accept="jpg,jpeg,png"
                                    value=" " id="upload-dp-host" disabled>
                                <input type="hidden" name="host_logo_basefile" id="host_logo_basefile">
                                <input type="hidden" name="is_profile_dp" id="is_profile_dp"
                                    value="{{ optional(getHostProfile())->profile_pic_path ? 'false' : 'true' }}">
                            </label>
                        </div>
                        <h4 class="mb-5">Add / Update Profile Picture *</h4>
                        {{-- <p class="mb-3">Your User Name, City, State, Country and Affiliation will be shown on the
                            leaderboard. </p> --}}

                        <div class="create-profile-form-box credit-subscription profile-update-div">
                            <div class="row">
                                {{-- <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">User Name</label>
                                        <div class="formfield">
                                            <input type="text" name="username" placeholder="Username"
                                                value="{{ auth()->user()->username ?? null }}"
                                                class="form-control @error('username') is-invalid @enderror">
                                        </div>
                                        @error('username')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label for="">Gender</label>
                                        <div class="male form-field">
                                            <select name="gender" id="gender"
                                                class="form-control @error('gender') is-invalid @enderror">
                                                <option value="">Select gender</option>
                                                <option value="male" @if (optional(auth()->user()->user_details)->gender == 'male') selected @endif>
                                                    Male</option>
                                                <option value="female" @if (optional(auth()->user()->user_details)->gender == 'female') selected @endif>
                                                    Female</option>
                                            </select>
                                            <span class="form-icon">
                                                <img src="{{ asset('images/dropdown-icon.svg') }}" alt="">
                                            </span>
                                        </div>
                                        @error('gender')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-6">
                                    <p class="mt-4">
                                        <sup><img src="{{ asset('images/optional.svg') }}"></sup> Required for Leaderboard
                                        sorting by division. Women are welcome to compete in the Men’s divisions - however
                                        Men are not allow to compete in the Women’s
                                    </p>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <a href="#" class="why-street-add ">
                                            <svg width="5" height="5" viewBox="0 0 5 5" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <path
                                                    d="M2.10889 4.6499L2.15186 2.82568L0.593262 3.77881L0.304199 3.271L1.91357 2.3999L0.304199 1.52881L0.593262 1.021L2.15186 1.97412L2.10889 0.149902H2.69482L2.65186 1.97412L4.21045 1.021L4.49951 1.52881L2.89014 2.3999L4.49951 3.271L4.21045 3.77881L2.65186 2.82568L2.69482 4.6499H2.10889Z"
                                                    fill="#FFDE65" />
                                            </svg>

                                            Optional
                                        </a>
                                        <label for="">Affiliation</label>
                                        <div class="formfield">
                                            <input type="text" name="affiliation" placeholder="Affiliation"
                                                value="{{ auth()->user()->user_details->affiliation ?? null }}"
                                                class="form-control @error('affiliation') is-invalid @enderror">
                                        </div>
                                        @error('affiliation')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Bio</label>
                                        <div class="custom-textbox-inner">
                                            <label for="">Bio <sup>*(Optional)</sup></label>
                                            <textarea name="bio" id="bio" placeholder="Tell the community about yourself or promote your channel"
                                                class="@error('bio') is-invalid @enderror">{{ auth()->user()->user_details->bio ?? '' }}</textarea>

                                        </div>
                                        @error('bio')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div> --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Email</label>
                                        <div class="formfield">
                                            <input type="text" name="email" placeholder="Email" id="email"
                                                value="{{ auth()->user()->email ?? old('email') }}"
                                                class="form-control @error('email') is-invalid @enderror" disabled>
                                        </div>
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Password</label>
                                        <div class="formfield">
                                            {{-- <input type="text" name="password" placeholder="Password"
                                                value="{{ auth()->user()->password ?? null }}"
                                                class="form-control @error('password') is-invalid @enderror"> --}}
                                            <input type="password" name="password" placeholder="Password"
                                                class="form-control @error('password') invalid-password @enderror"
                                                id="password" disabled>
                                            <span class="form-icon" style="top: 16px">
                                                <img src="{{ asset('images/eye-close-icon.svg') }}" id="toggle-icon"
                                                    alt="eye-icon">
                                            </span>
                                        </div>
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Name of Hosted by *</label>
                                        <div class="formfield">
                                            <input type="text" name="name" placeholder="Name of Hosted by"
                                                id="name"
                                                value="{{ auth()->user()->hostProfile->host_by_name ? auth()->user()->hostProfile->host_by_name : $latestHostName }}"
                                                class="form-control @error('name') is-invalid @enderror" disabled>
                                        </div>
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label for="">First Name *</label>
                                        <div class="formfield">
                                            <input type="text" name="first_name" placeholder="First Name" id="first_name"
                                                value="{{ getHostProfile()->first_name ?? null }}"
                                                class="form-control @error('first_name') is-invalid @enderror" disabled>
                                        </div>
                                        @error('first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label for="">Last Name *</label>
                                        <div class="formfield">
                                            <input type="text" name="last_name" placeholder="Last Name" id="last_name"
                                                value="{{ getHostProfile()->last_name ?? null }}"
                                                class="form-control @error('last_name') is-invalid @enderror" disabled>
                                        </div>
                                        @error('last_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">Street Address *</label>
                                        <a type='button' class="why-street-add show-street-address">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13"
                                                viewBox="0 0 13 13" fill="none">
                                                <path
                                                    d="M6.21004 0.666504C2.99004 0.666504 0.376709 3.27984 0.376709 6.49984C0.376709 9.71984 2.99004 12.3332 6.21004 12.3332C9.43004 12.3332 12.0434 9.71984 12.0434 6.49984C12.0434 3.27984 9.43004 0.666504 6.21004 0.666504ZM6.21004 9.4165C5.88921 9.4165 5.62671 9.154 5.62671 8.83317V6.49984C5.62671 6.179 5.88921 5.9165 6.21004 5.9165C6.53088 5.9165 6.79338 6.179 6.79338 6.49984V8.83317C6.79338 9.154 6.53088 9.4165 6.21004 9.4165ZM6.79338 4.74984H5.62671V3.58317H6.79338V4.74984Z"
                                                    fill="#FFDE65" />
                                            </svg>
                                            Why Street Address
                                        </a>
                                        <div class="formfield">
                                            <input type="text" placeholder="Address " name="address" id="address"
                                                value="{{ getHostProfile()->address ?? null }}"
                                                class="form-control @error('address') is-invalid @enderror" disabled>
                                        </div>
                                        @error('address')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group">
                                        <label>Country *</label>
                                        <div class="form-field">
                                            <select name="country" id="country"
                                                class="form-control @error('country') is-invalid @enderror" disabled>
                                                <option value="">Select any</option>
                                            </select>
                                            <span class="form-icon">
                                                <img src="{{ asset('images/dropdown-icon.svg') }}" alt="">
                                            </span>
                                        </div>
                                        @error('country')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-5">
                                    <div class="form-group">
                                        <label for="">City *</label>
                                        <div class="formfield">
                                            <input type="text" placeholder="City" name="city" id="city"
                                                value="{{ getHostProfile()->city ?? null }}"
                                                class="form-control @error('city') is-invalid @enderror" disabled>
                                        </div>
                                        @error('city')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        @php
                                            use App\Models\State;
                                            $states = State::where(
                                                'country_id',
                                                optional(getHostProfile())->country,
                                            )->get();
                                        @endphp
                                        <label>State *</label>
                                        <div class="form-field">
                                            <select name="state" id="state"
                                                class="form-control @error('state') is-invalid @enderror" disabled>
                                                <option value="">Select any</option>

                                                @foreach ($states as $state)
                                                    <option id="{{ $state->id }}" value="{{ $state->id }}"
                                                        @if ($state->id == getHostProfile()->state) selected @endif>
                                                        {{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                            <span class="form-icon">
                                                <img src="{{ asset('images/dropdown-icon.svg') }}" alt="">
                                            </span>
                                        </div>
                                        @error('state')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-3">
                                    <div class="form-group">
                                        <label>Zip code </label>
                                        <div class="form-field">
                                            <input type="number" name='zip_code' id="zip_code"
                                                class="form-control @error('zip_code') is-invalid @enderror"
                                                placeholder="Zip code" value="{{ getHostProfile()->zip_code ?? null }}"
                                                disabled>
                                        </div>
                                        @error('zip_code')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                {{-- <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label for="">Date of Birth *</label>
                                        <div class="formfield">
                                            <input type="text" name="dob" id="dob"
                                                placeholder="Date of Birth"
                                                class="form-control  @error('dob') is-invalid @enderror"
                                                value="{{ old('dob', optional(auth()->user()->bankDetails)->dob ? optional(auth()->user()->bankDetails->dob)->format('m/d/Y') : '') }}"
                                                disabled>
                                            <img class="calender-new-icon" src="{{ asset('images/calender-new.png') }}"
                                                alt="">
                                        </div>
                                        @error('dob')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div> --}}


                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="">Routing Number *</label>
                                        <div class="formfield">
                                            <input type="text" name="routing_number" id="routing_number"
                                                onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
                                                placeholder="Enter Bank Routing #" data-maxlength='9'
                                                class="form-control maxlength-char-restrict  @error('routing_number') is-invalid @enderror"
                                                value="{{ old('account_number', optional(auth()->user()->bankDetails)->routing_number ? jsdecode_userdata(auth()->user()->bankDetails->routing_number) : '') }}"
                                                disabled>
                                        </div>
                                        @error('routing_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-6 col-6">
                                    <div class="form-group">
                                        <label for="">Account Number *</label>
                                        <div class="formfield">
                                            <input type="number" name="account_number" id="account_number"
                                                onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"
                                                placeholder="Enter Bank Account #" data-maxlength="17"
                                                class="form-control maxlength-char-restrict @error('account_number') is-invalid @enderror"
                                                value="{{ old('account_number', optional(auth()->user()->bankDetails)->account_number ? jsdecode_userdata(auth()->user()->bankDetails->account_number) : '') }}"
                                                disabled>
                                        </div>
                                        @error('account_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label for="">Tax Identification Number *</label>
                                        <div class="formfield">
                                            <input type="text" name="tax_number" id="tax_number"
                                                onkeyup="this.value=this.value.replace(/[^0-9-]/g,'');"
                                                placeholder="Tax Identification Number #" data-maxlength="11"
                                                class="form-control maxlength-char-restrict  @error('tax_number') is-invalid @enderror"
                                                value="{{ old('tax_number', optional(auth()->user()->bankDetails)->tax_number ? jsdecode_userdata(auth()->user()->bankDetails->tax_number) : '') }}"
                                                disabled @if (auth()->user()?->bankDetails?->tax_number) readonly @endif>
                                        </div>
                                        @error('tax_number')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-6 d-flex gap-2">
                                    <button type='button' class="button primary-btn full-btn white-outline-btn"
                                        id="editProfileBtn">EDIT
                                        <div class="spinner-border d-none" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                    {{-- <a href="#" class="button primary-btn full-btn update-profile"  data-bs-toggle="modal" data-bs-target="#unfortunately-modal">Save <input type="checkbox" name="" id="memeber-price-card" checked></a> --}}
                                </div>
                                <div class="col-6 d-flex gap-2">
                                    <button type='submit' class="button primary-btn full-btn" id='submitProfileData'
                                        disabled>SAVE <input type="checkbox" name="" checked="">
                                        <div class="spinner-border d-none" role="status">
                                            <span class="sr-only">Loading...</span>
                                        </div>
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@include('host.event-new-flow.modal.image-cropper')

@push('scripts')
    @include('validations.js_host_profile')
    <script>
        // show profile image preview
        // const input = document.getElementById('upload-dp');
        // const previewPhoto = () => {
        //     const file = input.files;
        //     if (file) {
        //         const fileReader = new FileReader();
        //         const preview = document.getElementById('profile-dp-preview');
        //         fileReader.onload = function(event) {
        //             preview.setAttribute('src', event.target.result);
        //         }
        //         fileReader.readAsDataURL(file[0]);
        //     }
        // }
        // input.addEventListener("change", previewPhoto);

        let profilePath = "{{ auth()->user()->profile_pic_path }}";

        handleImageCropping("upload-dp-host", "host_logo_basefile", "profile-dp-preview", profilePath);

        //show country and states selected
        jQuery(document).ready(function() {

            let url = "{{ route('countries') }}";

            //hit the ajax
            let response = ajaxCall(url, 'get');
            response.then(function(response) {
                let html = '<option value="" >Select any</option> ';
                if (response.status) {

                    // setting country options
                    jQuery.each(response.data, function(key, value) {
                        html +=
                            `<option id="${value.id}" value="${value.id}" ${(value.id == "{{ optional(getHostProfile())->country }}") ? 'selected' : ' '}>${value.upper_name}</option>`;
                    });
                    jQuery('#country').html(html);
                }

                jQuery('#country').change(function() {
                    //get the country id
                    let id = jQuery(this).find('option:selected').attr('id');


                    let urlState = APP_URL + '/states/' + id;

                    //hit the ajax
                    let result = ajaxCall(urlState, 'get');
                    result.then(function(result) {
                        let stateHtml = '<option value="" >Select any</option> ';
                        if (result.status) {
                            //setting options
                            jQuery.each(result.data, function(key, value) {
                                stateHtml +=
                                    `<option id="${value.id}" value="${value.id}" >${value.name}</option>`;
                            });
                            jQuery('#state').html(stateHtml);
                        }
                    })
                })
            })


            // why street address modal
            jQuery('.show-street-address').click(function() {
                jQuery('#error-message-img').attr('src', "{{ asset('images/details.png') }}")
                errorShow('Why Street Address',
                    'All RAF domestic (current USA) members will receive 5 free targets / month to be used for the weekly challenges. Your street address is needed in order for these to be successfully delivered',
                    'OK')
            });

            //view and hide password
            $('#toggle-icon').on('click', function() {
                var $password = $('#password');
                var isPasswordVisible = $password.attr('type') === 'text';
                // Toggle input type
                $password.attr('type', isPasswordVisible ? 'password' : 'text');
                // Toggle icon image
                // var newIconSrc = isPasswordVisible ?
                //     `{{ asset('images/eye-icon.svg') }}` :
                //     `{{ asset('images/eye-close-icon.svg') }}`;
                var newIconSrc = isPasswordVisible ?
                    `{{ asset('images/eye-close-icon.svg') }}` :
                    `{{ asset('images/eye-icon.svg') }}`;
                $('#toggle-icon').attr('src', newIconSrc);
            });


            // handling edit and save button
            $('#editProfileBtn').click(function() {
                $('.form-control').removeAttr('disabled');
                $('#email').prop('disabled', true);
                $(this).prop('disabled', true);
                $('#submitProfileData').prop('disabled', false);
            });
        })
    </script>
    <script>
        jQuery(document).ready(function() {
            $('#dob').datepicker({
                format: 'mm/dd/yyyy',
                autoclose: true,
                todayHighlight: true,
            });

            $('.calender-new-icon').on('click', function() {
                $(this).siblings('input[type="text"]').datepicker('show');
            });

            //FORMATTING TAX NUMBER 
            // $('#tax_number').on('keydown', function() {
            //     var currentValue = $(this).val();

            //     // Remove any characters that are not digits
            //     var digitsOnly = currentValue.replace(/\D/g, '');

            //     // Ensure the length does not exceed 9 digits (before formatting)
            //     if (digitsOnly.length > 9) {
            //         digitsOnly = digitsOnly.substring(0, 9);
            //     }

            //     // Format the value as 222-22-2222
            //     var formattedValue = '';
            //     for (var i = 0; i < digitsOnly.length; i++) {
            //         if (i === 3 || i === 5) {
            //             formattedValue += '-';
            //         }
            //         formattedValue += digitsOnly[i];
            //     }

            //     // Update the input field with the formatted value
            //     $(this).val(formattedValue);
            // });

            //FORMATTING ROUTING NUMBER 
            // $('#routing_number').on('keydown', function() {
            //     var currentValue = $(this).val();

            //     var filteredValue = currentValue.replace(/[^0-9-]/g, '');

            //     if (event.keyCode != 8 && filteredValue.length > 8) {
            //         return false;
            //     }

            //     $(this).val(filteredValue);
            // });
        })
    </script>
@endpush