@extends('admin.layouts.master')
@section('content')
<style>
    .switch {
      position: relative;
      display: inline-block;
      width: 70px;
      height: 57px;
    }
    
    .switch input { 
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
    }
    
    input:checked + .slider {
      background-color: #2196F3;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
    
    /* Rounded sliders */
    .slider.round {
      border-radius: 34px;
    }
    
    .slider.round:before {
      border-radius: 50%;
    }
</style>
<div class="page-content">
    <div class="page-bar">
        <div class="page-title-breadcrumb">
            <div class=" pull-left">
                <div class="page-title">All Client Add List</div>
                @if(session('success'))
                    <div class="alert alert-success">{{session('success')}}</div>
                @endif
            </div>
            <ol class="breadcrumb page-breadcrumb pull-right">
                <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="index-2.html">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                </li>
                <li class="active">All Client Add List</li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="tabbable-line">
                <div class="tab-content">
                    <div class="tab-pane active fontawesome-demo">
                        <div class="card-box">
                            {{-- <form action="{{route('client.store')}}" method="post">
                                @csrf
                                <div class="card-body row">
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>Name</Label>
                                            <input type="text" class="form-control" name="name" id="txtName" value="@if(!empty(Request::old('name'))){{Request::old('name')}}@endif"  required>
                                            @if($errors->has('name'))
                                                <span class="text-danger">{{$errors->first('name')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>NDIS Number</Label>
                                            <input type="text" class="form-control" name="ndis_number" id="" value="@if(!empty(Request::old('ndis_number'))){{Request::old('ndis_number')}}@endif" required>
                                            @if($errors->has('ndis_number'))
                                                <span class="text-danger">{{$errors->first('ndis_number')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>State</Label>
                                            <select name="state_id" class="form-control" required>
                                                <option value="">Select State</option>
                                                @if(!empty($state) && count($state)>0)
                                                    @foreach($state as $key => $statelist)
                                                    <option value="{{$statelist->id}}"
                                                        @if(!empty(Request::old('state_id')) && Request::old('state_id')=="1")
                                                            selected
                                                        @endif
                                                    >{{$statelist->name}}</option>
                                                    @endforeach  
                                                @endif
                                            </select>
                                            @if($errors->has('state_id'))
                                                <span class="text-danger">{{$errors->first('state_id')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <label>Start Date</label>
                                            <input class="form-control" type="date" name="start_date" value="@if(!empty(Request::old('start_date'))){{Request::old('start_date')}}@endif" id="txtstartdate" required>
                                            @if($errors->has('start_date'))
                                                <span class="text-danger">{{$errors->first('start_date')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <label>End Date</label>
                                            <input class="form-control" type="date" name="end_date" value="@if(!empty(Request::old('end_date'))){{Request::old('end_date')}}@endif" id="txtenddate" required>
                                            @if($errors->has('end_date'))
                                                <span class="text-danger">{{$errors->first('end_date')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-lg-4">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>Status</Label>
                                            <select name="status" class="form-control" required>
                                                <option value="">Select Status</option>
                                                <option value="1"
                                                    @if(!empty(Request::old('status')) && Request::old('status')=="1")
                                                        selected
                                                    @endif
                                                >Active</option>
                                                <option value="0"
                                                    @if(!empty(Request::old('status')) && Request::old('status')=="0")
                                                        selected
                                                    @endif
                                                >Deactive</option>
                                            </select>
                                            @if($errors->has('status'))
                                                <span class="text-danger">{{$errors->first('status')}}</span>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="card-body row">
                                    <div class="col-lg-12">
                                        <div class="row">
                                            <h3 class="col-md-2 mt-1">Stake Holder</h3>
                                            <label class="switch">
                                                <input class="col-md-6" type="checkbox" onclick="myFunction()" checked>
                                                <span class="slider round"></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body row" id="myDIV">
                                    <div class="col-lg-3">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>Stake Holder</Label>
                                            <select name="stake_holder[]" class="form-control" required>
                                                <option value="">Select Stake Holder</option>
                                                    <option value="1">Fixed</option>
                                                    <option value="2">Hourly</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>Stake Holder Type</Label>
                                            <select name="stake_holder_type[]" class="form-control" required>
                                                <option value="">Select Stake Holder Type</option>
                                                    <option value="0">Primary</option>
                                                    <option value="1">Secoundary</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <Label>Percentage</Label>
                                            <input type="number" class="form-control" name="percentage[]" step="any" id="" value="" required>
                                            <span class="text-danger"></span>
                                        </div>
                                    </div>
                                    <div class="col-lg-3">
                                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label txt-full-width is-upgraded" data-upgraded=",MaterialTextfield">
                                            <a href="javascript:;" class="btn btn-primary btn-xs edit mt-5" data-id="1"><i class="fa fa-plus"></i></a>
                                            <button class="btn btn-danger btn-xs delete mt-5" data-id="1"><i class="fa fa-trash-o "></i></button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 text-center">
                                    <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 m-r-20 btn-pink" data-upgraded=",MaterialButton,MaterialRipple">Submit<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                                    <button type="button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect m-b-10 btn-default" data-upgraded=",MaterialButton,MaterialRipple" data-dismiss="modal">Cancel<span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></button>
                                </div>
                            </form> --}}
                            @livewire('client.stackholder')
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
/*
    function myFunction() {
        var x = document.getElementById("myDIV");
        if (x.style.display === "none") {
            x.style.display = "flex";
        } else {
            x.style.display = "none";
        }
    }
*/
</script>