@extends('layouts.app', ['header' => 'event', 'header_image' => false, 'pageHeader' => !(isset($redirect) && $redirect == 'update') && $route != 'challenge' ? true : false])

@php
    $route = str_contains(url()->previous(), 'events') ? 'events' : 'challenge';
    $route1 = $route == 'events' ? 'event' : 'challenge';
    $back_url = session()->get('challenge_id');
@endphp

@section('back_button')
    @if (!(isset($redirect) && $redirect == 'update'))
        @if ($route == 'challenge')
            <a href="{{ route('home') }}" class="back-btn-back">
                <i class="fa-solid fa-chevron-left"></i>
            </a>
        @else
            <a href="{{ route('member.' . $route . '.' . $route1 . '_login', ['event_id' => $redirect, 'token' => $token]) }}"
                class="back-btn-back">
                <i class="fa-solid fa-chevron-left"></i>
            </a>
        @endif
    @else
        <a href="javascript:void(0)" class="navbar-toggler">
            <i class="fa-solid fa-chevron-left"></i>
        </a>
    @endif
@endsection


@section('content')
    <section class="member-sec">
        <div class="container">
            <div class="">
                <form action="{{ route('member.profile.update', ['type' => $route1]) }}" method='post'
                    enctype="multipart/form-data" id='memberProfileForm'>
                    <input type="hidden" name='redirect' value="{{ $redirect ?? session('redirect') }}">
                    <input type="hidden" name='token' value = "{{ request()->route('token') }}">
                    @csrf
                    <div class="member-create-profile">
                        <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='logo-dp-preview' alt=""> --}}
                                    <img src="{{ auth()->user()->profile_pic_path }}" id='logo-dp-preview' alt="">
                                </div>
                            </div>
                            <label for="upload-dp" class="profile-upload-box">
                                <img src="{{ asset('images/add-photo-img.svg') }}" alt="">
                                <input class='profile_image_only' style="display: none;" type="file" name="profile_dp"
                                    accept="image/png, image/gif, image/jpeg" value=" " id="upload-dp">
                                <input type="hidden" name='profile_basefile' id='profile_basefile'>
                            </label>
                        </div>
                        <h4>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 ">
                            <div class="row">
                                @if (isset($redirect) && $redirect == 'update')
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label for="">Email<span class='required'> *</span></label>
                                            <div class="formfield">
                                                <input type="text" name="email" placeholder="Email"
                                                    value="{{ auth()->user()->email ?? null }}"
                                                    class="form-control @error('email') is-invalid @enderror" readonly>
                                            </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="" id='password'
                                                    class="form-control @error('password') is-invalid @enderror">
                                                <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>
                                @endif
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="">User Name<span class='required'> *</span></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<span class='required'> *</span></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 (auth()->user()->user_details && auth()->user()->user_details->gender == 'male') selected @endif>
                                                    Male</option>
                                                <option value="female" @if (auth()->user()->user_details && 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="">
                                        <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="user-bio @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-6">
                                    <div class="form-group">
                                        <label for="">First Name<span class='required'> *</span></label>
                                        <div class="formfield">
                                            <input type="text" name="first_name" placeholder="First Name"
                                                value="{{ auth()->user()->first_name ?? null }}"
                                                class="form-control @error('first_name') is-invalid @enderror">
                                        </div>
                                        @error('first_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="">Last Name<span class='required'> *</span></label>
                                        <div class="formfield">
                                            <input type="text" name="last_name" placeholder="Last Name"
                                                value="{{ auth()->user()->last_name ?? null }}"
                                                class="form-control @error('last_name') is-invalid @enderror">
                                        </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">
                                        <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>
                                        <label for="">Street Address<span class='required'> *</span></label>

                                        <div class="formfield">
                                            <input type="text" placeholder="Street Address" name="address"
                                                value="{{ auth()->user()->user_details->address ?? null }}"
                                                class="form-control @error('address') is-invalid @enderror">
                                        </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<span class='required'> *</span></label>
                                        <div class="form-field">
                                            <select name="country" id="country"
                                                class="form-control @error('country') is-invalid @enderror">
                                                <option value="">Country</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<span class='required'> *</span></label>
                                        <div class="formfield">
                                            <input type="text" placeholder="City" name="city"
                                                value="{{ auth()->user()->user_details->city ?? null }}"
                                                class="form-control @error('city') is-invalid @enderror">
                                        </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',
                                                auth()->user()->user_details
                                                    ? auth()->user()->user_details->country
                                                    : null,
                                            )->get();
                                        @endphp
                                        <label>State<span class='required'> *</span></label>
                                        <div class="form-field">
                                            <select name="state" id="state"
                                                class="form-control @error('state') is-invalid @enderror">
                                                <option value="">State</option>

                                                @foreach ($states as $state)
                                                    <option id="{{ $state->id }}" value="{{ $state->id }}"
                                                        @if ($state->id == auth()->user()->user_details->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'
                                                class="form-control @error('zip_code') is-invalid @enderror"
                                                placeholder="Zip code"
                                                value="{{ auth()->user()->user_details->zip_code ?? null }}">
                                        </div>
                                        @error('zip_code')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                {{-- PROFILE UPDATION USING MENU BAR  --}}
                                @if (isset($redirect) && $redirect == 'update')
                                    <div class="col-6 d-flex gap-2">
                                        {{-- <button type='button' class="button primary-btn full-btn white-outline-btn"
                                            id='edit-profile'>
                                            <div class="spinner-border d-none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            EDIT
                                        </button> --}}
                                        <button type='button' href="#"
                                            class="button primary-btn full-btn white-outline-btn"
                                            id='edit-profile'>Edit</button>
                                    </div>
                                    <div class="col-6 d-flex gap-2">
                                        {{-- <button type='button'
                                            class="button primary-btn full-btn white-outline-btn save-profile-btn" disabled
                                            id='submitProfileData'>
                                            <div class="spinner-border d-none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            SAVE
                                        </button> --}}
                                        <button href="#" type='button'
                                            class="button primary-btn full-btn save-profile-btn" disabled
                                            id='submitProfileData'>Save <input type="checkbox" name=""
                                                checked=""></button>
                                    </div>
                                @else
                                    {{-- PROFILE UPDATE WHEN USER PLAYED ANY EVENT OR CHALLENGE --}}
                                    <div class="col-md-12 d-flex gap-2">
                                        <button type='submit' class="button primary-btn full-btn white-outline-btn"
                                            id='submitProfileData'>
                                            @if (!(isset($redirect) && $redirect == 'update'))
                                                @if ($route1 == 'event')
                                                    CONTINUE TO EVENT
                                                @else
                                                    CONTINUE TO CHALLENGE
                                                @endif
                                            @endif
                                            <div class="spinner-border d-none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>

                    </div>
                </form>
            </div>
        </div>
    </section>
    @include('host.event-new-flow.modal.image-cropper', ['cropped_img_circle' => true])
@endsection

@push('scripts')
    @include('validations.js_member_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 ?? '/images/user-sm.svg' }}";

        // CROPPING PROFILE IMAGE
        handleImageCropping("upload-dp", "profile_basefile", "logo-dp-preview", profilePath);

        //show country and states selected
        jQuery(document).ready(function() {
            // DISABLED ALL INPUT AND SELECT BOX
            let redirectValue = "{{ $redirect }}";
            if (redirectValue == 'update') {
                jQuery('.form-control , textarea').attr('disabled', true)
            }

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

            //hit the ajax
            let response = ajaxCall(url, 'get');
            response.then(function(response) {
                let html = '<option value="" >Country</option> ';
                if (response.status) {
                    let html = '<option value="" >Country</option> '
                    // setting country options
                    jQuery.each(response.data, function(key, value) {
                        html +=
                            `<option id="${value.id}" value="${value.id}" ${(value.id == "{{ auth()->user()->user_details->country ?? null }}") ? '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 8 free targets / month to be used for the weekly challenges. Your street address is needed in order for these to be successfully delivered',
                    'OK')
            });

            // EDIT PROFILE
            jQuery('#edit-profile').click(function() {
                //ENABLE ALL INPUTS AND SELECT BOX
                jQuery('.form-control , .profile_image_only, textarea').attr('disabled', false)

                //DISABLE EDIT BTN
                jQuery(this).attr('disabled', true);

                //ENABLE SAVE BTN
                jQuery('#submitProfileData').attr('disabled', false)
            });


            // PREVENT SAVE BUTTON TICK TO BE UNCHECKED ON CLICKING SAVE BUTTON
            jQuery('.save-profile-btn').find('input').click(function(e) {
                jQuery(this).prop('checked', true);
            });


            //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);
            });
        })
    </script>
@endpush