@extends('user.layouts.app-newui')

@section('content')
<div class="main-card">
    <h1 class="text-center mb-5 page_title">My Profile</h1> 

    <div class="popup-body1 p-4 mb-5">
 
        <ul class="nav nav-tabs mb-4" role="tablist">

            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tb-details">
                    Details
                </button>
            </li>
            
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tb-password">
                    Password
                </button>
            </li>  
        </ul>
   
        <div class="tab-content text-start">

            <!-- DETAILS TAB -->
            <div class="tab-pane fade show active" id="tb-details">

                <form>

                    <div class="row g-4 align-items-start">

                        <!-- Profile Upload -->
                        <div class="col-md-4">
                            <div class="profile-upload-wrapper">
                                <label for="profile_picture" class="profile-upload-box">
                                    <img
                                        src="{{ asset('assets/images/noavatar.png') }}"
                                        id="profilePreview"
                                        class="profile-preview-img"
                                        alt="Profile Picture">

                                    <span class="change-photo-btn"><i class="fas fa-camera"></i> Change Photo</span>
                                </label>

                                <input
                                    type="file"
                                    id="profile_picture"
                                    name="profile_picture"
                                    class="d-none"
                                    accept=".jpg,.jpeg,.png">
                            </div> 
                        </div>

                        <!-- Instructions -->
                        <div class="col-md-8">

                            <div class="upload-instruction">

                                <h6 class="mb-3 fw-bold">
                                    <i class="fa fa-info-circle text-info"></i>
                                    Instructions
                                </h6>

                                <ul class="mb-0 ps-3">
                                    <li>
                                        Upload a professional and friendly photo where your face is clearly visible.
                                    </li>

                                    <li>
                                        Supported formats: JPG, JPEG, PNG
                                    </li>

                                    <li>
                                        Maximum image size: 2MB
                                    </li>
                                </ul>

                            </div>

                        </div>

                    </div>

                    <hr class="my-5">

                    <!-- First & Last Name -->
                    <div class="row g-4">

                        <div class="col-md-6">
                            <label class="form-label">
                                First Name <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="first_name"
                                   class="form-control"
                                   value="{{ @$user->first_name }}"
                                   placeholder="First Name"
                                   required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">
                                Last Name <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="last_name"
                                   class="form-control"
                                   value="{{ @$user->last_name }}"
                                   placeholder="Last Name"
                                   required>
                        </div>

                    </div>

                    <!-- Phone & Email -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Phone Number <span class="text-danger">*</span>
                            </label>

                            <div class="row g-2">

                                <div class="col-4">
                                    <select name="primary_phone_country_code"
                                            class="form-select"
                                            required>
                                        <option value="">Code</option>
                                    </select>
                                </div>

                                <div class="col-8">
                                    <input type="text"
                                           name="phone_no"
                                           class="form-control"
                                           value="{{ @$resume_data->primary_phone }}"
                                           placeholder="Phone Number"
                                           required>
                                </div>

                            </div>

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Email Address <span class="text-danger">*</span>
                            </label>

                            <input type="email"
                                   name="email"
                                   class="form-control"
                                   value="{{ @$user->email ?? @$resume_data->email }}"
                                   {{ !empty($user->email) ? 'readonly' : '' }}
                                   placeholder="Email Address"
                                   required>

                        </div>

                    </div>

                    <!-- Secondary Email & Timezone -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Secondary Email Address
                            </label>

                            <input type="email"
                                   name="secondary_email"
                                   class="form-control"
                                   placeholder="Secondary Email Address">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                Timezone <span class="text-danger">*</span>
                            </label>

                            <select name="timezone"
                                    class="form-select"
                                    required>

                                <option value="">-- Select Timezone --</option>

                                @foreach($timezones as $zone)
                                    <option value="{{ $zone->zone_id }}">
                                        {{ $zone->zone_label }}
                                    </option>
                                @endforeach

                            </select>

                        </div>

                    </div>

                    <!-- Street & City -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Street <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="street"
                                   class="form-control"
                                   placeholder="Street">

                        </div>

                        <div class="col-md-6">

                            <label class="form-label">
                                City <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="city"
                                   class="form-control"
                                   placeholder="City">

                        </div>

                    </div>

                    <!-- Zip -->
                    <div class="row g-4 mt-1">

                        <div class="col-md-6">

                            <label class="form-label">
                                Zip Code <span class="text-danger">*</span>
                            </label>

                            <input type="text"
                                   name="zip_code"
                                   class="form-control"
                                   placeholder="Zip Code">

                        </div>

                    </div>

                    <!-- Button -->
                    <div class="row mt-4">

                        <div class="col-md-12">
                            <button class="btn btn-info px-4">
                                Save Details
                            </button>
                        </div>

                    </div>

                </form>

            </div>

            <!-- PASSWORD TAB -->
            <div class="tab-pane fade" id="tb-password">

                <form>

                    <div class="row g-4 align-items-start">

                        <!-- Password Fields -->
                        <div class="col-md-6">

                            <div class="row g-4">

                                <div class="col-md-12">

                                    <label class="form-label">
                                        Current Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password"
                                           class="form-control"
                                           placeholder="Current Password">

                                </div>

                                <div class="col-md-12">

                                    <label class="form-label">
                                        New Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password"
                                           class="form-control"
                                           placeholder="New Password">

                                </div>

                                <div class="col-md-12">

                                    <label class="form-label">
                                        Confirm New Password
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="password"
                                           class="form-control"
                                           placeholder="Confirm New Password">
                                     
                                </div>

                                <div class="col-md-12">

                                    <button class="btn btn-info px-4">
                                        Change Password
                                    </button>

                                </div>

                            </div>

                        </div>

                        <!-- Instructions -->
                        <div class="col-md-6">

                            <div class="upload-instruction">

                                <h6 class="mb-3 fw-bold">
                                    <i class="fa fa-info-circle text-info"></i>
                                    Password Hint
                                </h6>
                                <p>Please remember to choose a secure password. It should have:</p>
                                <ul class="mb-0 ps-3">
                                    <li>No white space</li>
                                    <li>Min length 6 characters</li>
                                    <li>One digit</li>
                                </ul>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>
    </div>
</div>

@endsection