@extends('adminlte::page')

@section('title', 'OWL CRM Dashboard')

@section('content_header')
    <h1>Roles</h1>
@stop

@section('content')
    @if (session('error'))
        <h6 class="alert alert-danger">
            {{ session('error') }}
        </h6>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    {{-- <p>Welcome to the OWL CRM admin panel.</p> --}}
    <div class="row justify-content-between mb-5">
        <div class="col-auto">
            <a href="{{ route('role.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Roles
            </a>
        </div>
        <div class="col-auto">
            {{-- <a href="{{ route('project.update', $project->id) }}" class="btn btn-primary">
                <i class="fas fas fa-save"></i> Save Project
            </a> --}}
        </div>
        <div class="col-auto">

            <a href="{{ route('role.edit', $user_role->id) }}" class="btn btn-primary">
                <i class="fas fa-pencil-alt"></i> Edit Roles
            </a>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete">
                <i class="fa fa-trash-alt"></i> Delete Roles
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-sm-6">
            <div class="card card-dark">
                <div class="card-header">
                    <h3 class="card-title">Roles Information</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                        {{--  <button type="button" class="btn btn-tool" data-card-widget="remove">
                            <i class="fas fa-times"></i>
                        </button>  --}}
                    </div>
                </div>


                <div class="card-body">
                    <ul class="list-group list-group-flush">

                        <li class="list-group-item"><b>Name:</b> {{ $user_role->name }}
                        </li>
                        <li class="list-group-item"><b>Description:</b> {{ $user_role->description }}
                        </li>
                        <li class="list-group-item"><b>Created
                                By:</b>


                            {{ $user_role->user ? $user_role->user->first_name . $user_role->user->last_name : 'null' }}
                        </li>


                        @if ($user_modules)
                            @foreach ($user_modules as $module)
                                @php
                                    // Filter permissions to show only the checked ones
                                    $checkedPermissions = $module->permissions->filter(function ($permission) use (
                                        $user_role_permission,
                                    ) {
                                        return in_array($permission->id, $user_role_permission);
                                    });
                                @endphp

                                @if ($checkedPermissions->count() > 0)
                                    <li class="list-group-item"><b>Set Permission
                                            are:</b>
                                        <div class="card-body border border-light border-2 mt-5">
                                            <div class="row mt-4 mb-4">
                                                <div class="col-6 md-6">
                                                    <h4 class="heading">{{ $module->name }}</h4>
                                                    <input type="hidden" name="module[]" value="{{ $module->id }}">
                                                </div>
                                            </div>

                                            <div class="row">
                                                @foreach ($checkedPermissions as $data)
                                                    <div class="col-6 md-6">
                                                        <div class="form-check form-switch">
                                                            <input class="form-check-input permissions" type="checkbox"
                                                                role="switch" name="permission[]"
                                                                id="flexSwitchCheckDefault-{{ $module->id }}"
                                                                value="{{ $data->id }}"
                                                                {{ in_array($data->id, $user_role_permission) ? 'checked' : '' }}>
                                                            <label class="form-check-label"
                                                                for="flexSwitchCheckDefault-{{ $module->id }}">

                                                                <h6 class="heading">{{ $data->title ?? '' }}</h6>

                                                            </label><br>
                                                            <small class="paragraph">Modify what individuals on this
                                                                role
                                                                can
                                                                do</small>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                @endif
                            @endforeach
                        @endif
                        </li>

                    </ul>
                </div>

            </div>


        </div>

    </div>

    <!-- Modal -->
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ $user_role->name }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>This will delete this Roles permanently</p>
                    <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                    <form method="POST" action="{{ route('role.destroy', $user_role->id) }}">
                        <!-- CSRF Token -->
                        @csrf

                        <!-- Hidden input to simulate DELETE method -->
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-danger" id="delete_btn" data-id="' . $row->id . '">Yes,
                            Delete</button>
                    </form>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    @stop

    @section('css')
        {{-- Add here extra stylesheets --}}
        {{-- <link rel="stylesheet" href="/css/admin_custom.css"> --}}
    @stop

    @section('js')
        <script>
            console.log("Hi, I'm using the Laravel-AdminLTE package!");
        </script>
    @stop