@extends('front.layouts.front')

@section('css')
<style>
    .password-container{
        position: relative;
    }
    .password-container input[type="password"],
    .password-container input[type="text"]{
        box-sizing: border-box;
    }
    .fa-eye, .fa-eye-slash{
        position: absolute;
        top: 15px;
        right: 5%;
        cursor: pointer;
        color: lightgray;
    }
</style>
@endsection

@section('content')
    <!-- page title -->
    <section class="section section--first section--last section--head" data-bg="{{ asset('assets/img/bg.jpg') }}">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="section__wrap">
                        <h2 class="section__title">Profile</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end page title -->

    <!-- section -->
    <section class="section section--last">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="profile">
                        <div class="profile__user">
                            <div class="profile__avatar">
                                <form id="image-upload-form" action="{{ route('front.profile.photo') }}" method="post" enctype="multipart/form-data">
                                    <img @if ($Profile->profile_photo_path == null) src="{{ url('assets/img/user.svg') }}" @else src="{{ $Profile->profile_photo_path }}" @endif
                                    alt="{{ $Profile->first_name }}" class="profile__avatar1">
                                    <input type="file" id="myfile" name="profile_photo_path" class="d-none" />
                                </form>
                            </div>
                            <div class="profile__meta">
                                <h3>{{ $Profile->first_name }} {{ $Profile->last_name }}</h3>
                                <span>OMG ID: {{ $Profile->id }}</span>
                            </div>
                        </div>

                        <ul class="nav nav-tabs profile__tabs" id="profile__tabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#tab-2" role="tab"
                                    aria-controls="tab-2" aria-selected="false">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#tab-1" role="tab" aria-controls="tab-1"
                                    aria-selected="true">Login Device</a>
                            </li>

                        </ul>

                        <a href="{{ route('front.logout') }}" class="profile__logout" type="button">
                            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
                                <path
                                    d='M304 336v40a40 40 0 01-40 40H104a40 40 0 01-40-40V136a40 40 0 0140-40h152c22.09 0 48 17.91 48 40v40M368 336l80-80-80-80M176 256h256'
                                    fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='32' />
                            </svg>
                            <span>Logout</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <!-- content tabs -->
            <div class="tab-content">
                <div class="tab-pane fade" id="tab-1" role="tabpanel">
                    <div class="row">
                        <div class="col-12">
                            <div class="table-responsive table-responsive--border">
                                <table class="profile__table">
                                    <thead>
                                        <tr>
                                            <th>Device Name</th>
                                            <th>IP</th>
                                            <th><a href="javascript:void(0)" class="text-primary logout-all">Logout All</a>
                                            </th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($data as $item)
                                            <tr class="device-info {{ $item->is_current_device ? '' : 'not-current' }}">
                                                <td>
                                                    <h6 class="mb-1">{{ $item->agent['platform'] }} -
                                                        {{ $item->agent['browser'] }}
                                                    </h6>
                                                    <p class="text-muted ">Chrome - <span
                                                            class="{{ $item->is_current_device ? 'text-success' : '' }}">{{ $item->is_current_device ? 'Current device' : $item->last_active }}</span>
                                                    </p>
                                                </td>
                                                <td>{{ $item->ip_address }}</td>
                                                <td>
                                                    @if (!$item->is_current_device)
                                                        <a href="javascript:void(0)" data-id="{{ $item->id }}"
                                                            class="text-primary small other-logout">Logout</a>
                                                    @endif
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade show active" id="tab-2" role="tabpanel">
                    <div class="row">
                        <!-- details form -->
                        <div class="col-12 col-lg-8">
                            <form action="{{ route('front.profile.update') }}" class="form" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="form__title">Profile details</h4>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="first_name">First Name</label>
                                        <input id="first_name" type="text" name="first_name" class="form__input"
                                            placeholder="John" value="{{ $Profile->first_name }}">
                                    </div>

                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="last_name">Last Name</label>
                                        <input id="last_name" type="text" name="last_name" class="form__input"
                                            placeholder="Doe" value="{{ $Profile->last_name }}">
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="email">Email</label>
                                        <input id="email" type="text" name="email" class="form__input"
                                            placeholder="email@email.com" value="{{ $Profile->email }}">
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="phone_number">Phone Number</label>
                                        <input id="phone_number" type="text" name="phone_number" class="form__input"
                                            placeholder="9999999999" value="{{ $Profile->phone_number }}">
                                    </div>

                                    {{-- Other Details --}}
                                    <div class="col-12 col-md-12 col-lg-12 col-xl-12">
                                        <label class="form__label" for="address">Full Address</label>
                                        <input id="address" type="text" name="address" class="form__input"
                                            placeholder="108 W 1325 N, Cedar City, UT 84721, USA"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->address }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="email2">Other Email</label>
                                        <input id="email2" type="text" name="email2" class="form__input"
                                            placeholder="email2@email.com"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->email2 }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="mobile2">Other Phone Number</label>
                                        <input id="mobile2" type="text" name="mobile2" class="form__input"
                                            placeholder="9999999999"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->mobile2 }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="facebook">Facebook</label>
                                        <input id="facebook" type="text" name="facebook" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->facebook }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="snapchat">Snapchat</label>
                                        <input id="snapchat" type="text" name="snapchat" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->snapchat }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="discord">Discord</label>
                                        <input id="discord" type="text" name="discord" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->discord }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="instagram">Instagram</label>
                                        <input id="instagram" type="text" name="instagram" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->instagram }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="tiktok">TikTok</label>
                                        <input id="tiktok" type="text" name="tiktok" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->tiktok }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="pintrest">Pintrest</label>
                                        <input id="pintrest" type="text" name="pintrest" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->pintrest }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="4chan">4chan</label>
                                        <input id="4chan" type="text" name="chan4" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->chan4 }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="imdb">IMDB</label>
                                        <input id="imdb" type="text" name="imdb" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->imdb }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="mastodon">Mastodon</label>
                                        <input id="mastodon" type="text" name="mastodon" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->mastodon }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="rottentomatoes">rottentomatoes.com</label>
                                        <input id="rottentomatoes" type="text" name="rottentomatoes"
                                            class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->rottentomatoes }}" @endif>
                                    </div>
                                    <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                        <label class="form__label" for="reddit">Reddit</label>
                                        <input id="reddit" type="text" name="reddit" class="form__input"
                                            @if ($Profile->userdetails) value="{{ $Profile->userdetails->reddit }}" @endif>
                                    </div>

                                    <div class="col-12">
                                        <button class="form__btn" type="submit">Save</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- end details form -->

                        <!-- password form -->
                        <div class="col-12 col-lg-4">
                            <form action="{{ route('front.password.reset') }}" method="POST" class="form">
                                <div class="row">
                                    <div class="col-12">
                                        <h4 class="form__title">Change password</h4>
                                    </div>

                                    <div class="col-12 col-lg-12">
                                        <label class="form__label" for="oldpass">Old Password</label>
                                        <div class="password-container">
                                            <input id="oldpass" type="password" name="old_password" required class="form__input">
                                            <span class="eye"><i class="fas fa-eye"></i></span>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-12">
                                        <label class="form__label" for="newpass">New Password</label>
                                        <div class="password-container">
                                            <input id="newpass" type="password" name="new_password" required class="form__input">
                                            <span class="eye"><i class="fas fa-eye"></i></span>
                                        </div>
                                    </div>

                                    <div class="col-12 col-lg-12">
                                        <label class="form__label" for="confirmpass">Confirm New Password</label>
                                        <div class="password-container">
                                            <input id="confirmpass" type="password" name="confirmpass" required class="form__input">
                                            <span class="eye"><i class="fas fa-eye"></i></span>
                                        </div>
                                    </div>

                                    {{-- <div class="col-12 col-md-6 col-lg-12 col-xl-6">
                                    <label class="form__label" for="select">Select</label>
                                    <select name="select" id="select" class="form__select">
                                        <option value="0">Option</option>
                                        <option value="1">Option 2</option>
                                        <option value="2">Option 3</option>
                                        <option value="3">Option 4</option>
                                    </select>
                                </div> --}}

                                    <div class="col-12">
                                        <button class="form__btn" type="submit">Change</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- end password form -->
                    </div>
                </div>
            </div>
            <!-- end content tabs -->
        </div>
    </section>
    <!-- end section -->
