@extends('admin.layout.master')
@section('content')
    <div class='bg-white p-2 rounded m-2'>
        <div class="row justify-content-between p-3 rounded m-2  bg-light">
            <div class="col-12 col-md-6 align-self-center">
                <a class='text-decoration-none fw-bold text-dark breadc' href="">
                Notification Hosts
                </a>
            </div>
            <div class="col-12 col-md-6 align-self-center float-end ">
                <div class='align-self-center  text-center justify-content-center'>
                <div class="row">
                    <div class="offset-md-5 col-12 col-md-7">
                        <div>
                        <select id=" Select" class="form-select rounded-pill">
                                <option>All</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                        </div>
                    </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='table-responsive p-3'>
            <table class='table table-border '>
                <thead>
                    <tr class='tex-g'>
                        <th>#</th>
                        <th>Name</th>
                        <th class='text-end  pe-4'>Default</th>
                        <th  class='text-end  pe-4'>Status</th>
                        <th class='text-end'>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @for($i=0; $i< 5 ; $i++)
                    <tr>
                        <td>01</td>
                        <td  class='align-middle w-25 text-dark fw-bold'>
                           <p>Name</p>
                        </td>
   
                        <td class='align-middle '>
                        <!-- switch start  -->
                        <div class=" d-flex float-end ms-5">
                            <div class='ps-5'>
                                <label class="switch">
                                <input type="checkbox" id="togBtn">
                                <div class="slider round">
                                <!--ADDED HTML -->
                                <span class="on">ON</span>
                                <span class="off">OFF</span>
                                </div>
                                </label>
                            </div>  
                        </div> 
                        </td>
                        <td class='align-middle '>
                        <!-- switch start  -->
                        <div class=" d-flex float-end ms-5">
                            <div class='ps-5'>
                                <label class="switch">
                                <input type="checkbox" id="togBtn">
                                <div class="slider round">
                                <!--ADDED HTML -->
                                <span class="on">ON</span>
                                <span class="off">OFF</span>
                                </div>
                                </label>
                            </div>  
                        </div> 
                        </td>
                        <!-- switch end  -->
                        <td class='text-lg-end align-middle edit_M'>
                            <span class='px-2'>
                                <a class='text-decoration-none px-1' href="#"> 
                                <i class="bi bi-gear bg-light_c round1 circul"></i>
                                <span class='px-1 text-muted e-text'>Setting</span>
                                </a>
                            </span>
                        </td>
                    </tr>     
                    @endfor 
                </tbody>
            </table>
        </div>
    </div>
@endsection