@extends('layouts.base')

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
    .nav {
        font-family: "Nunito Sans", serif;
        letter-spacing: 1px;
        font-size: 13px;
        font-weight: 700;
    }
    .nav a {
        border-bottom: 1px solid rgb(255, 255, 255);
        border-radius: 0px !important;
    }
    .nav a:hover {
        background-color: rgba(255, 255, 255, 0.39);
        color: black !important;
    }
</style>

<link rel="stylesheet" href="css/main.css">
<link href="css/responsive.css" rel="stylesheet">
<link href="css/dynamic.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600|Open+Sans:300,400,600,700" rel="stylesheet">

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <div class="row">
                <div class="col-sm-12 text-center backimghead" style="background: linear-gradient(rgba(0, 0, 0, 0.768),rgba(0, 0, 0, 0.774)),url('https://png.pngtree.com/thumb_back/fh260/background/20240526/pngtree-asian-young-university-students-studying-together-sitting-at-desk-in-library-image_15731485.jpg') center/cover; height: 400px;">
                    <h2 style="padding-top: 210px; color:white;" class="fw-bold text-uppercase headingm1 headerinner">Alumni Registration Form</h2>
                    <span style="color:white; font-family:Poppins, serif;" class="fw-bold">
                        <a href="" style="text-decoration: none; color:white;">HOME</a>&nbsp;/&nbsp;
                        <a href="/" style="color:white; text-decoration: none;" class="text-uppercase">Alumni Registration Form</a>
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-3">
        <div class="col-sm-12">
            <div class="container-fluid">
                <div class="content-area">
                    <div class="row">
                        <div class="col-lg-3 sidebar">
                            <nav class="nav flex-column p-2 shadow" style="background-image: linear-gradient(to right,rgba(10, 87, 138, 0.93),rgba(10, 87, 138, 0.92));">
                                <img src="{{asset('img/imge.png')}}" class="w-100" alt="">
                                <h5 class="p-3 fw-bold text-white text-uppercase" style="background-color:black; font-size: 14px;">Alumni - </h5>
                                <a href="{{url('alumni')}}" class="nav-link text-white px-3 py-2 rounded mb-2">
                                    <i class="fa-solid fa-plus"></i> &nbsp;I.T.S Alumni Association
                                </a>
                                <a href="{{url('/Notable_Alumni')}}" class="nav-link text-white px-3 py-2 rounded mb-2 border-0">
                                    <i class="fa-solid fa-plus"></i> &nbsp;Notable Alumni
                                </a>
                            </nav>
                        </div>

                        <div class="col-lg-9 right-content p-3">
                            <h4 class="mt-2 fw-bold" style="font-family:Poppins, serif; border-left:5px solid #c50d12; color:#c50d12; padding-left: 5px;">
                            Alumni Registration Form
                            </h4>
                            <hr>

                            <!-- Alumni Form Start -->
                            <div class="card shadow-lg border-0 p-4">
    
    <form action="{{ route('alumni.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-bold">Full Name</label>
                <input type="text" name="name" class="form-control" placeholder="Enter your full name" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">Email Address</label>
                <input type="email" name="email" class="form-control" placeholder="example@email.com" required>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-md-6">
                <label class="form-label fw-bold">Phone Number</label>
                <input type="text" name="phone" class="form-control" placeholder="Enter your phone number" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">Batch Year</label>
                <input type="text" name="batch" class="form-control" placeholder="e.g., 2018-2022" required>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-md-6">
                <label class="form-label fw-bold">Degree</label>
                <input type="text" name="degree" class="form-control" placeholder="Enter your degree" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">Designation</label>
                <input type="text" name="postname" class="form-control" placeholder="e.g., Software Engineer" required>
            </div>
        </div>

        <div class="row g-3 mt-1">
            <div class="col-md-6">
                <label class="form-label fw-bold">Company Name</label>
                <input type="text" name="companyname" class="form-control" placeholder="Enter your company name" required>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-bold">Current Status</label>
                <select name="status" class="form-control" required>
                    <option value="">Select Status</option>
                    <option value="Employed">Employed</option>
                    <option value="Self-Employed">Self-Employed</option>
                    <option value="Higher Studies">Higher Studies</option>
                    <option value="Other">Other</option>
                </select>
            </div>
        </div>

        <div class="row g-3 mt-3">
            <div class="col-md-12">
                <label class="form-label fw-bold">Upload Your Photo</label>
                <input type="file" name="photo" class="form-control" required>
            </div>
        </div>

        <div class="mt-4 text-center">
            <button type="submit" class="btn  px-5 fw-bold rounded-5" style="background-color:#c50d12; color:white;">Register Now</button>
        </div>
    </form>
</div>

                            <!-- Alumni Form End -->

                        </div> <!-- Right Content End -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>