@extends('layouts.app') {{-- Include the layout --}}

@section('content')
<style>
.box {
      width: 15px;
      height: 15px;
      display: inline-block;
      margin-left: 5px;
      
    }

    .box-primary {
      background-color: #59edbb; /* Bootstrap primary color */
      --bs-table-accent-bg: #59edbb !important;
    }

    .box-secondary {
      background-color: #59b6fc; /* Bootstrap success color */
      --bs-table-accent-bg: #59b6fc !important;
    }

    .box-info {
      background-color: #fec960; /* Bootstrap info color */
      --bs-table-accent-bg: #fec960 !important;
    }
</style>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center sticky-top" style="background-color: #f8f9fa;top: 55px; z-index: 1000;">
                    <span>Dashboard Rights</span>
                        
                </div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateDashboardRights') }}">
                        @csrf
                        
                        <table class="table table-bordered text-center table-sm">
                            <thead>
                                <tr style="">
                                    <th>Sr.</th>
                                    <th>Name</th>
                                    <th>Image</th>
                                    <th>Active</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php
                                    $mcount = 0;
                                @endphp
                                @foreach($dashboardlist as $list)
                                    @php
                                        $checked = $list->inactive == 0 ? 'checked' : '';
                                        $mainUrl = url('/');
                                        $imagesrc = $list->imageurl != '' ? (string)$mainUrl.$list->imageurl : "";
                                    @endphp
                                    <tr>
                                        <td>{{ ++$mcount }}</td>
                                        <td class="text-left">{{ $list->label }}</td>
                                        <td class="text-center">
                                            <img src="{{ $imagesrc }}" width="80" style="border:2px solid #f0f0f0">
                                        </td>
                                        <td>
                                            <div class="mt-0 form-check">
                                                <input type="checkbox" class="form-check-input" name="activecheck{{ $list->id }}" id="module-checkbox-{{ $list->id }}" onClick="clickModule({{ $list->id }})" {{ $checked }}>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
    
                        
                        <br>
                        
                        <div style="text-align:right">
                            <button type="submit" class="btn btn-success" id="savebtn">Update</button>
                            
                        </div> 
                    </form>
                    
                </div>
            </div>
        </div>
    </div>
</div>    


<script>

function clickModule(id){
    
    var moduleCheckbox = $('#module-checkbox-' + id);
    var moduleChecked = moduleCheckbox.prop('checked');

    $('.cat-checkbox-' + id).prop('checked', moduleChecked);
}

function clickCategory(id) {
    
    var catCheckbox = $('[name="activecheck' + id + '"]');
    var catChecked = catCheckbox.prop('checked');

    $('.subcat-checkbox-' + id).prop('checked', catChecked);
}



</script>

@endsection