@extends('digitalmenu::layouts.app')

@section('title', 'My Profile | Merchant Central')

@section('content')
<div class="max-w-xl mx-auto pb-24">

    <div class="mb-10">
        <span class="font-label text-primary uppercase text-sm tracking-widest font-semibold mb-2 block">Account</span>
        <h1 class="font-display text-4xl md:text-5xl font-extrabold text-on-surface tracking-tight leading-tight">My Profile</h1>
        <p class="font-body text-on-surface-variant mt-3 text-lg max-w-2xl">Update your personal information.</p>
    </div>

    <div class="bg-surface-container-lowest rounded-xl p-8 shadow-[0px_12px_32px_rgba(25,28,29,0.06)]">

        @if ($errors->any())
            <div class="mb-6 flex items-start gap-3 bg-error-container border border-error/20 text-error px-5 py-4 rounded-xl text-sm font-medium">
                <span class="material-symbols-outlined text-error text-xl mt-0.5">error</span>
                <ul class="list-disc list-inside space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        {{-- Avatar --}}
        <div class="flex items-center gap-5 mb-8 pb-8 border-b border-surface-container-high">
            <div class="relative group flex-shrink-0 cursor-pointer" id="avatar-wrapper" onclick="document.getElementById('picture-input').click()">
                <div class="h-16 w-16 rounded-full bg-primary flex items-center justify-center overflow-hidden" id="avatar-container">
                    @if ($staff->picture_url)
                        <img id="avatar-preview" src="{{ $staff->picture_url }}" alt="Profile" class="h-full w-full object-cover"/>
                    @else
                        <span class="material-symbols-outlined text-white text-3xl" style="font-variation-settings: 'FILL' 1;" id="avatar-icon">person</span>
                        <img id="avatar-preview" src="" alt="Profile" class="h-full w-full object-cover hidden"/>
                    @endif
                </div>
                <div class="absolute inset-0 rounded-full bg-black/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <span class="material-symbols-outlined text-white text-xl">photo_camera</span>
                </div>
            </div>
            <div>
                <p class="font-bold text-on-surface text-lg leading-tight">{{ $staff->name }}</p>
                <p class="text-on-surface-variant text-sm">{{ $staff->username }}</p>
                <button type="button" onclick="document.getElementById('picture-input').click()"
                        class="text-primary text-xs font-semibold mt-1 hover:underline">
                    Change photo
                </button>
            </div>
        </div>

        <form method="POST" action="{{ url('digital-menu/auth/profile') }}" class="space-y-6">
            {!! csrf_field() !!}
            <input type="file" id="picture-input" accept="image/*" class="hidden"/>
            <input type="hidden" id="picture-base64" name="picture_base64" value=""/>

            {{-- Full Name --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="name">Full Name</label>
                <input id="name" name="name" type="text" maxlength="100"
                       value="{{ old('name', $staff->name) }}"
                       class="w-full bg-surface-container-high border-none rounded-lg px-4 py-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all outline-none {{ $errors->has('name') ? 'ring-2 ring-error' : '' }}"/>
                @if ($errors->has('name'))
                    <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('name') }}</p>
                @endif
            </div>

            {{-- Email --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="email">Email</label>
                <input id="email" name="email" type="email"
                       value="{{ old('email', $staff->email) }}"
                       class="w-full bg-surface-container-high border-none rounded-lg px-4 py-4 text-on-surface placeholder:text-on-surface-variant/40 focus:ring-2 focus:ring-primary focus:bg-surface-container-lowest transition-all outline-none {{ $errors->has('email') ? 'ring-2 ring-error' : '' }}"/>
                @if ($errors->has('email'))
                    <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('email') }}</p>
                @endif
            </div>

            {{-- Phone --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="phone_number">Phone</label>
                @include('digitalmenu::partials.phone_country_selector', ['phoneValue' => old('phone', $staff->phone)])
                @if ($errors->has('phone'))
                    <p class="text-error text-xs ml-1 mt-1">{{ $errors->first('phone') }}</p>
                @endif
            </div>

            {{-- Username (read-only) --}}
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-on-surface-variant" for="username">
                    Username
                    <span class="ml-1 text-xs font-normal text-on-surface-variant/50">(cannot be changed)</span>
                </label>
                <input id="username" type="text" value="{{ $staff->username }}" disabled
                       class="w-full bg-surface-container-high/50 border-none rounded-lg px-4 py-4 text-on-surface-variant/60 cursor-not-allowed outline-none"/>
            </div>

            <div class="pt-2 flex items-center gap-4">
                <button type="submit"
                        class="flex-1 bg-primary text-white font-bold text-base py-4 rounded-full shadow-lg hover:bg-primary/90 hover:scale-[1.02] transition-all duration-300 active:scale-95 flex items-center justify-center gap-2">
                    <span class="material-symbols-outlined text-xl">save</span>
                    Save Changes
                </button>
                <a href="{{ route('digitalmenu.change-password') }}"
                   class="px-6 py-4 rounded-full border-2 border-surface-container-high text-on-surface-variant font-semibold text-sm hover:border-primary hover:text-primary transition-all duration-200 whitespace-nowrap">
                    Change Password
                </a>
            </div>
        </form>
    </div>

</div>
@endsection

@section('scripts')
<script>
    document.getElementById('picture-input').addEventListener('change', function (e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function (evt) {
            const base64 = evt.target.result;
            document.getElementById('picture-base64').value = base64;

            const preview = document.getElementById('avatar-preview');
            const icon    = document.getElementById('avatar-icon');
            preview.src = base64;
            preview.classList.remove('hidden');
            if (icon) icon.classList.add('hidden');
        };
        reader.readAsDataURL(file);
    });
</script>
@endsection