@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">Radius Report</h5>
                </div>
            </div>

            <div class="">
                <div class="d-flex justify-content-between mb-3">
                    <div class="w-25">
                        <label for="" class="form-label">From</label>
                        <input class="form-control input_form" name="" id="start_datepicker" placeholder="Start date">
                    </div>
                    <div class="w-25">
                        <label for="" class="form-label">To</label>
                        <input class="form-control input_form" name="" id="end_datepicker" placeholder="End date">
                    </div>
                    <div class="w-25">
                        <label for="" class="form-label">Client</label>
                        <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 class="d-flex justify-content-between">
                    <div class="w-25">
                        <label for="" class="form-label">Mac address</label>
                        <input type="text" name="" id="" placeholder="mac address" class="form-control">
                    </div>
                    <div class="w-25">
                        <label for="" class="form-label">IP address</label>
                        <input type="text" name="" id="" placeholder="ip address" class="form-control">
                    </div>
                    <div class="w-25">
                        <label for="" class="form-label">NAS</label>
                        <select name="" id="" class="form-select" style="width: 100%">
                            <option value="">Select a NAS</option>
                            <option value="NAS 1">NAS 1</option>
                            <option value="NAS 2">NAS 2</option>
                            <option value="NAS 3">NAS 3</option>
                        </select>
                    </div>
                </div>
            </div>
                
            <div class="d-flex justify-content-center gap-4 mb-2 mt-4">
                <a class="btn btn-info">View</a>
                <a class="btn btn-warning" onclick="window.print()">Print</a>
            </div>

            <div class="QA_table p-3 pb-0">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">User ID</th>
                            <th scope="col">IP</th>
                            <th scope="col">Mac Address</th>
                            <th scope="col">NAS</th>
                            <th scope="col">Start Time</th>
                            <th scope="col">End Time</th>
                            <th scope="col">Download</th>
                            <th scope="col">Upload</th>
                            <th scope="col">Session Time</th>
                            <th scope="col">Termination Cause</th>
                        </tr>
                    </thead>
                    <tbody>

                        {{-- @foreach () --}}
                            <tr>
                                <td>user id 1</td>
                                <td>ip address</td>
                                <td>mac address</td>
                                <td>nas</td>
                                <td>start time</td>
                                <td>end time</td>
                                <td>download</td>
                                <td>upload</td>
                                <td>session time</td>
                                <td>termination cause</td>
                            </tr>
                        {{-- @endforeach --}}
                        
                    </tbody>
                </table>
            </div>

        </div>
    </div>
@endsection