@if($errors->any())<div class="alert form-alert"><strong>Please correct the highlighted fields.</strong><ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div>@endif
<div class="admin-form-grid">
    <div class="form-group"><label for="name">Chef Name <b>*</b></label><input id="name" name="name" value="{{ old('name',$chef->name??'') }}" required maxlength="150" placeholder="Enter full name"></div>
    <div class="form-group"><label for="phone">Phone <b>*</b></label><input id="phone" name="phone" value="{{ old('phone',$chef->phone??'') }}" required maxlength="20" placeholder="Enter phone number"></div>
    <div class="form-group"><label for="email">Email</label><input id="email" type="email" name="email" value="{{ old('email',$chef->email??'') }}" maxlength="255" placeholder="chef@example.com"></div>
    <div class="form-group"><label for="specialization">Specialization</label><input id="specialization" name="specialization" value="{{ old('specialization',$chef->specialization??'') }}" maxlength="150" placeholder="e.g. South Indian Cuisine"></div>
    <div class="form-group"><label for="experience_years">Experience (Years)</label><input id="experience_years" type="number" name="experience_years" min="0" max="80" value="{{ old('experience_years',$chef->experience_years??'') }}" placeholder="Years of experience"></div>
    <div class="form-group"><label for="is_active">Status <b>*</b></label><select id="is_active" name="is_active" required><option value="1" @selected((string)old('is_active',$chef->is_active??1)==='1')>Active</option><option value="0" @selected((string)old('is_active',$chef->is_active??1)==='0')>Inactive</option></select></div>
    <div class="form-group full-width"><label for="address">Address</label><textarea id="address" name="address" rows="3" maxlength="1000" placeholder="Enter chef address">{{ old('address',$chef->address??'') }}</textarea></div>
    <div class="form-group full-width"><h3 class="form-subheading">Login Credentials</h3></div>
    <div class="form-group full-width"><label for="username">Username <b>*</b></label><input id="username" name="username" value="{{ old('username',$chef->username??'') }}" required minlength="3" maxlength="100" autocomplete="off" placeholder="Enter chef username"></div>
    <div class="form-group"><label for="password">Password @isset($chef)<span class="optional-label">Leave blank to keep current</span>@else<b>*</b>@endisset</label><div class="admin-password-wrap"><input id="password" type="password" name="password" minlength="8" maxlength="255" @required(!isset($chef)) autocomplete="new-password" placeholder="{{ isset($chef)?'Enter only to change password':'Minimum 8 characters' }}"><button class="admin-eye-toggle" type="button" data-password-toggle="password" aria-label="Show password" title="Show password"><svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"/><circle cx="12" cy="12" r="2.75"/></svg></button></div>@error('password')<p class="field-error">{{ $message }}</p>@enderror</div>
    <div class="form-group"><label for="password_confirmation">Confirm Password @unless(isset($chef))<b>*</b>@endunless</label><div class="admin-password-wrap"><input id="password_confirmation" type="password" name="password_confirmation" minlength="8" maxlength="255" @required(!isset($chef)) autocomplete="new-password" placeholder="Re-enter password"><button class="admin-eye-toggle" type="button" data-password-toggle="password_confirmation" aria-label="Show confirm password" title="Show confirm password"><svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"/><circle cx="12" cy="12" r="2.75"/></svg></button></div><p class="field-error password-match-error" id="passwordMatchError" hidden>Confirm password must match the password.</p></div>
</div>
<div class="form-actions"><a class="secondary-action" href="{{ route('admin.chefs.index') }}">Cancel</a><button class="primary-action" type="submit">{{ $submitLabel }}</button></div>
@push('scripts')<script>
(()=>{const password=document.getElementById('password'),confirmation=document.getElementById('password_confirmation'),matchError=document.getElementById('passwordMatchError');document.querySelectorAll('[data-password-toggle]').forEach(button=>button.addEventListener('click',()=>{const input=document.getElementById(button.dataset.passwordToggle),show=input.type==='password';input.type=show?'text':'password';button.classList.toggle('is-visible',show);button.setAttribute('aria-label',show?'Hide password':'Show password');button.setAttribute('title',show?'Hide password':'Show password')}));function validateMatch(){const mismatch=confirmation.value!==password.value;confirmation.setCustomValidity(mismatch?'Confirm password must match the password.':'');matchError.hidden=!mismatch}password.addEventListener('input',validateMatch);confirmation.addEventListener('input',validateMatch)})();
</script>@endpush