@extends('layouts.app')
@section('title', __('Edit account'))
@section('content')
<section class="panel-card max-w-2xl p-5 sm:p-8">
  <div class="mb-6 flex items-center gap-3">
    <span class="flex h-12 w-12 items-center justify-center rounded-full bg-blue-50 text-lg font-extrabold text-blue-800">{{ strtoupper(substr($member->name, 0, 1)) }}</span>
    <div><h2 class="font-bold text-slate-900">{{ $member->name }}</h2><p class="mt-1 text-xs text-slate-400">{{ $member->member_id }} · {{ __(ucfirst($member->role)) }}</p></div>
  </div>
  <form method="POST" action="{{ route('admin.members.update',$member) }}" enctype="multipart/form-data" class="space-y-5">@csrf @method('PUT')
    <label class="block text-sm font-semibold text-slate-700">{{ __('Full name') }}<input name="name" value="{{ old('name', $member->name) }}" class="field-control mt-2" required></label>
    <label class="block text-sm font-semibold text-slate-700">{{ __('Email address') }}<input name="email" type="email" value="{{ old('email', $member->email) }}" class="field-control mt-2" required></label>
    @if($member->isEmployee())
      <div class="space-y-5 rounded-2xl border border-slate-100 bg-slate-50 p-4">
        <h2 class="text-sm font-bold text-slate-800">{{ __('Employee details') }}</h2>
        <div class="grid gap-5 sm:grid-cols-2">
          <label class="block text-sm font-semibold text-slate-700">{{ __('Department') }}
            <select name="department_id" class="field-control mt-2">
              <option value="">{{ __('Select department') }}</option>
              @foreach($departments as $department)
                <option value="{{ $department->id }}" @selected(old('department_id', $member->profile?->department_id) == $department->id)>{{ $department->name }} · {{ $department->code }}</option>
              @endforeach
            </select>
          </label>
          <label class="block text-sm font-semibold text-slate-700">{{ __('Job title') }}
            <input name="job_title" value="{{ old('job_title', $member->profile?->job_title) }}" class="field-control mt-2" maxlength="255">
          </label>
          <label class="block text-sm font-semibold text-slate-700">{{ __('Phone') }}
            <input name="phone" type="tel" value="{{ old('phone', $member->profile?->phone) }}" class="field-control mt-2" maxlength="40">
          </label>
          <label class="block text-sm font-semibold text-slate-700">{{ __('Hire date') }}
            <input name="hire_date" type="date" value="{{ old('hire_date', $member->profile?->hire_date?->format('Y-m-d')) }}" class="field-control mt-2">
          </label>
          <label class="block text-sm font-semibold text-slate-700">{{ __('Monthly salary') }}
            <input name="monthly_salary" type="number" min="0" step="0.01" value="{{ old('monthly_salary', $member->profile?->monthly_salary) }}" class="field-control mt-2">
          </label>
        </div>
        <label class="block text-sm font-semibold text-slate-700">{{ __('Profile photo') }}
          <input name="avatar" type="file" accept="image/jpeg,image/png,image/webp" class="field-control mt-2">
          <span class="mt-1 block text-xs font-normal text-slate-400">{{ __('Upload a JPG, PNG or WebP image up to 2 MB.') }}</span>
        </label>
        @if($member->profile?->avatar)
          <img src="{{ \Illuminate\Support\Facades\Storage::disk('public')->url($member->profile->avatar) }}" alt="{{ __('Employee profile photo') }}" class="h-16 w-16 rounded-full object-cover">
        @endif
      </div>
    @endif
    <label class="flex items-center gap-3 rounded-xl border border-slate-200 p-4 text-sm font-semibold text-slate-700"><input type="checkbox" name="is_active" value="1" class="rounded border-slate-300 text-blue-800 focus:ring-blue-500" @checked(old('is_active', $member->is_active))> {{ __('Account is active') }}</label>
    <div class="flex flex-wrap gap-3 pt-2"><button class="rounded-xl bg-blue-900 px-5 py-3 text-sm font-bold text-white hover:bg-blue-800">{{ __('Save changes') }}</button><a href="{{ route('admin.members.index') }}" class="rounded-xl border border-slate-200 px-5 py-3 text-sm font-semibold text-slate-600 hover:bg-slate-50">{{ __('Cancel') }}</a></div>
  </form>
</section>
@endsection