{{View::make('layout.header')}}
<style>
.fc-right .fc-state:hover{
     background-color:#fff !important;
    
}
.fc-right .fc-button{
     padding: 0.438rem 0.5rem !important;
     background:#fff !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    height: 100%;
}
.fc-right .fc-state-active {
    background-color: rgba(115, 103, 240, 0.2) !important;
    border-color: #7367f0 !important;
    color: #7367f0;
    z-index: 1 !important;
}
.fc-next-button, .fc-prev-button{
    background: #fff !important;
}
.fc-month-button, .fc-agendaWeek-button{
border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    }
    .fc-agendaWeek-button, .fc-agendaDay-button{
        border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;

    }
.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after {
    top:-10% !important;
}
.fc-icon-left-single-arrow:after{
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e900" !important;
}
.fc-icon-right-single-arrow:after {
    font-size: 135% !important;
    font-weight: inherit !important;
    content: "\e901" !important;
}
.fc-state-default {
    box-shadow: none !important;
}
.fc-content .fc-title{
    color:#fff;
    font-size:11px;
       white-space: break-spaces !important;
}

.fc-right .fc-button-group{
    width: 60% !important;
    float: right !important;
}
@media only screen and (min-width: 768px) {
.fc-left, .fc-right{
    width:50% !important;
}
.app-calendar .fc-popover { left:50% !important;  top : 30% !important;}
}
@media only screen and (max-width: 768px) {
.fc-left, .fc-right{
    width:100% !important;
}
.app-calendar .fc-popover { left:20% !important;  top : 40% !important;}
}

