@extends('admin.layouts.mainlayout')
@section('content')
<style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        form {
            background-color: #fff;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h1 {
            text-align: center;
        }
        label {
            font-weight: bold;
        }
        input[type="text"],
        select,
        textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        textarea {
            resize: vertical;
        }
        input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
    </style>
<div class="container">
<h2>Deactivate Logins</h2>

<form action="deactivatelogin" method="POST" id="deactivateLoginForm">
    
        <legend>Deactivate Login Access</legend>

        <!-- Select User Type -->
         <div class="form-group">
        <label class="control-label" for="userType">User Type:</label>
        <select class="form-control" name="userType" id="userType" required>
            <option value="student">Student</option>
            <option value="teacher">Teacher</option>
            <option value="staff">Staff</option>
            <option value="all">All Users</option>
        </select>
        </div>

        <!-- Grade Level (only relevant if 'Student' is selected) -->
        <div class="form-group">
        <label class="label-control" for="gradeLevel">Grade Level:</label>
        <select class="form-control" name="gradeLevel" id="gradeLevel">
            <option value="">--Select Grade--</option>
            <option value="K">Kindergarten</option>
            <option value="1">1st Grade</option>
            <option value="2">2nd Grade</option>
            <option value="3">3rd Grade</option>
            <option value="4">4th Grade</option>
            <option value="5">5th Grade</option>
            <option value="6">6th Grade</option>
            <option value="7">7th Grade</option>
            <option value="8">8th Grade</option>
            <option value="9">9th Grade</option>
            <option value="10">10th Grade</option>
            <option value="11">11th Grade</option>
            <option value="12">12th Grade</option>
        </select>
        </div>

        <!-- User ID (if targeting a specific individual) -->
        <div class="form-group">
        <label class="control-label" for="userID">User ID </label>
        <select class="form-control" name="userId" id="">
            <option value="1">James Chea</option>
        </select>
       
        </div>

        <!-- Reason for Deactivation -->
         <div class="form-group">
            <label class="content-label" for="reason">Reason for Deactivation:</label>
            <textarea class="form-control" id="reason" name="reason" placeholder="Enter reason for deactivation" rows="4" required></textarea>
        </div>
        

        <!-- Effective Date -->
         <div class="form-group">
        <label class="contet-label" for="effectiveDate">Effective Date:</label>
        <input class="form-control" type="date" id="effectiveDate" name="effectiveDate" required>
        </div>

        <!-- Submit Button -->
        <div class="form-group">
        <button class="btn btn-primary" type="submit">Deactivate Logins</button>
        <button class="btn btn-danger" type="reset">Cancel</button>
        </div>
    
</form>
</div>
@endsection