@extends('layouts.main')

@section('main-container')
    <div class="main_content_iner mt-0">
        
        <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">User Status Report</h5>
                </div>
            </div>

            <div class="">
                <div class="d-flex justify-content-between mb-3">
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Zone</option>
                            <option value="Zone 1">Zone 1</option>
                            <option value="Zone 2">Zone 2</option>
                            <option value="Zone 3">Zone 3</option>
                        </select>
                    </div>
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Package</option>
                            <option value="Package 1">Package 1</option>
                            <option value="Package 2">Package 2</option>
                            <option value="Package 3">Package 3</option>
                        </select>
                    </div>
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Client Status</option>
                            <option value="Client Status 1">Client Status 1</option>
                            <option value="Client Status 2">Client Status 2</option>
                            <option value="Client Status 3">Client Status 3</option>
                        </select>
                    </div>
                </div>

                <div class="d-flex justify-content-between">
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Reseller</option>
                            <option value="Reseller 1">Reseller 1</option>
                            <option value="Reseller 2">Reseller 2</option>
                            <option value="Reseller 3">Reseller 3</option>
                        </select>
                    </div>
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Status</option>
                            <option value="Status 1">Status 1</option>
                            <option value="Status 2">Status 2</option>
                            <option value="Status 3">Status 3</option>
                        </select>
                    </div>
                    <div class="w-25">
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a Client</option>
                            <option value="Client 1">Client 1</option>
                            <option value="Client 2">Client 2</option>
                            <option value="Client 3">Client 3</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="d-flex justify-content-center gap-5 mb-2 mt-4">
                <a class="btn btn-primary">Search</a>
                <a class="btn btn-warning" onclick="window.print()">Print</a>
                <a class="btn btn-success">Excel</a>
            </div>

            <div class="QA_table p-3 pb-0">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Sl</th>
                            <th scope="col">Cust ID</th>
                            <th scope="col">Login ID</th>
                            <th scope="col">Package</th>
                            <th scope="col">Client Name</th>
                            <th scope="col">Zone</th>
                            <th scope="col">Address</th>
                            <th scope="col">Mac Address</th>
                            <th scope="col">IP Address</th>
                            <th scope="col">Mobile</th>
                            <th scope="col">Registered Date</th>
                            <th scope="col">Router</th>
                            <th scope="col">EXP Date</th>
                            <th scope="col">Password</th>
                            <th scope="col">Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th colspan="13">Total User</th>
                            <th colspan="2" style="text-align: right;">52443</th>
                        </tr>
                        <tr>
                            <th colspan="4" class="theme_bg_1" style="color: whitesmoke;">Online</th>
                            <th colspan="4" class="theme_bg_1" style="text-align: right; color: whitesmoke;">0</th>
                            <th colspan="4" class="theme_bg_1" style="color: whitesmoke;">Offline</th>
                            <th colspan="3" class="theme_bg_1" style="text-align: right; color: whitesmoke;">0</th>
                        </tr>
                        {{-- @foreach () --}}
                            <tr>
                                <td>Sl</td>
                                <td>Cust ID</td>
                                <td>Login ID</td>
                                <td>Package</td>
                                <td>Client Name</td>
                                <td>Zone</td>
                                <td>Address</td>
                                <td>Mac Address</td>
                                <td>IP Address</td>
                                <td>Mobile</td>
                                <td>Registered Date</td>
                                <td>Router</td>
                                <td>EXP Date</td>
                                <td>Password</td>
                                <td>Status</td>
                            </tr>
                        {{-- @endforeach --}}
                        
                    </tbody>
                </table>
            </div>
        </div>

    </div>
@endsection