@endsection

@section('script')
    <script>
        $(document).on('click', '.profile__avatar1', function(e) {
            $('#myfile').trigger('click');
        });

        $('#myfile').change(function(e) {
            e.preventDefault();
            let data1 = new FormData();
            let file = $('#myfile')[0].files[0];
            data1.append('profile_photo_path', file);

            $.ajax({
                url: "{{ route('front.profile.photo') }}",
                type: "POST",
                dataType: "json",
                data: data1,
                cache: false,
                contentType: false,
                processData: false,
                statusCode: {
                    200: function (xhr) {
                        var notyf = new Notyf();
                        notyf.success({
                            message: xhr.message,
                            duration: 5000,
                            position: {
                                x: "center",
                                y: "top",
                            },
                        });
                        $(".profile__avatar1").prop('src',xhr.data);
                    }
                }
            });
        });

        // const passwordInput = document.querySelector("#password");
        // const eye = document.querySelector("#eye");
        // eye.addEventListener("click", function() {
        //     this.classList.toggle("fa-eye-slash");
        //     this.classList.toggle("fa-eye");
        //     const type = passwordInput.getAttribute("type") === "password" ? "text" : "password"
        //     passwordInput.setAttribute("type", type)
        // });
        $(document).on('click','.eye', function(e){
            $(this).find('.fas').toggleClass('fa-eye-slash').toggleClass('fa-eye');
            $(this).closest('.password-container').find('input').attr('type', function(index, attr){
                return attr == 'text' ? 'password' : 'text';
            });
            // console.log(ss);
        });
    </script>
@endsection