@extends('backend.layout.main') @section('content')

@push('css')
<style>
/* Base container alignment */
.custom-control.custom-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* Switch track */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #7c5cc4; /* Green when active */
    border-color: #7c5cc4;
}

.custom-control-input:not(:checked) ~ .custom-control-label::before {
    background-color: #ddd; /* Red when inactive */
    border-color: #ddd;
}

/* Switch knob */
.custom-control-label::before {
    height: 22px;
    width: 40px;
    border-radius: 20px;
    background-color: #ccc;
    border: 1px solid #aaa;
    transition: background-color 0.25s, border-color 0.25s;
}

.custom-control-label::after {
    top: 5px;
    left: 2px;
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease-in-out;
}

/* Move knob when checked */
.custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(18px);
}

/* Accessibility focus outline */
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Optional: hover effect */
.custom-control-label:hover::before {
    filter: brightness(0.95);
}

/* Optional: disable text selection */
.custom-control-label {
    user-select: none;
}
</style>
@endpush

<x-success-message key="message1" />
<x-success-message key="message2" />
<x-error-message key="message3" />
<x-error-message key="not_permitted" />

@if(session()->has('message1'))
    <div class="alert alert-success alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{!! session()->get('message1') !!}</div>
@endif
@if(session()->has('message2'))
    <div class="alert alert-success alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('message2') }}</div>
@endif
@if(session()->has('message3'))
    <div class="alert alert-danger alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('message3') }}</div>
@endif
@if(session()->has('not_permitted'))
    <div class="alert alert-danger alert-dismissible text-center"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>{{ session()->get('not_permitted') }}</div>
@endif

<section>
    @if(in_array("users-add", $all_permission))
        <div class="container-fluid">
            <a href="{{route('user.create')}}" class="btn btn-info"><i class="dripicons-plus"></i> {{__('db.Add User')}}</a>
        </div>
    @endif
    <div class="table-responsive">
        <table id="user-table" class="table">
            <thead>
                <tr>
                    <th class="not-exported"></th>
                    <th>{{__('db.UserName')}}</th>
                    <th>{{__('db.Email')}}</th>
                    <th>{{__('db.Company Name')}}</th>
                    <th>{{__('db.Phone Number')}}</th>
                    <th>{{__('db.Role')}}</th>
                    <th>{{__('db.status')}}</th>
                    <th class="not-exported">{{__('db.action')}}</th>
                </tr>
            </thead>
            <tbody>
                @foreach($lims_user_list as $key=>$user)
                <tr data-id="{{$user->id}}">
                    <td>{{$key}}</td>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email}}</td>
                    <td>{{ $user->company_name}}</td>
                    <td>{{ $user->phone}}</td>