@extends('admin.layouts.app')

@section('title', 'User Profile | Shortties')

@section('main')
<style>
    .profile .profile-card img {
    max-width: 150px;
}
</style>
    <main id="main" class="main">
        <div class="pagetitle">
            <h1>Profile</h1>
            <nav>
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('view-dashboard') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
                    <li class="breadcrumb-item active">Profile</li>
                </ol>
            </nav>
        </div><!-- End Page Title -->

        <section class="section profile">
            <div class="row">
                <div class="col-xl-4">
                    <div class="card">
                        <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                            <img src="{{ $user->profile_img ? asset('assets/' . $user->profile_img) : asset('assets/front/dummy.jpg') }}"
                                alt="Profile" class="rounded-circle" width="150" height="150">
                            <h2>{{ $user->name }}</h2>
                            <h3>{{ $user->role->name ?? 'N/A' }}</h3>
                        </div>
                    </div>
                </div>

                <div class="col-xl-8">
                    <div class="card">
                        <div class="card-body pt-3">
                            <!-- Bordered Tabs -->
                            <ul class="nav nav-tabs nav-tabs-bordered">
                                <li class="nav-item">
                                    <button class="nav-link active" data-bs-toggle="tab"
                                        data-bs-target="#profile-overview">Overview</button>
                                </li>
                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit
                                        Profile</button>
                                </li>
                                <li class="nav-item">
                                    <button class="nav-link" data-bs-toggle="tab"
                                        data-bs-target="#profile-change-password">Change Password</button>
                                </li>
                            </ul>

                            <div class="tab-content pt-2">
                                <!-- Profile Overview -->
                                <div class="tab-pane fade show active profile-overview" id="profile-overview">
                                    <h5 class="card-title">Profile Details</h5>
                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Full Name</div>
                                        <div class="col-lg-9 col-md-8">{{ $user->name }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Email</div>
                                        <div class="col-lg-9 col-md-8">{{ $user->email }}</div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Phone Number</div>
                                        <div class="col-lg-9 col-md-8">{{ $user->phone }}
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Privacy</div>
                                        <div class="col-lg-9 col-md-8">{{ $user->privacy ?? 'N/A' }}</div>
                                    </div>
                                    
                                    
                                    <div class="row">
                                        <div class="col-lg-3 col-md-4 label">Bio</div>
                                        <div class="col-lg-9 col-md-8">{{ $user->bio }}</div>
                                    </div>
                                    
                                    
                                </div>

                                <!-- Edit Profile -->
                                <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                                    <form method="POST" action="{{ route('users.update', $user->id) }}"
                                        enctype="multipart/form-data">
                                        @csrf
                                        @method('PUT')

                                        <!-- Profile Image -->
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Profile Image</label>
                                            <div class="col-md-8 col-lg-9">
                                                <img src="{{ $user->profile_img ? asset('asstes/' . $user->profile_img) : asset('assets/front/dummy.jpg') }}"
                                                    alt="Profile">
                                                <div class="pt-2">
                                                    <input type="file" name="profile_img" class="form-control">
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Full Name</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="name" type="text" class="form-control"
                                                    value="{{ $user->name }}">
                                            </div>
                                        </div>
                                        
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Email</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="email" type="email" class="form-control"
                                                    value="{{ $user->email }}">
                                            </div>
                                        </div>
                                        
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Phone Number</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="phone" type="text" class="form-control"
                                                    value="{{ $user->phone }}">
                                            </div>
                                        </div>
                                        
                                        <div class="row mb-3">
                                            <div class="col-lg-3 col-md-4 col-form-label">Privacy</div>
                                            <div class="col-lg-9 col-md-8">
                                                <select class="form-select" name="privacy" id="privacy">
                                                    <option value="0" {{ auth()->user()->privacy == 'public' ? 'selected' : '' }}>Public</option>
                                                    <option value="1" {{ auth()->user()->privacy == 'private' ? 'selected' : '' }}>Private</option>
                                                </select>
                                            </div>
                                        </div>
                                        
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Bio</label>
                                            <div class="col-md-8 col-lg-9">
                                                <textarea name="bio" class="form-control">{{ $user->bio }}</textarea>
                                            </div>
                                        </div>
                                        

                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary">Save Changes</button>
                                        </div>
                                    </form>
                                </div>


                                <!-- Change Password -->
                                <div class="tab-pane fade pt-3" id="profile-change-password">
                                    <form method="POST" action="{{ route('users.change-password', $user->id) }}">
                                        @csrf
                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Current Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="current_password" type="password" class="form-control">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">New Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="new_password" type="password" class="form-control">
                                            </div>
                                        </div>

                                        <div class="row mb-3">
                                            <label class="col-md-4 col-lg-3 col-form-label">Confirm New Password</label>
                                            <div class="col-md-8 col-lg-9">
                                                <input name="confirm_password" type="password" class="form-control">
                                            </div>
                                        </div>

                                        <div class="text-center">
                                            <button type="submit" class="btn btn-primary">Change Password</button>
                                        </div>
                                    </form>
                                </div>

                            </div><!-- End Tabs -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$(document).ready(function() {
    // Fetch states when a country is selected
    $('#country').change(function() {
        var countryCode = $(this).find(':selected').data('country-code');  // Get the selected country code (isoCode)
        if (countryCode) {
            var statesUrl = "{{ url('states/') }}/" + countryCode;

            $.ajax({
                url: statesUrl,
                type: 'GET',
                success: function(states) {
                    $('#state').html('<option value="">Select State</option>'); // Reset state dropdown
                    $('#state').prop('disabled', false); // Enable state dropdown
                    $.each(states, function(key, state) {
                        // Append states to the dropdown
                        $('#state').append('<option value="' + state['name'] + '" data-state-code="' + state['isoCode'] + '">' + state['name'] + '</option>');
                    });
                }
            });
        } else {
            $('#state').prop('disabled', true); // Disable state dropdown
            $('#city').prop('disabled', true); // Disable city dropdown
        }
    });

    // Fetch cities when a state is selected
    $('#state').change(function() {
        var stateCode = $(this).find(':selected').data('state-code');  // Get the selected state code
        var countryCode = $('#country').find(':selected').data('country-code');  // Get the selected country code
        if (stateCode && countryCode) {
            var citiesUrl = "{{ url('cities/') }}/" + countryCode + "/" + stateCode;

            $.ajax({
                url: citiesUrl,
                type: 'GET',
                success: function(cities) {
                    $('#city').html('<option value="">Select City</option>'); // Reset city dropdown
                    $('#city').prop('disabled', false); // Enable city dropdown
                    $.each(cities, function(key, city) {
                        // Append cities to the dropdown
                        $('#city').append('<option value="' + city['name'] + '">' + city['name'] + '</option>');
                    });
                }
            });
        } else {
            $('#city').prop('disabled', true); // Disable city dropdown
        }
    });
});
</script>

@endpush