@extends('layouts.admin_layout')

@section('content')



<main class="h-full pb-16 overflow-y-auto">
  <div class="container px-6 mx-auto grid">
    <br><br>
    <a href="{{ route('admin.users.show') }}" class="mt-12 text-gray-700 dark:text-gray-200">&LeftArrow; <small>Back</small></a>
    <h2
      class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
      Edit <span class="text-blue-500">{{ $user->first_name }}'s</span> Information
    </h2>
    <!-- CTA -->
    <a
      class="flex bg-blue-600 items-center justify-between p-4 mb-8 text-sm font-semibold shadow-md focus:outline-none focus:shadow-outline-green"
      href="{{ url('/') }}" style="color: #fff;">
      <div class="flex items-center">
        <svg
          class="w-5 h-5 mr-2"
          fill="currentColor"
          viewBox="0 0 20 20">
          <path
            d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
        </svg>
        <span>Go to main website</span>
      </div>
      <span>View &RightArrow;</span>
    </a>

    <!-- General elements -->
    <h4
      class="mb-4 text-lg font-semibold text-gray-600 dark:text-gray-300">
      Information
    </h4>
    <div
      class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
      <x-alert />
      <form method="post" action="{{ route('admin.user.update', $user->id) }}">
        @csrf
        @method('patch')
        <label class="block text-sm mb-5">
          <span class="text-gray-700 dark:text-gray-400">First Name</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->first_name }}" name="first_name" type="text" />
        </label>
        <br>

        <label class="block text-sm mb-5">
          <span class="text-gray-700 dark:text-gray-400">Last Name</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->last_name }}" name="last_name" type="text" />
        </label>
        <br>

        <label class="block text-sm mb-5">
          <span class="text-gray-700 dark:text-gray-400">Username</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->username }}" name="username" type="text" />
          @error('username')
          <span class="text-xs text-red-600 dark:text-red-400" role="alert">
            <strong>{{ $message }}</strong>
          </span>
          @enderror
        </label>
        <br>

        <label class=" text-sm mx-60">
          <span class="text-gray-700 dark:text-gray-400 mt-5">Email</span>
          <!-- focus-within sets the color for the icon when input is focused -->
          <div
            class="relative text-gray-500 focus-within:text-green-600 dark:focus-within:text-green-400">
            <input
              class="block w-full pl-10 mt-1 text-sm text-black dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:focus:shadow-outline-gray form-input"
              value="{{ $user->email }}" name="email" value="{{ old('email') }}" id="exampleInputEmail1" aria-describedby="emailHelp" />

            <div
              class="absolute inset-y-0 flex items-center ml-3 pointer-events-none">
              <svg
                class="w-5 h-5"
                aria-hidden="true"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                viewBox="0 0 24 24"
                stroke="currentColor">
                <path
                  d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
              </svg>
            </div>
          </div>
          @error('email')
          <span class="text-xs text-red-600 dark:text-red-400" role="alert">
            <strong>{{ $message }}</strong>
          </span>
          @enderror
        </label>
        <br>

        <label class="block text-sm mb-4">
          <span class="text-gray-700 dark:text-gray-400">Main wallet balance</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->balance }}" name="balance" type="number" step="any" />
        </label>

        <label class="block text-sm mb-4">
          <span class="text-gray-700 dark:text-gray-400">Rebate balance</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->rebates }}" name="rebates" type="number" step="any" />
        </label>

        <label class="block text-sm mb-4">
          <span class="text-gray-700 dark:text-gray-400">Loyalty bonus</span>
          <input
            class="block w-full mt-1 text-sm dark:border-gray-600 dark:bg-gray-700 focus:border-green-400 focus:outline-none focus:shadow-outline-green dark:text-gray-300 dark:focus:shadow-outline-gray form-input"
            value="{{ $user->loyalty_bonus }}" name="loyalty_bonus" type="number" step="any" />
        </label>

        <div class="mx-auto">
          <button
            class="bg-blue-600 px-5 py-3 font-medium leading-5 text-white transition-colors duration-150 border border-transparent active:bg-green-500 hover:bg-green-700 focus:outline-none focus:shadow-outline-green"
            type="submit" style="color: #fff;">
            Update Info
          </button>
        </div>
      </form>

    </div>
  </div>
  </div>
</main>



@endsection