@extends('operations.layout.mainlayout')

@section('content')
    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
            color: black;
        }
    </style>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;"> Role Information</h1>

                    </div><!-- /.col -->
                    <div class="col-sm-6">

                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->

        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="mx-auto col-md-10">
                        <!-- /.card -->

                        <div class="alert alert-danger" @if(empty(Request::query('m'))) style="display: none" @endif>
                            <span>{{Request::query('m')}}</span>
                        </div>
                        <div class="card">

                            <!-- /.card-header -->
                            <div class="card-body">
                                <form method="post" action="/operations/role">
                                    <input required type="hidden" name="role_id"
                                           value="@if(!empty($role->ID) && !isset($role['is_clone'])){{$role->ID}}@endif">
                                    <p style="color:var(--blazma-primary);font-weight: 600">Role Information</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">Role Name</span>
                                                </div>
                                                <input required type="text" class="form-control" name="name_en"
                                                       value="@if(!empty($role->NAME)){{$role->NAME}}@endif"/> <br/>

                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-group mb-3">
                                                <div class="input-group-prepend">
                                                    <span class="input-group-text">Role Name -Arabic-</span>
                                                </div>
                                                <input required type="text" class="form-control" name="name_ar"
                                                       value="@if(!empty($role->NAME_AR)){{$role->NAME_AR}}@endif"/>
                                                <br/>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <div class="col-md-6">
                                            <label for="redirect_url">Role Redirect URL (When Login)</label>
                                            <select name="redirect_url" required id="redirect_url" class="form-control">
                                                <option value="" disabled selected>Select Url</option>
                                                @foreach($redirectUrls as $url)
                                                    <option value="{{$url->ID}}" data-p-id="{{$url->PERMISSION_ID}}" @if($role->REDIRECT_URL_ID == $url->ID) selected @endif>{{$url->permission->NAME}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6">
                                            <label for="session_time">Session Time (minutes)</label>
                                            <input type="number" name="session_time" class="form-control"
                                                   value="{{ isset($role->SESSION_TIME) ? $role->SESSION_TIME : '' }}" />
                                        </div>
                                    </div>
                                    <div class="row mb-2">
                                        <!-- Add discount input field -->
                                        <div class="col-md-6">
                                            <label for="discount">Discount (%)</label>
                                            <input type="number" name="discount" class="form-control"
                                                   value="@if(!empty($role->DISCOUNT)){{$role->DISCOUNT}}@endif" step="0.01" min="0" max="100"/>
                                        </div>
                                    </div>

                                    <h6 style="color:var(--blazma-text);font-weight: 600" class="mt-4">OTP Authentication Settings</h6>
                                    <div class="row mb-2">
                                        <!-- SMS OTP Checkbox -->
                                        <div class="col-md-6">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="enable_otp_sms" id="enable_otp_sms"
                                                       @if(!empty($role->ENABLE_OTP_SMS) && $role->ENABLE_OTP_SMS) checked @endif>
                                                <label class="custom-control-label" for="enable_otp_sms">Enable SMS OTP Authentication</label>
                                                <small class="form-text text-muted">Require SMS OTP for users with this role</small>
                                            </div>
                                        </div>
                                        <!-- Email OTP Checkbox -->
                                        <div class="col-md-6">
                                            <div class="custom-control custom-switch">
                                                <input type="checkbox" class="custom-control-input" name="enable_otp_email" id="enable_otp_email"
                                                       @if(!empty($role->ENABLE_OTP_EMAIL) && $role->ENABLE_OTP_EMAIL) checked @endif>
                                                <label class="custom-control-label" for="enable_otp_email">Enable Email OTP Authentication</label>
                                                <small class="form-text text-muted">Require Email OTP for users with this role</small>
                                            </div>
                                        </div>
                                    </div>

                                    <h6 style="color:var(--blazma-text);font-weight: 600" class="mt-4">Role Permissions</h6>
                                    <div class="row" style="margin-bottom: 20px">

                                    <style>
                                        .container{
                                            display: flex;
                                            flex-wrap: wrap;
                                            flex-direction: row;
                                            align-items: stretch;
                                            justify-content: space-around;
                                        }
                                        .card-permission{
                                            max-height: 20rem;
                                            overflow-y: auto;
                                            box-shadow: 0px 4px 43px rgb(0 0 0 / 4%);
                                        }
                                        .checked_permissions:after{
                                            background: red;
                                        }
                                        .checked_permissions:before{
                                            background: red;
                                        }

                                        .style-scrollbar-11::-webkit-scrollbar-track
                                        {
                                            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                                            background-color: #F5F5F5;
                                            border-radius: 10px;
                                        }

                                        .style-scrollbar-11::-webkit-scrollbar
                                        {
                                            width: 3px;
                                            background-color: #F5F5F5;
                                        }

                                        .style-scrollbar-11::-webkit-scrollbar-thumb
                                        {
                                            background-color: var(--blazma-primary);
                                            border-radius: 10px;
                                        }
                                    </style>


                                    @php
                                        Tree($groupOfParents, $role,$profile);
                                    @endphp

                                    @php

                                            function Tree($elements, $role,$profile = null) {
                                                foreach ($elements as $element) {
                                                    if ($element->text == 'Simple Booking' && empty($profile->ENABLE_SIMPLE_BOOKING)) continue;

                                    @endphp

                                        @if($element->GROUP_PARENT == null)
                                            <div class="card p-2 col-md-3 m-5 card-permission style-scrollbar-11">
                                                @endif
                                    <div class="item" >
                                        @if($element->GROUP_PARENT == null)
                                            <div class="card-header font-weight-bold mb-3" style="color: #007bff;">
                                            {{$element->text}}
                                            </div>
                                        @else
                                            {{$element->text}}
                                        @endif

                                @php

                                if ($element->permission->count() > 0)
                                    {
                                        echo "<ul>";
                                        foreach ($element->permission as $permission)
                                            {
                                                if(isset($role->ID) && in_array($role->ID, $permission->role->pluck('ROLE_ID')->toArray()))
                                                    echo '
                                                    <div class="custom-control custom-switch">
                                                        <input checked type="checkbox" class="custom-control-input checked_permissions" name="checked_permissions[]" value="'.$permission->ID.'" id="p-'.$permission->ID.'" >
                                                        <label class="custom-control-label" for="p-'.$permission->ID.'" style="margin-right: 10px;font-weight: 300;">'.$permission->NAME .'</label>
                                                    </div><small class="text-danger"> '.$permission->P_NOTE.'</small>';
                                                else
                                                     echo '
                                                    <div class="custom-control custom-switch">
                                                        <input type="checkbox" class="custom-control-input checked_permissions" name="checked_permissions[]" value="'.$permission->ID.'" id="p-'.$permission->ID.'" >
                                                        <label class="custom-control-label" for="p-'.$permission->ID.'" style="margin-right: 10px;font-weight: 300;">'.$permission->NAME .'</label>
                                                    </div> <small class="text-danger"> '.$permission->P_NOTE.'</small>';
                                            }
                                         echo "</ul>";
                                    }
                                @endphp
				            <ul>
				                @php
                                        if ($element->inc()->count() > 0) {
                                            Tree($element->inc, $role, $profile);
                                        }
                                @endphp
				            </ul>
                                    </div>
                                                @if($element->GROUP_PARENT == null)
                                                    </div>
                                                        @endif
                                    @php
                                        }
                                    }
                                    @endphp
                                    </div>

                                    @if((isset($role->NAME) && $role->PROFILE_ID!=null) or (isset($role['is_clone']) && $role['is_clone']==true) or (isset($role['is_new']) && $role['is_new']==true) )
                                        <div class="row">
                                            <div class="col" style="text-align: center">
                                                <input type="submit" class="btn btn-info"
                                                       value="@if(!empty($role->NAME) && !isset($role['is_clone'])) Edit Role @elseif(isset($role['is_clone'])) Clone Role @else Add Role @endif"/>
                                            </div>
                                        </div>
                                        @endif
                                    </form>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.card -->
                        </div>
                        <!-- /.col -->
                    </div>
                    <!-- /.row -->
                </div>
                <!-- /.container-fluid -->
            </section>

            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->


@endsection

@section('warehouse_scripts')

    <script>
        @if(isset($role->ID) && $role->PROFILE_ID==null && !isset($role['is_clone']))
        $('input').prop('disabled',true);
        $('select').prop('disabled',true);
        @endif

        $('#redirect_url').select2().on('change', function (e) {
            let redirectUrlId = $(this).val();
            let permissionId = $(this).find(":selected").data("p-id");
            let permissions = "{{$role->permissions->pluck('ID')}}";

            if(!jQuery.inArray(permissionId, permissions) !== -1)
            {
                $('#p-'+permissionId).prop('checked', true)
            }
        });

    </script>
@endsection