@extends('backend.layout.master-tailwind')
@section('title', __('Add New User'))

@section('content')

<div class="page">

  <div class="page-head">
    <div>
      <h1 class="page-title">{{ __('Add New User') }}</h1>
      <p class="page-sub">{{ __('Create a new client or freelancer account.') }}</p>
    </div>
    <div class="page-actions">
      <a href="{{ route('admin.freelancer.all') }}" class="btn ghost">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="m12 19-7-7 7-7"/></svg>
        {{ __('Back') }}
      </a>
    </div>
  </div>

  @if($errors->any())
  <div style="background:var(--danger-soft);border:1px solid color-mix(in oklch,var(--danger) 30%,transparent);border-radius:10px;padding:12px 16px;margin-bottom:14px;font-size:12px;color:var(--danger);line-height:1.7">
    <div style="display:flex;gap:8px;align-items:flex-start">
      <svg style="flex:none;margin-top:1px" class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 16H3z"/><path d="M12 10v4"/><circle cx="12" cy="17" r="0.6" fill="currentColor"/></svg>
      <ul style="margin:0;padding-left:16px">
        @foreach($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  </div>
  @endif

  <form action="{{ route('admin.user.add') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <div style="display:flex;flex-direction:column;gap:12px">

      <div class="card">
        <div class="card-head"><div class="card-title">{{ __('Account Details') }}</div></div>
        <div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('First Name') }}</div>
            </div>
            <div style="width:240px">
              <input type="text" name="first_name" class="input wide"
                     placeholder="{{ __('Enter first name') }}"
                     value="{{ old('first_name') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Last Name') }}</div>
            </div>
            <div style="width:240px">
              <input type="text" name="last_name" class="input wide"
                     placeholder="{{ __('Enter last name') }}"
                     value="{{ old('last_name') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Username') }}</div>
              <div class="desc">{{ __('Must be unique.') }}</div>
            </div>
            <div style="width:240px">
              <input type="text" name="username" class="input wide"
                     placeholder="{{ __('e.g. john_doe') }}"
                     value="{{ old('username') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Email Address') }}</div>
              <div class="desc">{{ __('Must be unique.') }}</div>
            </div>
            <div style="width:240px">
              <input type="email" name="email" class="input wide"
                     placeholder="{{ __('user@example.com') }}"
                     value="{{ old('email') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Phone Number') }}</div>
              <div class="desc">{{ __('Must be unique.') }}</div>
            </div>
            <div style="width:240px">
              <input type="text" name="phone" class="input wide"
                     placeholder="{{ __('Enter phone number') }}"
                     value="{{ old('phone') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('User Type') }}</div>
              <div class="desc">{{ __('Client or Freelancer.') }}</div>
            </div>
            <div style="width:240px">
              <select name="user_type" class="input wide" style="height:28px;appearance:auto">
                <option value="">{{ __('Select type') }}</option>
                <option value="1" {{ old('user_type') == '1' ? 'selected' : '' }}>{{ __('Client') }}</option>
                <option value="2" {{ old('user_type') == '2' ? 'selected' : '' }}>{{ __('Freelancer') }}</option>
              </select>
            </div>
          </div>

        </div>
      </div>

      <div class="card">
        <div class="card-head"><div class="card-title">{{ __('Security') }}</div></div>
        <div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Password') }}</div>
              <div class="desc">{{ __('At least 6 characters.') }}</div>
            </div>
            <div style="width:240px">
              <input type="password" name="password" class="input wide"
                     placeholder="{{ __('Enter password') }}">
            </div>
          </div>

          <div class="setting-row">
            <div class="info">
              <div class="ttl">{{ __('Confirm Password') }}</div>
            </div>
            <div style="width:240px">
              <input type="password" name="password_confirmation" class="input wide"
                     placeholder="{{ __('Confirm password') }}">
            </div>
          </div>

        </div>
      </div>

      <div style="display:flex;justify-content:flex-end;gap:8px;padding-bottom:40px">
        <a href="{{ route('admin.freelancer.all') }}" class="btn ghost">{{ __('Cancel') }}</a>
        <button type="submit" class="btn primary validate_subscription_type">{{ __('Create User') }}</button>
      </div>

    </div>
  </form>

</div>

@endsection

@section('script')
    @include('subscription::backend.subscription.subscription-js')
@endsection