@extends('layouts.admin')

@section('heading', $staffMember->exists ? 'Edit staff' : 'Add staff')
@section('subheading', $staffMember->exists ? 'Update staff details and role.' : 'Create a login for a new staff member.')

@section('content')

<div class="card p-6 max-w-xl">
  <form method="POST" action="{{ $staffMember->exists ? route('shop.staff.update', $staffMember) : route('shop.staff.store') }}">
    @csrf
    @if($staffMember->exists) @method('PUT') @endif

    @if ($errors->any())
      <div class="mb-4 text-sm rounded-lg px-4 py-3" style="background:#FCEBEB; color:#791F1F;">
        {{ $errors->first() }}
      </div>
    @endif

    <div class="space-y-4">
      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Name *</label>
        <input type="text" name="name" value="{{ old('name', $staffMember->name) }}" required
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Phone (login username) *</label>
        <input type="text" name="phone" value="{{ old('phone', $staffMember->phone) }}" required
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">
          Password {{ $staffMember->exists ? '(leave blank to keep unchanged)' : '*' }}
        </label>
        <input type="password" name="password" {{ $staffMember->exists ? '' : 'required' }}
          class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
      </div>

      <div>
        <label class="block text-xs font-medium mb-1.5" style="color:#1A1625;">Role</label>
        <select name="role_id" class="w-full px-4 py-2.5 rounded-lg border text-sm outline-none" style="border-color:#e6e1d8;">
          <option value="">No role — full staff access</option>
          @foreach($roles as $role)
            <option value="{{ $role->id }}" {{ old('role_id', $staffMember->role_id) == $role->id ? 'selected' : '' }}>
              {{ $role->name }}
            </option>
          @endforeach
        </select>
        @if($roles->isEmpty())
          <p class="text-xs mt-1" style="color:#a19a8f;">No roles created yet — <a href="{{ route('shop.roles.create') }}" style="color:#C2185B;">create one first</a>.</p>
        @endif
      </div>

      <div class="flex items-center gap-2">
        <input type="hidden" name="is_active" value="0">
        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $staffMember->is_active ?? true) ? 'checked' : '' }} style="accent-color:#C2185B;">
        <label class="text-xs font-medium" style="color:#1A1625;">Active</label>
      </div>
    </div>

    <div class="flex items-center gap-3 mt-6">
      <button type="submit" class="px-4 py-2 rounded-lg text-sm font-medium text-white" style="background:#C2185B;">
        {{ $staffMember->exists ? 'Update staff' : 'Add staff' }}
      </button>
      <a href="{{ route('shop.staff.index') }}" class="text-sm" style="color:#6b6470;">Cancel</a>
    </div>
  </form>
</div>

@endsection