@extends('layouts.admin')
@section('content')
    <style>
        .table tr td,
        tr th {
            text-align: center !important;

        }

        .card-header .btn-header-link {
            padding: 5px !important;
            margin: 1px solid;
        }

        .rmargin {
            margin-bottom: 2px !important;
        }

        .linehiteR {
            line-height: 16px;
            text-align: center !important;
        }

        input[type=checkbox][disabled] {
            background: gray !important;
            border: 1px solid #d4d4d5 !important;
        }

        input.largerCheckbox {
            width: 22px;
            height: 22px;
            margin: 3px;
        }

        label {
            margin-bottom: 0px !important;
        }

        .messageR {
            font-size: 14px;
            text-align: center;
            margin: 6px 25%;
            /* display: block; */
            /* margin-top: 2px; */
            width: 50%;
        }

        table {
            border-color: #ccc;
        }
    </style>

    <main role="main" class="flex-shrink-0">
        <div class="container custom-container">
            <div class="login-5">
                <div class="container-fluid">
                    <div class="row no-gutters">
                        <div class="content-body mt-50 mb-50">
                            <div class="">
                                <div class="row no-gutters">
                                    <div class="col-sm-12">
                                        <div id="main">
                                            <div class="">
                                                <div class="card">
                                                    <h3 class="p-3 m-1">Mark Attendance-                                                        (Observer / Deputy Observer Lists)</h3>
                                                </div>
                                                <br />
                                                <form method="GET" action="{{ route('mark-attendance') }}" id="attendanceForm">
                                                    <div class="d-flex align-items-center">
                                                        <div class="me-3">
                                                            <select class="form-select fs-5" name="showData" onchange="filterCheck()">
                                                                <option value='All' @if (request('showData') == 'All') selected @endif>All</option>
                                                                <option value='10' @if (request('showData') == 10) selected @endif>10</option>
                                                                <option value='20' @if (request('showData') == 20) selected @endif>20</option>
                                                                <option value='50' @if (request('showData') == 50) selected @endif>50</option>
                                                                <option value='100' @if (request('showData') == 100) selected @endif>100</option>
                                                            </select>
                                                        </div>
                                                        <div class="me-5">
                                                            <label for="showData" class="fw-bold fs-5">Show Records</label>
                                                        </div>
                                                        <div class="form-check mx-3 ms-5">
                                                            <input type="radio" class="form-check-input fs-4" name="attendance" value="yes" id="attendanceYes" 
                                                                   @if (request('attendance') == 'yes') checked @endif onchange="filterCheck()">
                                                            <label for="attendanceYes" class="form-check-label" style="font-size:15px">Filter with Marked Attendance</label>
                                                        </div>
                                                        <div class="form-check mx-3">
                                                            <input type="radio" class="form-check-input fs-4" name="attendance" value="no" id="attendanceNo"
                                                                   @if (request('attendance') == 'no') checked @endif onchange="filterCheck()">
                                                            <label for="attendanceNo" class="form-check-label" style="font-size:15px">Filter without Marked Attendance</label>
                                                        </div>
                                                        
                                                        <div class="form-check">
                                                            <nav class="navbar navbar-light bg-light">
                                                                <div class="container-fluid">
                                                                    <div class="input-group">
                                                                        <input type="text" class="form-control" placeholder="Filter Name" aria-label="Search"
                                                                               value="{{ request('filter') }}" name="filter">
                                                                        <button class="btn btn-success" type="submit" onclick="filterCheck()">Search</button>
                                                                    </div>
                                                                </div>
                                                            </nav>
                                                        </div>
                                                        <div>
                                                            <a href="{{ route('mark-attendance') }}" class="btn btn-warning p-3" onclick="filterCheck()">Reset</a>
                                                        </div>
                                                    </div>
                                                </form>
                                                
                                                <div class="clearfix"></div>
                                                <hr style="opacity: 0.7; border: 1px solid #000;" />
                                                <div class="accordion accordion-flush" id="accordionFlushExample">