@extends('layouts.master')

@section('content')
<div id="content-page" class="content-page">
    <div class="container-fluid">
       <div class="row">
          <div class="col-sm-12 col-lg-12">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">State</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, ex ac venenatis mollis, diam nibh finibus leo</p>
                   <div class="custom-control custom-switch custom-control-inline">                              
                      {!! Form::checkbox('check',null ,false, array('class'=>"custom-control-input")) !!}   
                      {!! Form::label('false', 'false / Inactive', array('class'=>'custom-control-label')) !!}
                   </div>
                   <div class="custom-control custom-switch custom-control-inline">
                    {!! Form::checkbox('check',null, array('class'=>"custom-control-input")) !!}   
                    {!! Form::label('false', 'true / active', array('class'=>'custom-control-label')) !!}
                    
                   </div>
                   <div class="custom-control custom-switch custom-control-inline">
                    {!! Form::checkbox('check',null ,false, array('class'=>"custom-control-input")) !!}   
                    {!! Form::label('false', 'disable / active', array('class'=>'custom-control-label','disabled'=>true)) !!}
                      
                   </div>
                   <div class="custom-control custom-switch custom-control-inline">
                    {!! Form::checkbox('check',null, false, array('class'=>"custom-control-input")) !!}   
                    {!! Form::label('false', 'disable / Inactive', array('class'=>'custom-control-label')) !!}
                      
                   </div>
                </div>
             </div>
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Text</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, ex ac venenatis mollis, diam nibh finibus leo</p>
                   <div class="custom-control custom-switch custom-switch-text custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Primary </p>
                         <input type="checkbox" class="custom-control-input" id="customSwitch-11" checked="">
                         <label class="custom-control-label" for="customSwitch-11" data-on-label="On" data-off-label="Off">
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Success </p>
                         <input type="checkbox" class="custom-control-input bg-success" id="customSwitch-22" checked="" >
                         <label class="custom-control-label" for="customSwitch-22" data-on-label="Tr" data-off-label="Fal">
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-text custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Danger </p>
                         <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch-33" checked="">
                         <label class="custom-control-label" for="customSwitch-33" data-on-label="Yes" data-off-label="No" >
                         </label>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-sm-12 col-lg-12">
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Color</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, ex ac venenatis mollis, diam nibh finibus leo</p>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-primary" id="customSwitch01" checked="">
                      <label class="custom-control-label" for="customSwitch01">Primary</label>
                   </div>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-success" id="customSwitch02" checked="">
                      <label class="custom-control-label" for="customSwitch02">Success</label>
                   </div>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch03" checked="">
                      <label class="custom-control-label" for="customSwitch03">Danger</label>
                   </div>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-waring" id="customSwitch04" checked="">
                      <label class="custom-control-label" for="customSwitch04">Waring</label>
                   </div>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-dark" id="customSwitch05" checked="">
                      <label class="custom-control-label" for="customSwitch05">Dark</label>
                   </div>
                   <div class="custom-control custom-switch custom-switch-color custom-control-inline">
                      <input type="checkbox" class="custom-control-input bg-info" id="customSwitch06" checked="">
                      <label class="custom-control-label" for="customSwitch06">Info</label>
                   </div>
                </div>
             </div>
             <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                   <div class="iq-header-title">
                      <h4 class="card-title">Icon</h4>
                   </div>
                </div>
                <div class="iq-card-body">
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate, ex ac venenatis mollis, diam nibh finibus leo</p>
                   <div class="custom-control custom-switch custom-switch-icon custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Primary </p>
                         <input type="checkbox" class="custom-control-input" id="customSwitch-1">
                         <label class="custom-control-label" for="customSwitch-1">
                         <span class="switch-icon-left"><i class="fa fa-check"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-check"></i></span>
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Success </p>
                         <input type="checkbox" class="custom-control-input bg-success" id="customSwitch-2" >
                         <label class="custom-control-label" for="customSwitch-2">
                         <span class="switch-icon-left"><i class="fa fa-check"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-check"></i></span>
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Danger </p>
                         <input type="checkbox" class="custom-control-input bg-danger" id="customSwitch-3">
                         <label class="custom-control-label" for="customSwitch-3">
                         <span class="switch-icon-left"><i class="fa fa-times"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-times"></i></span>
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Warning </p>
                         <input type="checkbox" class="custom-control-input bg-warning" id="customSwitch-4">
                         <label class="custom-control-label" for="customSwitch-4">
                         <span class="switch-icon-left"><i class="fa fa-exclamation-triangle"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-exclamation-triangle"></i></span>
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Dark </p>
                         <input type="checkbox" class="custom-control-input bg-dark" id="customSwitch-5">
                         <label class="custom-control-label" for="customSwitch-5">
                         <span class="switch-icon-left"><i class="fa fa-thumb-tack"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-thumb-tack"></i></span>
                         </label>
                      </div>
                   </div>
                   <div class="custom-control custom-switch custom-switch-icon custom-switch-color custom-control-inline">
                      <div class="custom-switch-inner">
                         <p class="mb-0"> Info </p>
                         <input type="checkbox" class="custom-control-input bg-info" id="customSwitch-6">
                         <label class="custom-control-label" for="customSwitch-6">
                         <span class="switch-icon-left"><i class="fa fa-info"></i></span>
                         <span class="switch-icon-right"><i class="fa fa-info"></i></span>
                         </label>
                      </div>
                   </div>
                </div>
             </div>
          </div>
       </div>
    </div>
 </div>

@endsection