@extends('layouts.dashboard')

@section('contents')
<section class="bg-white w-7/12 mx-auto rounded-lg mt-5 dark:bg-gray-900">
    <div class="py-4 px-4 mx-auto max-w-2xl lg:py-8">
        @if(Session::has('success'))
            <div id="alert-3" class="flex items-center p-4 mb-4 text-green-800 rounded-lg bg-green-200 dark:bg-gray-800 dark:text-green-400" role="alert">
                <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                </svg>
                <span class="sr-only">Info</span>
                <div class="ms-3 text-sm font-medium">
                    User is added successfully with ID - {{ Session::get('success') }}
                    @php
                        Session::forget('success');
                    @endphp
                </div>
                <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-green-50 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-3" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                </button>
            </div>
        @elseif(Session::has('failed'))
            <div id="alert-0" class="flex items-center p-4 mb-4 text-red-800 rounded-lg bg-red-200 dark:bg-gray-800 dark:text-red-400" role="alert">
                <svg class="flex-shrink-0 w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                </svg>
                <span class="sr-only">Info</span>
                <div class="ms-3 text-sm font-medium">
                    <p>Operation is failed with below errors -</p>
                    <ul>
                        @foreach (Session::get('failed')->all() as $error)
                            <li class="ml-3">* {{ $error }}</li>
                        @endforeach
                    </ul>
                    @php
                        Session::forget('failed');
                    @endphp
                </div>
                <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-red-50 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex items-center justify-center h-8 w-8 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700" data-dismiss-target="#alert-0" aria-label="Close">
                    <span class="sr-only">Close</span>
                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
                    </svg>
                </button>
            </div>
        @endif
        <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white"><span><i class="fa-solid fa-user-plus me-1"></i> Add New User</span></h2>
        <hr class="h-px my-0 bg-gray-400 border-0 dark:bg-gray-700">
        <form class="mt-3" action="{{ route('add.appusr') }}" method="POST">
            @csrf
            <div class="grid gap-2 sm:grid-cols-2 sm:gap-4">
                <!-- sm:col-span-2 -->
                <div class="w-full">
                    <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Name</label>
                    <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="Type full name" required="">
                </div>
                <div class="w-full">
                    <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Email</label>
                    <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="Type official email" required="">
                </div>
                <div class="w-full">
                    <label for="username" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Username/Login</label>
                    <input type="text" name="username" id="username" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="e.g. dsw" maxlength="25" required="">
                </div>
                <div class="w-full">
                    <label for="passwd" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Password</label>
                    <input type="password" name="passwd" id="passwd" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 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" placeholder="" maxlength="16" required="">
                </div>
                <div class="w-full">
                    <label for="ofc" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Office</label>
                    <select id="ofc" name="ofc" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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" required>
                        <option disabled selected="">Select Office/Dept.</option>
                        <option value="intg">IT Integration</option>
                        <option value="itcell">ICT Cell</option>
                        <!-- <option value="dsw">DSW Office</option> -->
                        <option value="reg-ofc">Registrar Office</option>
                        <!-- <option value="vc-ofc">VC Office</option> -->
                        <!-- <option value="hall">Hall Office</option> -->
                        <option value="eee">Electrical and Electronic Engineering (EEE)</option>
                        <option value="cse">Computer Sicence and Engineering (CSE)</option>
                        <option value="ece">Electrical and Computer Engineering (ECE)</option>
                        <option value="ete">Electronic and Telecommunication Engineering (ETE)</option>

                        <option value="ce">Civil Engineering (CE)</option>
                        <option value="becm">Building Engineering & Construction Management (BECM)</option>
                        <option value="urp">Urban & Regional Planning (URP)</option>
                        <option value="arch">Architecture (ARCH)</option>

                        <option value="me">Mechanical Engineering (ME)</option>
                        <option value="ipe">Industrial and Production Engineering (IPE)</option>
                        <option value="mte">Mechatronics Engineering (MTE)</option>
                        <option value="mse">Material Science & Engineering (MSE)</option>
                        <option value="cfpe">Chemical and Food Process Engineering (CFPE)</option>
                        <option value="che">Chemical Engineering (ChE)</option>
                        <option value="gce">Glass & Ceramic Engineering (GCE)</option>
                        <option value="cme">Ceramics & Matellurgical Engineering (CME)</option>

                        <option value="math">Mathematics</option>
                        <option value="phy">Physics</option>
                        <option value="chem">Chemistry</option>
                        <option value="hum">Humanities</option>

                        <option value="iict">Institute of Informaiton & Communication Technology (IICT)</option>
                        <option value="iees">Institute of Energy & Environmental Studies (IEES)</option>
                    </select>
                </div>
                <div class="w-full">
                    <label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Category</label>
                    <select id="category" name="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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" required>
                        <option disabled selected="">Select category</option>
                        <option value="1">Web 🌐</option>
                        <option value="2">Api 🧤</option>
                    </select>
                </div>
                <div class="w-full">
                    <label for="role" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Role</label>
                    <select id="role" name="role" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 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" required>
                        <option disabled selected="">Select Role</option>
                        <option value="1">App-Admin</option>
                        <option value="99">Integration</option>
                        <option value="2">Search/Admin</option>
                        <option value="3">Scrutiny</option>
                    </select>
                </div>
                <div class="w-full">
                    <label for="mobile" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">*Mobile</label>
                    <input id="mobile" name="mobile" pattern="[0-9]+" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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" placeholder="01xxxxxxxxx" maxlength="13" required></input>
                </div>
                <div class="w-full">
                    <label for="desc" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
                    <input id="desc" name="desc" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 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" placeholder="e.g. HoD" maxlength="50"></input>
                </div>
            </div>
            <button type="submit" class="inline-flex w-1/2 justify-center items-center px-5 py-2.5 mt-4 sm:mt-6 text-sm font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
                <span><i class="fa-solid fa-circle-plus me-1"></i> Add User</span>
            </button>
        </form>
    </div>
</section>
@endsection

@section('scripts')
@endsection