@extends('backend.app')

@section('title', 'My Profile')

@push('style')
    <style>
        .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .profile-avatar {
            width: 130px;
            height: 130px;
            border-radius: 50%;
            overflow: hidden;
            border: 3px solid #f1f1f1;
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .nav-tabs {
            border-bottom: 1px solid #eee;
        }

        .nav-tabs .nav-link {
            font-weight: 500;
        }

        .text-muted-xs {
            font-size: 12px;
            color: #888;
        }

        .text-main {
            color: #DA8661;
        }

        .btn-main {
            color: #DA8661;
            border: 1px solid #DA8661;
            background: transparent;
        }

        .btn-main:hover {
            background: #DA8661;
            color: #fff;
            border-color: #DA8661;
        }

        .btn-main:focus,
        .btn-main:active {
            background: #DA8661 !important;
            color: #fff !important;
            border-color: #DA8661 !important;
            box-shadow: 0 0 0 0.2rem rgba(218, 134, 97, 0.25);
        }
    </style>
@endpush

@section('content')
    <div class="app-content content">
        <div class="container-fluid">

            {{-- Profile Header --}}
            <div class="card mb-4">
                <div class="card-body">
                    <div class="profile-header">
                        <div class="profile-avatar">
                            <img src="{{ asset(Auth::user()->avatar) }}" alt="Profile Picture">
                        </div>

                        <div>
                            <h4 class="mb-1">{{ Auth::user()->name }}</h4>
                            <p class="mb-2 text-muted">{{ Auth::user()->email }}</p>

                            <button class="btn btn-sm btn-main" id="uploadImageBtn">
                                <i class="fa fa-camera me-1"></i> Change Photo
                            </button>
                            <input type="file" id="profile_picture_input" hidden>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Tabs --}}
            <div class="card">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="nav-link {{ session('type') !== 'password' ? 'active' : '' }} text-main" data-bs-toggle="tab"
                                href="#editProfile">
                                Profile Info
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link {{ session('type') === 'password' ? 'active' : '' }} text-main" data-bs-toggle="tab"
                                href="#updatePassword">
                                Security
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="card-body tab-content">

                    {{-- Profile Info --}}
                    <div class="tab-pane fade {{ session('type') !== 'password' ? 'show active' : '' }}" id="editProfile">
                        <form method="POST" action="{{ route('profile.update') }}">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Username</label>
                                <input type="text" name="username" class="form-control"
                                    value="{{ Auth::user()->username }}">
                                <small id="usernameexists" class="text-danger d-none">
                                    Username already exists
                                </small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Full Name</label>
                                <input type="text" name="name" class="form-control" value="{{ Auth::user()->name }}">
                            </div>

                            {{-- Email (Read Only) --}}
                            <div class="mb-3">
                                <label class="form-label">Email Address</label>
                                <input type="email" class="form-control" value="{{ Auth::user()->email }}" readonly>
                                <small class="text-muted-xs">
                                    Email change requires verification. Contact super admin or use email <a
                                        href="{{ route('profile.email.change') }}">change request</a>.
                                </small>
                            </div>

                            <button class="btn btn-main">
                                Save Changes
                            </button>
                        </form>
                    </div>

                    {{-- Password --}}
                    <div class="tab-pane fade {{ session('type') === 'password' ? 'show active' : '' }}"
                        id="updatePassword">
                        <form method="POST" action="{{ route('profile.update.password') }}">
                            @csrf

                            <div class="mb-3">
                                <label class="form-label">Current Password</label>
                                <input type="password" name="old_password" class="form-control">
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">New Password</label>
                                    <input type="password" name="password" class="form-control">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Confirm Password</label>
                                    <input type="password" name="password_confirmation" class="form-control">
                                </div>
                            </div>

                            <button class="btn btn-main">
                                Update Password
                            </button>
                        </form>
                    </div>

                </div>
            </div>

        </div>
    </div>
@endsection

@push('script')
    <script>
        // Profile Picture Upload
        document.getElementById('uploadImageBtn').addEventListener('click', function() {
            document.getElementById('profile_picture_input').click();
        });

        document.getElementById('profile_picture_input').addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const formData = new FormData();
                formData.append('profile_picture', file);
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route('profile.update.profile.picture') }}', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            location.reload();
                        } else {
                            alert(data.message || 'Failed to upload image');
                        }
                    })
                    .catch(() => alert('An error occurred while uploading the image'));
            }
        });
    </script>
@endpush