@extends('layouts/admin/masters.master')

@section('opengraph')
<!-- Search Engine Optimization by Rank Math - http://s.rankmath.com/home -->
@endsection

@section('tittle','VOICES AND BEATS [ EVENTS MANAGEMENT ] | ADD - USER')

@section('content')
  <div>
    <h1 class="text-xl font-opensans-bold">Add User</h1>
  </div>

  <div class="text-sm text-gray-500 italic">
    Create a brand new user and add them to the site.
  </div>

  <div>
    <form action="" method="post" enctype="multipart/form-data">
     @csrf 
      <div class="w-full md:w-2/3 space-y-3 sm:space-y-5">
        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">First Name</label>
          </div>
          <div class="flex-2 space-y-2">
            <input type="text" name="firstname" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('firstname') !border-red-500 @enderror" value="{{ old('firstname') }}">

            @error('firstname')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Last Name</label>
          </div>
          <div class="flex-2">
            <input type="text" name="lastname" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('lastname') !border-red-500 @enderror" value="{{ old('lastname') }}">

            @error('lastname')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Email</label>
          </div>
          <div class="flex-2">
            <input type="text" name="email" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('email') !border-red-500 @enderror" value="{{ old('email') }}">

            @error('email')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Phone no.</label>
          </div>
          <div class="flex-2">
            <input type="text" name="phone" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('phone') !border-red-500 @enderror" value="{{ old('phone') }}">

            @error('phone')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Profile Image</label>
          </div>
          <div class="flex-2 space-y-2"> 
            <input type="file" name="image" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none" oninput="profile.src=window.URL.createObjectURL(this.files[0])">
            <div class="w-28 h-28 p-2 border border-gray-300 rounded-md">
              <img id="profile" src="{{asset('assets/images/default_profile.png')}}" class="w-full h-full">
            </div>
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Password</label>
          </div>
          <div class="flex-2">
            <input type="password" name="password" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('password') !border-red-500 @enderror">

            @error('password')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">Password Confirmation</label>
          </div>
          <div class="flex-2">
            <input type="password" name="password_confirmation" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('password') !border-red-500 @enderror">

            @error('password')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div class="flex space-x-2 items-center">
          <div class="flex-1">
            <label class="text-gray-700 font-opensans-bold">User Role</label>
          </div>
          <div class="flex-2">
            <select name="user_role" class="w-full border border-gray-300 rounded-md bg-white p-2 focus:outline-none @error('user_role') !border-red-500 @enderror">
              <option value="">Select Role</option>
               @if(old('user_role') == "admin")   
                <option value="admin" selected>Admin</option> 
               @else
                <option value="admin">Admin</option> 
               @endif

               @if(old('user_role') == "page manager")   
                <option value="page manager" selected>Page Manager</option> 
               @else
                <option value="page manager">Page Manager</option> 
               @endif
            </select>

            @error('user_role')
              <div class="text-red-500 text-sm font-bold">
                {{$message}}
              </div>
            @enderror
          </div>
        </div>

        <div>
          <button class="text-sm border border-lime-500 hover:bg-lime-500 hover:text-white rounded-sm px-2 py-1 w-full md:w-1/4 font-opensans-bold">
             Add New
          </button>
        </div>
      </div>
    </form>
  </div>
@endsection