@extends('layouts.dashboard')

@section('content')
<style>
    .switch {
        display: inline-flex;
    }

    .switch input[type=checkbox] {
        height: auto;
        width: 0;
        visibility: hidden;
    }

    .switch input[type=checkbox]:checked+label {
        background: green;
        margin-bottom: 0px;
    }

    .switch input[type=checkbox]:checked+label::after {
        left: calc(100% - 4px);
        transform: translateX(-100%);
    }

    .switch label {
        cursor: pointer;
        width: 48px;
        height: 24px;
        background: grey;
        display: block;
        border-radius: 24px;
        position: relative;
    }

    .switch label::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 4px;
        width: 16px;
        height: 16px;
        background: white;
        border-radius: 16px;
        transition: 0.3s;
    }

    td {
        vertical-align: middle !important;
    }

    .card-title {
        float: none !important;
        margin-bottom: 10px;
    }
</style>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>{{ $user->name }} : Sidebar Options</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">User</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<section class="content">
    <div class="container-fluid">
        @if (Session::has('message'))
        <div class="col-sm-12">
            <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                role="alert">
                {{ Session::get('message') }}
            </div>
        </div>
        @endif

        <!-- /.row -->


        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title text-info font-weight-bold">Configuration</h5>
                    <div class="row g-3">

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-body text-center">
                        <h5 class="card-title text-info font-weight-bold">Admin Access Overview</h5>
                        <canvas id="accessChart" width="200" height="200"></canvas>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title text-info font-weight-bold">Admin Access</h5>
                        <div class="row g-3">
                            @foreach (\App\Models\MenuAccess::options() as $key => $label)
                            @php
                            $access = \App\Models\MenuAccess::where('user_id', $user->id)
                            ->where('option', $key)
                            ->first();
                            $isActive = $access && $access->is_active;
                            @endphp

                            <div class="col-md-6">
                                <div class="d-flex justify-content-between align-items-center border p-2 rounded shadow-sm mb-2">
                                    <span>{{ $label }}</span>
                                    <div class="switch">
                                        <input
                                            type="checkbox"
                                            class="menu-toggle"
                                            data-option="{{ $key }}"
                                            data-id="{{ $user->id }}"
                                            {{ $isActive ? 'checked' : '' }}
                                            id="toggle_{{ $key }}_{{ $user->id }}">
                                        <label for="toggle_{{ $key }}_{{ $user->id }}"></label>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- /.row -->

    </div><!-- /.container-fluid -->
</section>



@endsection

@push('scripts')

<script>
    $('.menu-toggle').on('change', function() {
        let option = $(this).data('option');
        let id = $(this).data('id');
        let is_active = $(this).is(':checked') ? 1 : 0;

        $.ajax({
            url: '{{ route("menu-access.toggle") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                option: option,
                is_active: is_active,
                user_id: id // Replace with dynamic user_id if needed
            },
            success: function(res) {
                console.log('Saved:', res.message);
            }
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const totalOptions = {{ count(\App\Models\MenuAccess::options()) }};
        const toggleInputs = document.querySelectorAll('.menu-toggle');

        // Count initially checked inputs
        const countActive = () => {
            return Array.from(toggleInputs).filter(input => input.checked).length;
        };

        let chart = new Chart(document.getElementById('accessChart'), {
            type: 'doughnut',
            data: {
                labels: ['Active', 'Inactive'],
                datasets: [{
                    data: [countActive(), totalOptions - countActive()],
                    backgroundColor: ['#28a745', '#dc3545'],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    legend: {
                        position: 'bottom'
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return `${context.label}: ${context.parsed} items`;
                            }
                        }
                    }
                }
            }
        });

        // Live update when toggles change
        toggleInputs.forEach(input => {
            input.addEventListener('change', () => {
                const activeCount = countActive();
                chart.data.datasets[0].data = [activeCount, totalOptions - activeCount];
                chart.update();
            });
        });
    });
</script>

@endpush