</style>
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <div class="breadcrumb-wrapper">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item">HR
                                    </li>
                                    <li class="breadcrumb-item"><a href="{{route('setup')}}">Setup</a>
                                    </li>
                                    <li class="breadcrumb-item active"><a href="#">States</a>
                                    </li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content-body">
                <!-- Dashboard Ecommerce Starts -->
                <section id="multiple-column-form">
                    
                <div class="row">
                <div class="col-12 col-md-4">
                    <div class="card">
                      <div class="card-header ptitle" style="padding:1rem;  color:#fff;">
                        <h4 class="card-title" style="color:#fff;">Add States</h4>
                      </div>
                      <div class="col-md-12">
                        @if (\Session::has('statusMsg'))
                        
                        <div class="alert alert-success alert-dismissible" style="margin-top:18px;">
                            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">×</a>
                            <strong>Success!</strong> {{ Session::get('statusMsg') }}
                        </div>
                        
                        @endif
                    </div>
                      <div class="card-body">
                          
                          <form  id="all-filter11"  enctype="multipart/form-data">
                            <div class="row">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment-date">Select Country :*</label>
                                        <select name="country" id="country" class="form-control" style="padding-left: 10px;">
                                            @foreach($country as $cn)
                                                <option value="{{ $cn->country_code }}" {{request()->get('country') && request()->get('country') == $cn->country_code ? 'selected' : '' }}>{{ $cn->country_code }}</option>
                                            @endforeach    
                                        </select>
                                        
                                    </div>
                                </div>
                                <div class="col-md-12 col-12">
                                    <div class="form-group">
                                        <label class="form-label" for="payment-date">State Name :*</label>
                                            <input type="text" name="state" id="state" class="form-control"  style="padding-left: 10px;" value="" placeholder="" required>
                                        
                                    </div>
                                </div>
                              
                                <div class="col-md-12 col-12">
                                    <div class="form-group d-flex flex-wrap mb-0">
                                        <button type="button" onclick="saveDetails()" class="btn btn-primary mr-1" id="apply">Add</button>
                                        
                                        
                                    </div>
                                    <div id="msg" style="margin-top:15px;"></div>
                                </div>
                            </div>
                          </form>
                      </div>
                    </div>
                  </div>
                  <div class="col-12 col-md-8">
                    <div class="card">
                      <div class="card-header ptitle" style="padding:1rem; color:#fff;">
                        <h4 class="card-title" style="color:#fff;">States</h4>
                      </div>
                      <div class="card-body" style="padding:0px; ">
                            <div class="col-md-12">
                                <div class="table-responsive" style="padding: 0 15px 15px 15px;">
                                    <table class="table table-striped  my-leave-summary-entitle" id="example11" style="font-size:12px;" >
                                        <thead>
                                            <tr style="">
                                                <th width="10%" style="text-align:center;text-transform: capitalize;">S.No.</th>
                                                <th width="38%" style="text-transform: capitalize;">Country</th>
                                                <th width="39%" style="text-transform: capitalize;">State Code</th>
                                                <th width="13%" style="text-align:center;text-transform: capitalize;white-space: nowrap;">Action</th>
                                                            
                                            </tr>
                                        </thead>
                                        <tbody>
                                                    
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                          
                        </div>
                    </div>
                  </div>
                </div>
              </section>

              <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                        <div class="modal-header">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                        <h5 class="modal-title" id="exampleModalLabel">Are you sure to delete this State ?</h5>
                        <div id="delete-modal">
                        </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary yes-btn">Yes</button>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- END: Content-->
    {{View::make('layout.footer')}}
    @include('inc.state-model')
    <script>
     $(document).ready(function() {
        getempdata();
     });

     function getempdata(){
         $('#example11').DataTable({
             "lengthMenu": [[20, 50, 100, -1], [20, 50,100, "All"]],
             "order": [],
		        "processing": true,
                "destroy": true,
		        "serverSide": true,
		        "ajax": "{!! route('getstate') !!}",
               
                "columns": [
                    
                    { data: 'c_id', name: 'c_id' },
                    { data: 'country', name: 'country' },
                    { data: 'state', name: 'state' },
                    { data: 'id', name: 'id',
		            "render": function (data,type,row,meta){ 
                        var edit = '<a class="appDialog-model text-success" data-toggle="modal" data-target="#inlineForm11" data-id="'+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-edit"><circle cx="12" cy="12" r="3"></circle><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path></svg></a>&nbsp;';
                        if(row.delete_allow==1){
                            edit+='<a class="appDialog-model11 text-danger" data-toggle="modal" data-target="#exampleModal" data-id="'+row.id+'" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 font-small-4 mr-50"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>';
                        }
                        else{
                            edit+='<a class="appDialog-model text-secondary" style="cursor:unset" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 font-small-4 mr-50"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg></a>';
                        }
                        return edit;                     
                   } },
     
                ],
                'rowCallback': function(row, data, index){
                    $(row).find('td:eq(0)').css('text-align', 'center');
                    $(row).find('td:eq(3)').css('text-align', 'center');
                    $(row).find('td:eq(0)').css('word-break', 'all');
                    $(row).find('td:eq(1)').css('word-break', 'all');
                    
                },
             "language": {
                    "paginate": {
                    // remove previous & next text from pagination
                    "previous": '&nbsp;',
                    "next": '&nbsp;'
                    }
                },
         });
    }
    function saveDetails(){
       var state = $("#state").val();
        if(state==''){
            $("#msg").empty();
                $("#msg").append('<p style="color:red;">Please Enter State Name</p>');
                return false;
        }
      
        var statedata = document.querySelector("#all-filter11");
		var data = new FormData(statedata);
       $.ajax({
            url:'{{route('addstate')}}',
            contentType:false,
	    	cache:false,
	    	processData:false,
            method:'POST',
            data:data,
            success:function(e){
                console.log(e);
                $("#msg").empty();
                $("#msg").append('<p style="color:green;">State Added Sucessfully</p>');
                getempdata();
                
            }
        });

    }

    function updatestate(){
        $.ajax({
            type:'get',
            data: { 
                _token: '<br />
<b>Fatal error</b>:  Uncaught Error: Call to undefined function csrf_token() in /home/ecoleave/public_html/backup/v6/resources/views/hr/setup/state.blade.php:290
Stack trace:
#0 {main}
  thrown in <b>/home/ecoleave/public_html/backup/v6/resources/views/hr/setup/state.blade.php</b> on line <b>290</b><br />