@extends('layouts.auth',["title"=>"login", "state"=>3, "showSteps"=> 1])
@section('content')
<div class="w-full mt-6 lg:mt-12">
    <div class="w-full px-8">
        <div class="title">
            <div class="create-account3">Education</div>
        </div>
        <form class="frame-167" id="educationForm" method="post" action="/education">
            @if(count($errors) > 0 )

            <ul class="" style="list-style: none;">
                @foreach($errors->all() as $error)
                <li>
                    <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert">
                        <span class="font-medium">{{$error}}</span>
                    </div>
                </li>
                @endforeach
            </ul>

            @endif
            @if(\Session::has('message'))
            <ul class="" style="list-style: none;">
                <li>
                    <div class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert">
                        <span class="font-medium">{{\Session::get('message')}}</span>
                    </div>
                </li>
            </ul>
            @endif
            @csrf
            <div class="mb-2 w-full">
                <label for="institution" class="block mb-2 lable dark:text-white">Name of University/College/High School</label>
                <input type="text" id="institution" name="institution" placeholder="Name of institution attended" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="certification" class="block mb-2 lable dark:text-white">Qualification/Certification</label>
                <input type="text" id="certification" name="certification" placeholder="Certificate obtained" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>
            <div class="mb-2 w-full">
                <label for="date" class="block mb-2 lable dark:text-white">Date of Completion</label>
                <input type="date" id="data" name="data" class="block w-full p-4 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-base focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            </div>

        </form>
    </div>
    <style>
        .addButton,
        .addButton * {
            box-sizing: border-box;
        }

        .addButton {
            background: #000000;
            border-radius: 8.64px;
            padding: 12px 16px 12px 16px;
            display: flex;
            flex-direction: row;
            gap: 0px;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            width: 118px;
            height: 48px;
            position: relative;
        }

        .add-more {
            color: #ffffff;
            text-align: center;
            font-family: "Poppins-SemiBold", sans-serif;
            font-size: 14.399999618530273px;
            font-weight: 600;
            position: relative;
            width: 72px;
            height: 22.92px;
        }
    </style>
    <div class="flex justify-center mt-2">
        <button onclick="submiteForm()" class="addButton">
            <div class="add-more">Add Education</div>
        </button>
    </div>
    <div class="arrows2 mt-8 px-8">
        <a href="/personal-info" class="buttonPre">
            <img class="arrow-right" src="/icons/Arrow-left.png" />
            <div class="next">Previous</div>
        </a>
        <a href="/next-of-kin" class="button">
            <div class="next">Next</div>
            <img class="arrow-right" src="/icons/Arrow-right.png" />
        </a>
    </div>
</div>
<script>
    const submiteForm = () => {
        document.getElementById("educationForm").submit();
    }
</script>
@stop