@extends('frontend::layouts.master')

@section('title')
    {{ __('frontend.edit_profile') }}
@endsection

@section('content')
    <div class="page-title">
        <h4 class="m-0 text-center">{{ __('frontend.edit_profile') }}</h4>
    </div>
    <div class="section-spacing">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-md-4">
                    <ul class="nav nav-tabs flex-column gap-4">
                        <li class="nav-item">
                            <a class="nav-link active p-3 text-center" data-bs-toggle="pill" href="#editProfile">
                                <h6 class="m-0">{{ __('frontend.update_profile') }}</h6>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link p-3 text-center" data-bs-toggle="pill" href="#changePassword">
                                <h6 class="m-0">{{ __('frontend.profiles') }}</h6>
                            </a>
                        </li>

                        @php

                            $user = auth()->user();

                        @endphp

                        @if (empty($user) || empty($user->login))
                            <li class="nav-item">
                                <a class="nav-link p-3 text-center" data-bs-toggle="pill" href="#changeUserPassword">
                                    <h6 class="m-0">{{ __('frontend.change_password') }}</h6>
                                </a>
                            </li>
                        @endif

                    </ul>
                </div>
                <div class="col-lg-9 mt-lg-0 mt-5">
                    <div class="tab-content">
                        <div class="tab-pane active fade show" id="editProfile" role="tabpanel">
                            <div class="card user-login-card p-5">
                                <div class="edit-profile-content">
                                    <div class="edit-profile-details">
                                        <div class="bg-body rounded p-5">
                                            <h6 class="mb-3">{{ __('frontend.profiles_details') }}</h6>
                                            <div class="row">
                                                <div class="col-md-3 text-center">
                                                    <div class="select-profile-card position-relative d-inline-block">
                                                        <!-- Profile Image -->
                                                        <img id="profileImage"
                                                            src="{{ setBaseUrlWithFileName($user->file_url, 'image', 'users') ?? setDefaultImage() }}"
                                                            class="img-fluid rounded-circle object-cover"
                                                            alt="select-profile-image"
                                                            style="cursor: pointer; width: 150px; height: 150px;">

                                                        <!-- Hidden file input -->
                                                        <input type="file" id="profileImageInput" class="d-none"
                                                            accept="image/*" onchange="previewImage(event)">

                                                        <!-- Pencil icon -->
                                                        <i class="ph ph-pencil pencil-icon"
                                                            onclick="triggerFileInput()"></i>
                                                    </div>
                                                </div>
                                                <div class="col-md-9 mt-md-0 mt-4">
                                                    <form id="editProfileDetail">
                                                        @csrf
                                                        <div class="input-group mb-3">
                                                            <span class="input-style-text input-group-text"><i
                                                                    class="ph ph-user"></i></span>
                                                            <input type="text" name="first_name"
                                                                class="form-control input-style-box"
                                                                value="{{ $user->first_name }}"
                                                                placeholder="{{ __('frontend.enter_fname') }}">
                                                            <div class="invalid-feedback" id="first_name_error">First Name
                                                                field is required</div>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text input-style-text"><i
                                                                    class="ph ph-user"></i></span>
                                                            <input type="text" name="last_name"
                                                                class="form-control input-style-box"
                                                                value="{{ $user->last_name }}"
                                                                placeholder="{{ __('frontend.enter_lname') }}">
                                                            <div class="invalid-feedback" id="last_name_error">Last Name
                                                                field is required</div>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text input-style-text"><i
                                                                    class="ph ph-envelope"></i></span>
                                                            <input type="email" name="email"
                                                                class="form-control input-style-box"
                                                                value="{{ $user->email }}"
                                                                @if ($user->login == 'google') readonly @endif>
                                                            <div class="invalid-feedback" id="email_error">Email is required
                                                            </div>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text input-style-text"><i
                                                                    class="ph ph-phone"></i></span>
                                                            <input type="tel" class="form-control input-style-box"
                                                                value="{{ $user->mobile }}" id="mobileInput"
                                                                @if ($user->login == 'otp') readonly @endif>
                                                            <div class="invalid-feedback" id="mobile_error">Mobile number is
                                                                required</div>
                                                        </div>
                                                        <div class="input-group mb-3 flex-nowrap">
                                                            <span class="input-group-text input-style-text"><i
                                                                    class="ph ph-gender-neuter"></i></span>
                                                            <div
                                                                class="d-flex flex-wrap align-items-center input-style-box w-100 gap-2 px-2">
                                                                <label class="form-check form-check-inline cursor-pointer">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="gender" id="male" value="male"
                                                                        {{ old('gender', isset($user) ? $user->gender : 'male') == 'male' ? 'checked' : '' }}>
                                                                    <span
                                                                        class="form-check-label">{{ __('messages.lbl_male') }}</span>
                                                                </label>
                                                                <label class="form-check form-check-inline cursor-pointer">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="gender" id="female" value="female"
                                                                        {{ old('gender', isset($user) ? $user->gender : 'male') == 'female' ? 'checked' : '' }}>
                                                                    <span
                                                                        class="form-check-label">{{ __('messages.lbl_female') }}</span>
                                                                </label>
                                                                <label class="form-check form-check-inline cursor-pointer">
                                                                    <input class="form-check-input" type="radio"
                                                                        name="gender" id="other" value="other"
                                                                        {{ old('gender', isset($user) ? $user->gender : 'male') == 'other' ? 'checked' : '' }}>
                                                                    <span
                                                                        class="form-check-label">{{ __('messages.lbl_other') }}</span>
                                                                </label>
                                                            </div>
                                                        </div>
                                                        <div class="input-group mb-3">
                                                            <span class="input-group-text input-style-text"><i
                                                                    class="ph ph-calendar"></i></span>
                                                            <input type="date" name="date_of_birth"
                                                                class="form-control input-style-box"
                                                                value="{{ old('date_of_birth', isset($user) && $user->date_of_birth ? date('Y-m-d', strtotime($user->date_of_birth)) : '') }}"
                                                                max="{{ date('Y-m-d') }}"
                                                                placeholder="{{ __('placeholder.lbl_user_date_of_birth') }}"
                                                                required>
                                                            <div class="invalid-feedback" id="date_of_birth_error">Date of
                                                                Birth field is required</div>
                                                        </div>
                                                        <div class="text-end">
                                                            <button type="button" id="updateProfileBtn"
                                                                class="btn btn-primary mt-5">{{ __('frontend.update') }}</button>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div class="modal fade" id="SuccessfullyUpdateProfileModal"
                                                    tabindex="-1" aria-labelledby="SuccessfullyUpdateProfileModalLabel"
                                                    aria-hidden="true">
                                                    <div class="modal-dialog">
                                                        <div class="modal-content">
                                                            <div class="modal-body text-center">
                                                                <span style="color: white; font-size: 18px;">
                                                                    {{ __('frontend.profile_updated') }}
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="changePassword" role="tabpanel">
                            <div class="card user-login-card p-5">
                                <div class="edit-profile-content">
                                    <h6>{{ __('frontend.profiles') }}</h6>
                                    <div class="row row-cols-xl-4 row-cols-md-3 row-cols-sm-2 row-cols-1 gy-5"
                                        id="profileList">
                                        @foreach ($userProfile->toArray(request()) as $profile)