@extends('layouts.main')

@section('main-container')
<div class="main_content_iner">
    <form action="" method="POST" enctype="multipart/form-data">
        @csrf
        <div class="container-fluid p-0 sm_padding_15px">
            <div class="">
                <div class="px-4 py-1 theme_bg_1">
                    <h5 class="mb-0 text-white text-center">Bulk Router Change</h5>
                </div>
            </div>

            <div class="QA_table p-3 pb-0">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sl</th>
                            <th scope="col">Sl ID</th>
                            <th scope="col">Login Id</th>
                            <th scope="col">Client Name</th>
                            <th scope="col">Mac Address</th>
                            <th scope="col">IP Address</th>
                            <th scope="col">Mobile</th>
                            <th scope="col">Package</th>
                            <th scope="col">Client Status</th>
                            <th scope="col">Login Type</th>
                            <th scope="col">Client Type</th>
                            <th scope="col">Router IP</th>
                            <th scope="col">Exp Date</th>
                            <th scope="col">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="" id="selectAll">
                                    <label class="form-check-label" for="selectAll">
                                        Select All
                                    </label>
                                </div>
                            </th>
                        </tr>
                    </thead>

                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>743</td>
                            <td>sumonjp</td>
                            <td>Md. Ferdoes Hasan Sumon	</td>
                            <td>C4:71:54:25:17:49</td>
                            <td></td>
                            <td>01911054545</td>
                            <td>MCN Basic</td>
                            <td>Active</td>
                            <td>Radius</td>
                            <td>Home</td>
                            <td>10.123.253.11</td>
                            <td>08 Mar 2024</td>
                            <td>
                                <div class="form-check">
                                    <input class="form-check-input checkbox-to-select" type="checkbox" value="" id="flexCheckDefault">
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const selectAllCheckbox = document.getElementById('selectAll');
        const checkboxes = document.querySelectorAll('.checkbox-to-select');

        selectAllCheckbox.addEventListener('change', function () {
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = selectAllCheckbox.checked;
            });
        });

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                if (!this.checked) {
                    selectAllCheckbox.checked = false;
                }
            });
        });
    });
</script>

@endsection