@extends('layout.adminapp')
@section('content')
<style>
    .select2-results__option[aria-selected=true] {
    display: none;
}
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}
</style>
    <div class="container-fluid">
        <div class="card o-hidden border-0 shadow-lg my-5">
        <!-- Outer Row -->
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9 my-5">

                    <!-- Nested Row within Card Body -->
                    <div class="row d-flex justify-content-center">
                        <div class="col-lg-10">
                            <div class="p-5">
                                <div class="text-center">
                                    <h1 class="h4 text-gray-900 mb-4">Create Admin</h1>
                                </div>
                                @if ($errors->any())
                    	      		<div class="alert alert-danger">
                                    <ul>
                                      @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                      @endforeach
                                    </ul>
                                </div>
                                @endif
                                @if (Session::has('status'))
                                    <div class="alert alert-success">
                                        <ul>
                                            <li>{{ Session::get('status') }}</li>
                                        </ul>
                                    </div>
                                @endif
                                <form method="POST" action="{{route('create-admin')}}">
                                    @csrf
                                    
                                    <div class="form-group">
                                        <label for="name">Name</label>
                                        <input type="text" class="form-control form-control-user" name="name" required placeholder="Full Name">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Admin Email</label>
                                        <input type="email" class="form-control form-control-user" name="email" required placeholder="Email...">
                                    </div>
                                    <div class="form-group">
                                        <label for="name">Choose Password</label>
                                        <input type="password" class="form-control form-control-user" name="password" placeholder="Password" required>
                                    </div>
                                    <div class="form-group">
                                        <input type="checkbox" name="super" value="1" id="checkbox">
                                        <label for="name">Make Super Admin</label>
                                    </div>
                                    <div class="row">
                                    <div class="col-4">
                                        View Without any action
                                        <label class="switch">
                                        <input type="checkbox" id="checkbox_view">
                                        <div class="slider round"></div>
                                        </label>
                                        
                                    </div>
                                    </div>
                                    <div class="form-group mt-2" id="to-hide">
                                        <label for="name"><strong>Select Permissions</strong></label>
                                        {{--<!--<select name="permission_id[]" id="permission" multiple="multiple" class="form-control form-control-lg bg-light js-example-theme-multiple contact-form-field" >-->
                                        <!--    @foreach ($permissions as $item)-->
                                        <!--        <option value="{{$item['id']}}">{{$item['name']}}</option>-->
                                        <!--    @endforeach-->
                                        <!--</select>-->--}}
                                        <div class="row">
                                            @foreach ($permissions as $key => $item)
                                            <div class="col-4">
                                                <div>{{$item['description']}}?</div>
                                                <label class="switch">
                                                <input type="checkbox" name="permission_id[]" onclick="permissionCheck(this, {{$item['id']}});" value="{{$item['id']}}" id="togBtn{{$key}}">
                                                <div class="slider round"></div>
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    
                                    
                                    <button class="btn btn-primary btn-user btn-block" type="submit">
                                        Send
                                    </button>

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

            </div>

        </div>

    </div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
    <script>
    
    function permissionCheck(el, permission_id)
    {
        if($(el).is(":checked")){
            // console.log('check')
            if((permission_id == 4) || (permission_id == 7) || (permission_id == 9) || (permission_id == 11) || (permission_id == 15) || (permission_id == 31) || (permission_id == 32) || (permission_id == 33) || (permission_id == 37))
            {
                swal({
                  title: `Permission Interconnection Alert`,
                  text: "This permission is dependent on its view etc. make sure to check that also", 
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
              })
              .then((willDelete) => {
                if (willDelete) {
                }
                  else{
                      $(el).click();
                  }
              })
            }
        }
    }
    
    
        $(document).ready(function(){
            $("#permission").select2({
        // theme: "classic",
        placeholder: "Select permissions",
          allowClear: true
        });
        $("#checkbox").click(function(){
            if($(this).is(":checked")){
                $("#to-hide").hide();
            }
            else if($(this).is(":not(:checked)")){
                $("#to-hide").show();
            }
        });
        $("#checkbox_view").click(function(){
            if($(this).is(":checked")){
                $("#togBtn0").click();
                $("#togBtn2").click();
                $("#togBtn4").click();
                $("#togBtn5").click();
                $("#togBtn7").click();
                $("#togBtn9").click();
                $("#togBtn13").click();
            }
            else if($(this).is(":not(:checked)")){
                $("#togBtn0").click();
                $("#togBtn2").click();
                $("#togBtn4").click();
                $("#togBtn5").click();
                $("#togBtn7").click();
                $("#togBtn9").click();
                $("#togBtn13").click();
            }
        });
        })
    </script>
@endsection