@extends('layouts.admin')
@section('title', isset($staff) ? 'Edit Staff' : 'Add Staff')
@section('page-title', isset($staff) ? 'Edit Staff' : 'Add Staff')
@section('content')
<div class="page-header">
    <h1>{{ isset($staff) ? 'Edit Staff Member' : 'Add Staff Member' }}</h1>
    <a href="{{ route('admin.staff.index') }}" class="btn btn-outline btn-sm">← Back</a>
</div>
<div class="card" style="max-width:640px;">
    <div class="card-body">
        <form method="POST" enctype="multipart/form-data"
              action="{{ isset($staff) ? route('admin.staff.update',$staff) : route('admin.staff.store') }}">
            @csrf @if(isset($staff)) @method('PUT') @endif
            @if($errors->any())<div class="alert alert-error">{{ $errors->first() }}</div>@endif

            {{-- Avatar Upload --}}
            <div class="form-group" style="display:flex;align-items:flex-start;gap:1.25rem;margin-bottom:1.25rem;">
                <div>
                    <div id="avatar-placeholder" style="width:80px;height:80px;border-radius:50%;background:#f0e8e0;display:{{ empty($staff->avatar_url) ? 'flex' : 'none' }};align-items:center;justify-content:center;font-size:2rem;border:2px solid #E8D5C4;">👤</div>
                    <img id="avatar-preview"
                         src="{{ $staff->avatar_url ?? '' }}"
                         alt="Avatar"
                         style="width:80px;height:80px;object-fit:cover;border-radius:50%;border:2px solid #E8D5C4;{{ empty($staff->avatar_url) ? 'display:none;' : '' }}"
                         onerror="this.style.display='none';document.getElementById('avatar-placeholder').style.display='flex';">
                </div>
                <div style="flex:1;">
                    <label style="font-weight:600;font-size:.88rem;color:#7A6058;display:block;margin-bottom:.35rem;">Profile Photo</label>
                    <input type="file" name="avatar" id="avatar-input" accept="image/*"
                           style="font-size:.88rem;" onchange="previewAvatar(this)">
                    <div style="font-size:.74rem;color:#7A6058;margin-top:.3rem;">JPG, PNG, WebP — max 4 MB</div>
                    @if(!empty($staff->avatar_url))
                    <div style="font-size:.74rem;color:#7A6058;">Upload a new photo to replace the current one.</div>
                    @endif
                </div>
            </div>

            <div class="grid-2" style="gap:1.25rem;">
                <div class="form-group"><label>Full Name <span style="color:#dc2626">*</span></label><input type="text" name="name" required value="{{ old('name',$staff->name??'') }}"></div>
                <div class="form-group"><label>Email <span style="color:#dc2626">*</span></label><input type="email" name="email" required value="{{ old('email',$staff->email??'') }}"></div>
                <div class="form-group"><label>Phone</label><input type="tel" name="phone" value="{{ old('phone',$staff->phone??'') }}"></div>
                <div class="form-group"><label>Role/Title</label><input type="text" name="role" value="{{ old('role',$staff->role??'') }}" placeholder="e.g. Senior Stylist"></div>
                <div class="form-group"><label>Working Hours</label><input type="text" name="working_hours" value="{{ old('working_hours',$staff->working_hours??'') }}" placeholder="Mon-Sat: 8am-6pm"></div>
            </div>
            <div class="form-group"><label>Specialties (comma-separated)</label><input type="text" name="specialties" value="{{ old('specialties', isset($staff->specialties) ? implode(', ',$staff->specialties) : '') }}" placeholder="Braiding, Weaves, Colour"></div>
            <div class="form-group"><label>Bio</label><textarea name="bio" rows="3">{{ old('bio',$staff->bio??'') }}</textarea></div>
            <label style="display:flex;gap:.5rem;align-items:center;font-size:.9rem;cursor:pointer;margin-bottom:1.25rem;"><input type="checkbox" name="is_active" value="1" {{ old('is_active',($staff->is_active??true)) ? 'checked':'' }}> Active</label>
            <button type="submit" class="btn btn-primary">{{ isset($staff) ? 'Update Staff' : 'Add Staff Member' }}</button>
        </form>
    </div>
</div>
@push('scripts')
<script>
function previewAvatar(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        reader.onload = e => {
            const preview = document.getElementById('avatar-preview');
            const placeholder = document.getElementById('avatar-placeholder');
            preview.src = e.target.result;
            preview.style.display = 'block';
            if (placeholder) placeholder.style.display = 'none';
        };
        reader.readAsDataURL(input.files[0]);
    }
}
</script>
@endpush
@endsection