@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;
        }

        .bg-blue {
            background-color: #004b64;
        }

        @media only screen and (min-width: 992px) {
            .modal-dialog {
                max-width: 1567px;
            }
        }
    </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">
                                                    <div
                                                        class="col-sm-12 d-flex justify-content-between align-items-center">
                                                        <h3 class="p-3 m-1">
                                                            Mark Attendance –                                                             (Observer / Deputy Observer Lists)
                                                        </h3>
                                                        <button type="button" class="btn btn-success me-3"
                                                            data-bs-toggle="modal" data-bs-target="#addAttendanceModal">
                                                            Add Attendance +
                                                        </button>
                                                    </div>

                                                    <br />
                                                    <div class="ms-3">
                                                        <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>
                                                    <hr style="opacity: 0.7; border: 1px solid #000;" />
                                                    <div class="accordion accordion-flush mx-3" id="accordionFlushExample">