@extends('layouts.admin')
@section('title', $user->exists ? 'Edit Account' : 'Add New Doctor / Staff')
@section('page', 'staff')
@section('content')
@php $isDoctor = old('role', $user->role) === 'doctor'; @endphp
<div class="page-content">
    <div class="page-head">
        <div>
            <div class="breadcrumbs"><span><i class="bi bi-house-door me-1"></i> Dashboard</span><i class="bi bi-chevron-right"></i><span>Users</span><i class="bi bi-chevron-right"></i><span>{{ $user->exists ? 'Edit' : 'Add New' }}</span></div>
            <h1 class="page-title">{{ $user->exists ? 'Edit Account' : 'Add New Doctor / Staff' }}</h1>
            <p class="page-subtitle">Create a new user account and assign appropriate role and permissions.</p>
        </div>
        <div class="d-flex gap-2"><a class="btn-primary-teal" href="{{ route('admin.staff.index') }}"><i class="bi bi-person-lines-fill me-1"></i> View All Staff</a></div>
    </div>

    @if($errors->any())<div class="alert alert-danger">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>@endif

    <form method="POST" action="{{ $user->exists ? route('admin.staff.update',$user) : route('admin.staff.store') }}" enctype="multipart/form-data" id="userForm">
        @csrf @if($user->exists) @method('PUT') @endif
        <div class="user-management-layout">
            <section class="card-admin user-form-card">
                <div class="user-section-head">
                    <div class="user-section-title-wrap"><div class="user-section-icon"><i class="bi bi-person"></i></div><div><div class="user-section-title">Basic Information</div><div class="user-section-sub">Enter the personal and professional details.</div></div></div>
                    <div class="role-switch">
                        <button type="button" class="{{ $isDoctor ? 'active' : '' }}" data-user-role="doctor"><i class="bi bi-person-heart me-1"></i> Doctor</button>
                        <button type="button" class="{{ !$isDoctor && old('role',$user->role)!=='admin' ? 'active' : '' }}" data-user-role="staff"><i class="bi bi-people me-1"></i> Staff</button>
                        <button type="button" class="{{ old('role',$user->role)==='admin' ? 'active' : '' }}" data-user-role="admin"><i class="bi bi-shield me-1"></i> Admin</button>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6"><label class="user-label">Full Name <span class="text-danger">*</span></label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-person text-primary"></i></span><input name="name" value="{{ old('name',$user->name) }}" class="form-control user-input" required placeholder="Enter full name"></div></div>
                    <div class="col-md-6"><label class="user-label">Role <span class="text-danger">*</span></label><select name="role" id="userRole" class="form-select user-input" required>
                        <option value="doctor" @selected(old('role',$user->role)==='doctor')>Doctor</option>
                        <option value="staff" @selected(old('role',$user->role)==='staff')>Staff</option>
                        <option value="admin" @selected(old('role',$user->role)==='admin')>Admin</option>
                    </select></div>
                    <div class="col-md-6"><label class="user-label">Email Address <span class="text-danger">*</span></label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-envelope text-primary"></i></span><input name="email" type="email" value="{{ old('email',$user->email) }}" class="form-control user-input" required placeholder="Enter email address"></div></div>
                    <div class="col-md-6"><label class="user-label">Password @unless($user->exists)<span class="text-danger">*</span>@endunless</label><div class="password-wrap"><input name="password" type="password" class="form-control user-input" @unless($user->exists) required @endunless placeholder="{{ $user->exists ? 'Leave blank to keep' : 'Min 8, mixed case + number' }}"></div></div>
                    <div class="col-md-6"><label class="user-label">Phone Number</label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-telephone text-primary"></i></span><input name="phone" value="{{ old('phone',$user->phone) }}" class="form-control user-input" placeholder="Enter phone number"></div></div>
                    <div class="col-md-6"><label class="user-label">Confirm Password</label><div class="password-wrap"><input name="password_confirmation" type="password" class="form-control user-input" placeholder="Confirm password"></div></div>
                    <div class="col-md-6"><label class="user-label">Username</label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-at text-primary"></i></span><input name="username" value="{{ old('username',$user->username) }}" class="form-control user-input"></div></div>

                    {{-- Staff team --}}
                    <div class="col-md-6" data-role-field="staff"><label class="user-label">Team / Department</label><select name="team" class="form-select user-input">
                        <option value="">Select Team</option>
                        @foreach(config('clinic.staff_teams') as $k=>$label)<option value="{{ $k }}" @selected(old('team',$user->team)===$k)>{{ $label }}</option>@endforeach
                    </select></div>

                    {{-- Doctor-only fields --}}
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Clinical Department <span class="text-danger">*</span></label><select name="clinical_department_id" class="form-select user-input">
                        <option value="">Select Department</option>
                        @foreach($departments as $d)<option value="{{ $d->id }}" @selected(old('clinical_department_id',$user->doctorProfile?->clinical_department_id)==$d->id)>{{ $d->name }}</option>@endforeach
                    </select></div>
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Specialization</label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-star text-primary"></i></span><input name="specialization" value="{{ old('specialization',$user->doctorProfile?->specialization) }}" class="form-control user-input" placeholder="e.g. Dermatologist"></div></div>
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Consultation Fee ({{ config('clinic.currency.symbol') }})</label><div class="input-group"><span class="input-group-text bg-white">{{ config('clinic.currency.symbol') }}</span><input name="consultation_fee" type="number" min="0" step="0.01" value="{{ old('consultation_fee',$user->doctorProfile?->consultation_fee) }}" class="form-control user-input"></div></div>
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Experience (Years)</label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-calendar3 text-primary"></i></span><input name="experience_years" type="number" min="0" value="{{ old('experience_years',$user->doctorProfile?->experience_years) }}" class="form-control user-input"></div></div>
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Registration No.</label><div class="input-group"><span class="input-group-text bg-white"><i class="bi bi-hash text-primary"></i></span><input name="registration_no" value="{{ old('registration_no',$user->doctorProfile?->registration_no) }}" class="form-control user-input"></div></div>
                    <div class="col-md-6" data-role-field="doctor"><label class="user-label">Signature Image <small class="text-secondary">(auto-attaches to prescriptions)</small></label><input name="signature" type="file" accept="image/png,image/jpeg" class="form-control user-input">@if($user->doctorProfile?->signature_path)<small class="text-success">A signature is on file.</small>@endif</div>
                    <div class="col-12" data-role-field="doctor"><label class="user-label">Bio / About</label><textarea name="bio" class="form-control user-input user-textarea" placeholder="Brief description...">{{ old('bio',$user->doctorProfile?->bio) }}</textarea></div>
                    <div class="col-md-6"><label class="user-label">Profile Picture</label><input name="profile_photo" type="file" accept="image/jpeg,image/png,image/webp" class="form-control user-input"></div>
                </div>
                <div class="mt-4"><button type="submit" class="btn-primary-teal">{{ $user->exists ? 'Update Account' : 'Create Account' }}</button></div>
            </section>

            <div class="permission-panel-wrap">
                <section class="card-admin permission-panel">
                    <div class="user-section-title-wrap mb-2"><div class="user-section-icon"><i class="bi bi-lock"></i></div><div><div class="user-section-title">Role Permissions</div><div class="user-section-sub">Set the appropriate role to control access.</div></div></div>
                    <div class="permission-card" data-role-field="doctor">
                        <h3><i class="bi bi-person-heart text-success me-2"></i>Doctor Role</h3>
                        <ul><li><i class="bi bi-check-lg"></i>Manage own appointments</li><li><i class="bi bi-check-lg"></i>View assigned patients</li><li><i class="bi bi-check-lg"></i>Add prescriptions</li><li><i class="bi bi-check-lg"></i>Access patient records</li></ul>
                    </div>
                    <div class="permission-card staff-permission" data-role-field="staff">
                        <h3><i class="bi bi-people text-primary me-2"></i>Staff Role</h3>
                        <ul><li><i class="bi bi-check-lg"></i>Manage appointments</li><li><i class="bi bi-check-lg"></i>Patient registration</li><li><i class="bi bi-check-lg"></i>Billing & payments</li><li><i class="bi bi-check-lg"></i>Communication (SMS/Email)</li><li><i class="bi bi-check-lg"></i>No clinical access</li></ul>
                    </div>
                </section>

                @if($user->exists) @can('manageAccess', $user)
                <section class="card-admin status-panel mt-3">
                    <div class="user-section-title-wrap mb-2"><div class="user-section-icon"><i class="bi bi-sliders"></i></div><div><div class="user-section-title">Module Access Overrides</div><div class="user-section-sub">Tick modules this user may access.</div></div></div>
                    <div class="module-access-grid">
                        @foreach(config('clinic.modules') as $key=>$label)
                            <label class="d-block small"><input type="checkbox" form="accessForm" name="modules[]" value="{{ $key }}" @checked($user->canAccessModule($key))> {{ $label }}</label>
                        @endforeach
                    </div>
                </section>
                @endcan @endif
            </div>
        </div>
    </form>

    @if($user->exists) @can('manageAccess', $user)
    <form method="POST" action="{{ route('admin.staff.access',$user) }}" id="accessForm" class="mt-2">@csrf @method('PUT')<button class="btn-secondary-admin">Save Module Access</button></form>
    @endcan @endif
</div>

@push('scripts')
<script>
(function(){
    const roleSel=document.getElementById('userRole');
    function sync(){const r=roleSel.value;document.querySelectorAll('[data-role-field]').forEach(el=>{el.style.display=(el.dataset.roleField===r)?'':'none';});document.querySelectorAll('.role-switch button').forEach(b=>b.classList.toggle('active',b.dataset.userRole===r));}
    roleSel.addEventListener('change',sync);
    document.querySelectorAll('.role-switch button').forEach(b=>b.addEventListener('click',()=>{roleSel.value=b.dataset.userRole;sync();}));
    sync();
})();
</script>
@endpush
@endsection