@include('layouts.role')
        
	    
	@extends('layouts.master')
    
	@section('title', 'Registration Period')
    
    @section('style')
    	<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
        
		<style>
			ul.pagination li { padding:5px 10px 5px 10px; border:1px #ddd solid }
			ul li.active { background-color:#ddd }
			.search { border:#007bff 1px solid; height:24px; border-radius:0px }
			
			.switch{
			  --uiSwitchSize: var(--switchSize, 64px);
			  --uiSwitchBgColor: var(--switchBgColor, #ddd);
			  --uiSwitchBorderColor: var(--switchBgColorFocus, #e63725);
			  --uiSwitchBgColorActive: var(--switchBgColorActive, #ff7c03);
			  --uiSwitchBorderColorActive: var(--switchBorderColorActive, #fff);
			  --uiSwitchBorderColorFocus: var(--switchBgColorFocus, #e63725);
			  --uiSwitchButtonBgColor: var(--switchButtonBgColor, #fff);  
			  
			  display: inline-block;
			  position: relative;
			  cursor: pointer;
			  -webkit-tap-highlight-color: transparent;
			}
			
			.switch__label{
			  display: block;
			  width: 100%;
			  height: 100%;
			}
			
			.switch__toggle{
			  width: 0;
			  height: 0;
			  opacity: 0;
			  
			  position: absolute;
			  top: 0;
			  left: 0;
			}
			
			.switch__toggle:focus ~ .switch__label{
			  box-shadow: 0 0 0 var(--uiSwitchThickFocus, 4px) var(--uiSwitchBorderColorFocus);
			}
			
			.switch__toggle:checked:focus ~ .switch__label{
			  box-shadow: 0 0 0 var(--uiSwitchThickFocus, 4px) var(--uiSwitchBorderColorActive);
			}
			
			.switch__label:before, .switch__label:after{
			  content: "";
			  cursor: pointer;
			
			  position: absolute;
			  top: 0;
			  left: 0;
			}
			
			.switch__label:before{
			  width: 100%;
			  height: 100%;
			  box-sizing: border-box;
			  background-color: var(--uiSwitchBgColor);
			}
			
			.switch__label:after{
			  top: 50%;
			  z-index: 3;
			  transition: transform .4s cubic-bezier(0.44,-0.12, 0.07, 1.15);
			}
			
			/* type 1 */
			
			.switch_type1{
			  --uiSwitchBorderRadius: var(--switchBorderRadius, 60px);
			  
			  width: var(--uiSwitchSize);
			  height: calc((var(--uiSwitchSize) / 2));
			  border-radius: var(--uiSwitchBorderRadius);    
			  background-color: var(--uiSwitchBgColorActive);
			}
			
			.switch_type1 .switch__label{
			  border-radius: var(--uiSwitchBorderRadius);    
			}
			
			.switch_type1 .switch__label:before{
			  border-radius: var(--uiSwitchBorderRadius);
			  transition: opacity .2s ease-out .1s, transform .2s ease-out .1s;
			  transform: scale(1);
			  opacity: 1;
			}
			
			.switch_type1 .switch__toggle:checked ~ .switch__label:before{
			  transform: scale(0);
			  opacity: .7;
			}
			
			.switch_type1 .switch__label:after{
			  width: calc(var(--uiSwitchSize) / 2);
			  height: calc(var(--uiSwitchSize) / 2);
			  transform: translate3d(0, -50%, 0);
			  
			  background-color: var(--uiSwitchButtonBgColor);
			  border-radius: 100%;
			  box-shadow: 0 2px 5px rgba(0, 0, 0, .3);  
			}
			
			.switch_type1 .switch__toggle:checked ~ .switch__label:after{
			  transform: translate3d(100%, -50%, 0);
			}
			
			/* demo styles for switch */
			
			.switch{
			  --switchSize: 50px;
			}
			
			.switch_type2{
			  --switchBgColorActive: #e85c3f;
			  --switchBgColorFocus: #d54b2e;
			}
        </style>
	@endsection
    
    @section('script')
    	<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
        
    	<script>
			$(document).ready(function() {
				

			});
        </script>
    @endsection

    @section('content')
    
	@include('layouts.header')


	<div id="home-p" class="home-p pages-head3 text-center">
		<div class="container">
			<h1 class="wow fadeInUp" data-wow-delay="0.1s">Registration Period</h1>
		</div>
	</div> 
    
	<br><br><br>
    
	<section id="cart" class="cart">
		<div class="container">
        
        	<h4 style="font-weight:bold">Registration Period</h4>
			<div class="heading-border-light"></div>
			<br>

			<form method='post' action='{{ url('/registrationsetsave') }}' enctype='multipart/form-data' class='simple-form listitems'>
				{{ csrf_field() }}
                
                <table id="cart" class="table table-hover table-condensed" width="100%">
                    <thead>
                        <tr>
                            <th style="width:70%">Name of Registration</th>
                            <th style="width:30%">Settings</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($set as $key=>$setting)
                            <tr>
                                <td>{{ ++$key.'. '.$setting->registrationset_name }}</td>
                                <td>
                                	<input type="hidden" name="{{ $setting->registrationset_code }}_id" value="{{ $setting->registrationset_id }}">
                                    <label class="switch switch_type1" role="switch">
                                        <input type="checkbox" class="switch__toggle" name="{{ $setting->registrationset_code }}_status" value="1" 
										>
                                        <span class="switch__label"></span>
                                    </label>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                
                <br>
                
                <div align="center">
					<input class="btn btn-general btn-outline-primary" name="submit" type="submit" value="Save" style="cursor:pointer">
				</div>
			</form>		


		</div>
	</section>

	<br><br><br>
    
	@include('layouts.footer')
    
	@endsection