@extends('layouts.app')
@section('title', 'My Profile')

@section('content')
<div class="max-w-2xl space-y-6" x-data="tabs('{{ $user->usesPinOnly() ? 'pin' : 'details' }}')">
    <div>
        <h1 class="text-xl font-bold">My Profile</h1>
        <p class="text-sm text-ink-muted">{{ $user->role->name ?? 'No role assigned' }} &middot; {{ $user->employee_code ?? 'No employee code' }}</p>
    </div>

    <div class="card">
        <div class="flex border-b border-border px-2">
            <button class="tab-btn" :class="is('details') && 'active'" x-on:click="set('details')">Details</button>
            <button class="tab-btn" :class="is('pin') && 'active'" x-on:click="set('pin')">{{ $user->hasPin() ? 'Change PIN' : 'Set a PIN' }}</button>
            @unless ($user->usesPinOnly())
                <button class="tab-btn" :class="is('password') && 'active'" x-on:click="set('password')">Password</button>
            @endunless
        </div>

        <div x-show="is('details')" x-cloak class="p-5">
            <form method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="space-y-4">
                @csrf @method('PUT')
                <div class="flex items-center gap-4">
                    <div class="w-16 h-16 rounded-full bg-primary-50 text-primary-700 flex items-center justify-center text-xl font-bold shrink-0 overflow-hidden">
                        @if ($user->avatar_path)
                            <img src="{{ asset('storage/' . $user->avatar_path) }}" class="w-full h-full object-cover" alt="{{ $user->name }}">
                        @else
                            {{ strtoupper(substr($user->name, 0, 2)) }}
                        @endif
                    </div>
                    <div>
                        <label class="field-label">Profile photo</label>
                        <input type="file" name="avatar" accept="image/*" class="input !py-1.5 text-xs">
                        @if ($user->avatar_path)
                            <label class="flex items-center gap-1.5 text-xs text-ink-muted mt-1.5"><input type="checkbox" name="remove_avatar" value="1"> Remove my photo</label>
                        @endif
                        @error('avatar')<p class="text-xs text-danger mt-1">{{ $message }}</p>@enderror
                    </div>
                </div>
                <div><label class="field-label">Name</label><input type="text" name="name" value="{{ old('name', $user->name) }}" class="input" required></div>
                @unless ($user->usesPinOnly())
                    <div><label class="field-label">Email</label><input type="email" name="email" value="{{ old('email', $user->email) }}" class="input" required></div>
                @endunless
                <div><label class="field-label">Phone</label><input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="input"></div>
                <div class="flex justify-end pt-2 border-t border-border">
                    <button type="submit" class="btn-primary">Save changes</button>
                </div>
            </form>
        </div>

        <div x-show="is('pin')" x-cloak class="p-5">
            <form method="POST" action="{{ route('profile.pin') }}" class="space-y-4" autocomplete="off">
                @csrf @method('PUT')
                <p class="text-sm text-ink-muted">Your PIN is 4 or 5 digits and is how you sign in on the till. Change it whenever you like — pick one nobody can guess and do not share it.</p>
                @if ($user->hasPin())
                    <div><label class="field-label">Current PIN</label><input type="password" inputmode="numeric" pattern="[0-9]*" maxlength="5" name="current_pin" class="input tracking-[0.4em]" required></div>
                @else
                    <div><label class="field-label">Your password (to confirm it is you)</label><input type="password" name="current_password" class="input" required></div>
                @endif
                <div class="grid grid-cols-2 gap-3">
                    <div><label class="field-label">New PIN</label><input type="password" inputmode="numeric" pattern="[0-9]{4,5}" maxlength="5" minlength="4" name="pin" class="input tracking-[0.4em]" required></div>
                    <div><label class="field-label">Repeat new PIN</label><input type="password" inputmode="numeric" pattern="[0-9]{4,5}" maxlength="5" minlength="4" name="pin_confirmation" class="input tracking-[0.4em]" required></div>
                </div>
                <div class="flex justify-end pt-2 border-t border-border">
                    <button type="submit" class="btn-primary">{{ $user->hasPin() ? 'Change PIN' : 'Save PIN' }}</button>
                </div>
            </form>
        </div>

        @unless ($user->usesPinOnly())
        <div x-show="is('password')" x-cloak class="p-5">
            <form method="POST" action="{{ route('profile.password') }}" class="space-y-4">
                @csrf @method('PUT')
                <div><label class="field-label">Current password</label><input type="password" name="current_password" class="input" required></div>
                <div><label class="field-label">New password</label><input type="password" name="password" class="input" required minlength="8"></div>
                <div><label class="field-label">Confirm new password</label><input type="password" name="password_confirmation" class="input" required minlength="8"></div>
                <div class="flex justify-end pt-2 border-t border-border">
                    <button type="submit" class="btn-primary">Change password</button>
                </div>
            </form>
        </div>
        @endunless
    </div>
</div>
@endsection