@extends('admin.layout')
<style>
    .search_bar {
        position: relative;
    }

    .search_bar a {
        position: absolute;
        top: 8px;
        right: 10px;
    }

    .custom-control-green .custom-control-input:checked~.custom-control-label::before {
        color: #fff;
        border-color: #237840;
        background-color: #237840;
    }

    .custom-control-grey .custom-control-input:checked~.custom-control-label::before {
        color: #fff;
        border-color: #b0b0b0;
        background-color: #b0b0b0;
    }

    .custom-control-red .custom-control-input:checked~.custom-control-label::before {
        color: #fff;
        border-color: #ea5455;
        background-color: #ea5455;
    }
</style>
@section('main')
    <div class="content-header row">
    </div>
    <div class="content-body">
        <!-- Dashboard Ecommerce Starts -->
        <section id="dashboard-ecommerce">
            <div class="content-header row mb-1">
                <div class="row breadcrumbs-top">
                    <div class="col-12">

                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="" class="router-link-active" target="_self"><svg
                                            xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round"
                                            class="align-text-top feather feather-home">
                                            <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                                            <polyline points="9 22 9 12 15 12 15 22"></polyline>
                                        </svg></a></li>
                                <li class="breadcrumb-item"><a href="{{ route('superAdmin.manage.admin.permission') }}" target="_self" class="">
                                        Manage
                                        permission </a></li>
                                <li class="breadcrumb-item active"><span aria-current="location"> Permission User </span>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="content-body">
            <section class="app-user-view">
                <div class="row">
                    <!-- User Card starts-->
                    <div class="col-xl-12">
                        <a href="{{ route('superAdmin.manage.admin.permission') }}" class="mb-2"><i class="fa fa-arrow-left mr-1"></i> Back</a>
                        <div class="card user-card border-primary mt-2">
                            <div class="card-body">
                                <div class="row">
                                    <div
                                        class="col-xl-6 col-lg-12 d-flex flex-column justify-content-between border-container-lg my-auto">
                                        <div class="user-avatar-section">
                                            <div class="d-flex justify-content-start">
                                                <div class="user_avtar" height="104" width="104">{{ $initials }}
                                                </div>
                                                <div class="d-flex flex-column ml-2 my-auto">
                                                    <div class="user-info mb-1">
                                                        <h4 class="mb-0">{{ $userName }}</h4>
                                                        <span class="card-text">{{ $vEmail }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="col-xl-6 col-lg-12 mt-2 mt-xl-0">
                                        <div class="user-info-wrapper">
                                            <div class="d-flex flex-wrap my-50">
                                                <div class="user-info-title">
                                                    <i data-feather="check" class="mr-1"></i>
                                                    <span
                                                        class="card-text user-info-title font-weight-bold mb-0">Status:</span>
                                                </div>
                                                <p class="card-text mb-0 ml-2">{{ $eStatus }}</p>
                                            </div>
                                            <div class="d-flex flex-wrap my-50">
                                                <div class="user-info-title">
                                                    <i data-feather="star" class="mr-1"></i>
                                                    <span
                                                        class="card-text user-info-title font-weight-bold mb-0">Designation:</span>
                                                </div>
                                                <p class="card-text mb-0 ml-2">{{ $vDesignation }}</p>
                                            </div>

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

                </div>
                <!-- User Card & Plan Ends -->

                <!-- User Timeline & Permissions Starts -->
                <div class="row">

                    <!-- User Permissions Starts -->
                    <div class="col-md-12">
                        <!-- User Permissions -->
                        <div class="card border-primary">

                            <div class="d-flex"
                                style="justify-content: space-between;align-items:center;    background: #476470;">
                                <h6 class="py-1 mx-1 mb-0 font-medium-2">
                                    <i data-feather="lock" class="font-medium-3 mr-25 text-white"></i>
                                    <span class="align-middle text-white">Manage Permissions</span>
                                </h6>

                            </div>

                            <div class="table-responsive">
                                <table class="table table-striped table-borderless">

                                    <tbody>
                                        @foreach ($permission as $key => $value)
                                            <tr>
                                                <th>{{ $value['vPermissionType'] }}</th>
                                                @foreach ($value['permission'] as $key2 => $value2)
                                                    @php
                                                        $class = '';
                                                        $isChecked = false;
                                                        if (in_array($value2['id'], $addedPermission ?? [])) {
                                                            $class = 'custom-control-green';
                                                            $isChecked = true;
                                                        } elseif (in_array($value2['id'], $removedPermission ?? [])) {
                                                            $class = 'custom-control-red';
                                                            $isChecked = true;
                                                        } elseif (in_array($value2['id'], $commonPermission ?? [])) {
                                                            $class = 'custom-control-grey';
                                                            $isChecked = true;
                                                        }
                                                    @endphp
                                                    <td>
                                                        <div class="custom-control custom-checkbox {{ $class }}">
                                                            <input type="checkbox" class="custom-control-input"
                                                                id="permission_{{ $value2['id'] }}"
                                                                name="permission[{{ $value2['name'] }}]"
                                                                @if ($isChecked) checked @endif>
                                                            <label class="custom-control-label"
                                                                for="permission_{{ $value2['id'] }}">{{ $value2['vLable'] }}</label>
                                                        </div>
                                                    </td>
                                                @endforeach
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </section>

        </div>

    </div>
@endsection
@section('scripts')
@endsection