@extends('layouts.website.app')

@php
    $user = Auth::user();
    $avatar = avatarUser();
@endphp

@section('title', 'Cài đặt tài khoản')

@section('content')
<section class="min-h-screen bg-emerald-50 py-10">
    <div class="container mx-auto px-4 sm:px-6 flex flex-col items-center">
        <nav class="text-sm text-gray-500 mb-6 w-full max-w-6xl" aria-label="Breadcrumb">
            <ol class="flex space-x-2">
                <li>
                    <a href="{{ route('home') }}" class="hover:text-emerald-600 font-medium">Trang chủ</a>
                    <span>/</span>
                </li>
                <li class="text-gray-700 font-semibold" aria-current="page">Thông tin cá nhân</li>
            </ol>
        </nav>

        <div class="w-full max-w-6xl bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row">
            <nav class="flex md:flex-col bg-white border-b md:border-b-0 md:border-r p-4 md:w-72 space-x-2 md:space-x-0 md:space-y-3">
                <button class="tab-btn w-full text-left px-4 py-3 rounded-full font-semibold {{ $active_tab === 'info' ? 'bg-emerald-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}" data-tab="info">
                    Thông tin cá nhân
                </button>
                <button class="tab-btn w-full text-left px-4 py-3 rounded-full font-semibold {{ $active_tab === 'settings' ? 'bg-emerald-600 text-white' : 'text-gray-600 hover:bg-gray-100' }}" data-tab="settings">
                    Cài đặt mật khẩu
                </button>
            </nav>

            <!-- Main content -->
            <div class="flex-1 p-6 md:p-10">
                <!-- Tab: Hồ sơ cá nhân -->
                <section id="tab-info" class="tab-content {{ $active_tab === 'info' ? '' : 'hidden' }}">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">Hồ sơ cá nhân</h2>

                    @if (session('success'))
                        <div class="mb-4 rounded-lg bg-green-50 border border-green-300 text-green-700 px-4 py-3">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="mb-4 rounded-lg bg-red-50 border border-red-300 text-red-700 px-4 py-3">
                            <ul class="list-disc pl-5 mt-1 space-y-1">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('settings.update-profile') }}" method="POST" class="space-y-6 max-w-3xl" enctype="multipart/form-data">
                        @csrf
                        <div class="flex items-center mb-6">
                            <div class="relative w-24 h-24">
                                <img id="avatarPreview" src="{{ $avatar['path'] }}" alt="{{ $avatar['name'] }}" class="w-24 h-24 rounded-full object-cover border">
                                <label for="avatarInput" class="absolute bottom-0 right-0 bg-emerald-600 text-white rounded-full p-2 cursor-pointer shadow hover:bg-emerald-700 transition">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                                    </svg>
                                </label>
                                <input id="avatarInput" type="file" name="avatar" accept="image/*" class="hidden" />
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Họ và tên</label>
                                <input type="text" name="name" value="{{ $user->name }}" required
                                    class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Số điện thoại</label>
                                <input type="text" value="{{ $user->phone }}" disabled
                                    class="w-full rounded-full border border-gray-300 bg-gray-100 px-4 py-3 cursor-not-allowed">
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Ngày sinh</label>
                                <input type="date" name="dob" value="{{ $user->date_of_birth ? \Carbon\Carbon::parse($user->date_of_birth)->format('Y-m-d') : '' }}"
                                    class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">Giới tính</label>
                                <select name="gender" class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                                    <option value="">Chọn giới tính</option>
                                    <option value="0" {{ $user->gender == 0 ? 'selected' : '' }}>Nam</option>
                                    <option value="1" {{ $user->gender == 1 ? 'selected' : '' }}>Nữ</option>
                                    <option value="2" {{ $user->gender == 2 ? 'selected' : '' }}>Khác</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-2">Địa chỉ</label>
                                <input type="text" name="address" value="{{ $user->address }}"
                                    class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                            </div>
                        </div>

                        <div class="flex justify-end gap-3">
                            <button type="reset" class="px-6 py-3 rounded-full border border-gray-300 hover:bg-gray-100 transition">Hủy</button>
                            <button type="submit" class="px-6 py-3 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition shadow">Lưu thay đổi</button>
                        </div>
                    </form>
                </section>

                <!-- Tab: Cài đặt mật khẩu -->
                <section id="tab-settings" class="tab-content {{ $active_tab === 'settings' ? '' : 'hidden' }}">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-6">Cài đặt mật khẩu</h2>

                    <form action="{{ route('settings.change-password') }}" method="POST" class="space-y-6 max-w-3xl">
                        @csrf
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Mật khẩu hiện tại</label>
                            <input type="password" name="current_password" required
                                class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Mật khẩu mới</label>
                            <input type="password" name="new_password" required
                                class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Xác nhận mật khẩu mới</label>
                            <input type="password" name="new_password_confirmation" required
                                class="w-full rounded-full border border-gray-300 px-4 py-3 focus:ring-2 focus:ring-emerald-500 transition">
                        </div>

                        <div class="flex justify-end gap-3">
                            <button type="reset" class="px-5 py-3 bg-gray-200 rounded-full hover:bg-gray-300 transition">Hủy</button>
                            <button type="submit" class="px-5 py-3 bg-emerald-600 text-white rounded-full hover:bg-emerald-700 transition shadow">Cập nhật mật khẩu</button>
                        </div>
                    </form>
                </section>
            </div>
        </div>
    </div>
</section>

<script>
    const tabs = document.querySelectorAll('.tab-btn');
    const contents = document.querySelectorAll('.tab-content');

    tabs.forEach(tab => {
        tab.addEventListener('click', () => {
            tabs.forEach(t => t.classList.remove('bg-emerald-600','text-white'));
            tabs.forEach(t => t.classList.add('text-gray-600'));
            tab.classList.add('bg-emerald-600','text-white');
            tab.classList.remove('text-gray-600');

            contents.forEach(c => c.classList.add('hidden'));
            document.getElementById(`tab-${tab.dataset.tab}`).classList.remove('hidden');
        });
    });

    document.getElementById('avatarInput').addEventListener('change', function(e) {
        const file = e.target.files[0];
        if(file){
            const reader = new FileReader();
            reader.onload = function(event){
                document.getElementById('avatarPreview').src = event.target.result;
            }
            reader.readAsDataURL(file);
        }
    });
</script>
@endsection