@extends('portal.portal-layout')

@section('pages-content')

    <a href="{{ route('portal.account') }}"
       class="inline-flex gap-4 items-center font-medium text-lg text-primary-600 hover:underline">
        <svg class="w-4" fill="none" stroke="currentColor" stroke-width="4" viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"></path>
        </svg>
        <span>Back to dashboard</span>
    </a>

    <h1 class="mt-12 text-5xl text-titus-primary">Referee details</h1>

    <p class="mt-8 text-gray-500">Update your details in the form below.</p>

    @if(session()->has('success'))
        <x-description-alert class="mt-4" label="Referee details updated successfully!" type="success"/>
    @endif

    <div class="mt-4">

        <form action="{{ route('portal.referee-details') }}" method="post"
              class="flex flex-col gap-4 max-w-[400px]">
            @csrf

            <div>
                <x-inputs.new-input name="referee_first_name" label="First Name" class="sm:max-w-full"/>
                <x-inputs.error name="referee_first_name"/>
            </div>
            <div>
                <x-inputs.new-input name="referee_last_name" label="Last Name" class="sm:max-w-full"/>
                <x-inputs.error name="referee_last_name"/>
            </div>
            <div>
                <x-inputs.new-input type="email" name="invitee_email" label="Email" class="sm:max-w-full"/>
                <x-inputs.error name="invitee_email"/>
            </div>
            <div>
                <x-inputs.new-input name="referee_relationship" label="Relationship" class="sm:max-w-full"/>
                <x-inputs.error name="referee_relationship"/>
            </div>

            <button 
                type="submit"
                class="flex gap-2 items-center text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-14 py-2.5 mt-4 w-fit"
                @if($success) disabled @endif
            >
                <span>Save details</span>
            </button>
        </form>
    </div>
@endsection