@extends('layouts.app')
@push('css_lib')
  <!-- iCheck -->
  <link rel="stylesheet" href="{{asset('plugins/iCheck/flat/blue.css')}}">
  <!-- select2 -->
  <link rel="stylesheet" href="{{asset('plugins/select2/select2.min.css')}}">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="{{asset('plugins/summernote/summernote-bs4.css')}}">
  {{--dropzone--}}
   <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <link rel="stylesheet" href="{{asset('plugins/dropzone/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/fullcalendar/fullcalendar.min.css')}}" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
<style>

    .ui-widget.ui-widget-content{
        z-index:9999 !important;
    }
    body {
    margin-top: 50px;
    text-align: center;
    font-size: 12px;
    font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
}

#calendar {
    width: 100%;
    margin: 0 auto;
}

.response {
    height: 60px;
}

.success {
    background: #cdf3cd;
    padding: 10px 60px;
    border: #c3e6c3 1px solid;
    display: inline-block;
}
.fc-title{
    color:#fff !important;
}
.removebtn {
	  color:black;
		position: absolute;
		top: 0;
		right: 0;
    width:13px;
    height: 13px;
    text-align:center;
    border-radius:50%;
    font-size: 10px;
		cursor: pointer;
        background-color: #FFF;
        z-index:9999;
	}
</style>
@endpush
@section('title',"Category")
@section('content')
  @include('flash::message')
  @include('adminlte-templates::common.errors')
  <div class="clearfix"></div>
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
        <li class="nav-item">
          <a class="nav-link" href="{!! route('vehiclemanage.index') !!}"><i class="fa fa-list mr-2"></i>Vehicle List</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="{!! url()->current() !!}"><i class="fa fa-plus mr-2"></i>Vehicle</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
    
      <div class="row">
<div style="flex: 100%;max-width: 100%;padding: 0 4px;" class="row">
    <!-- Name Field -->
    <div class="form-group row col-12">
        
      
           <div class="response"></div>
    <div id='calendar'></div>
      
    </div>
</div>
<!-- Submit Field -->
<!--<div class="form-group col-12 text-right">-->
<!--    <button type="submit" class="btn btn-{{setting('theme_color')}}"><i class="fa fa-save"></i> {{trans('lang.save')}}</button>-->
<!--    <a href="{!! route('category.index') !!}" class="btn btn-default"><i class="fa fa-undo"></i> {{trans('lang.cancel')}}</a>-->
<!--</div>-->

      </div>
     
      <div class="clearfix"></div>
      
<div class="modal fade" id="form" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title" id="exampleModalLabel">Vehicle Management</h5>
        <button type="button" onClick="reply_close()" id="close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        <!--{!! Form::open(['route' => 'vehiclemanage.store']) !!} -->
        <!--<div class="modal-body">-->
        
        <!--    <input type="hidden" class="form-control" id="delid" name="id" aria-describedby="emailHelp" placeholder="Enter email">-->
          
        <!--    <input type="hidden" class="form-control" id="date" name="date" aria-describedby="emailHelp" placeholder="Enter email">-->
        <!--       <button type="submit" onClick="save()" class="btn btn-success">Submit</button>-->
               
        <!--       {!! Form::close() !!}-->
     {!! Form::open(['route' => 'vehiclemanage.store']) !!} 
        <div class="modal-body">
        
            <input type="hidden" class="form-control" id="id" name="id" aria-describedby="emailHelp" placeholder="Enter email">
          
            <input type="hidden" class="form-control" id="date" name="date" aria-describedby="emailHelp" placeholder="Enter email">
        
          
          <div class="form-group">
               {!! Form::label('Vehicle Name','Vehicle Name', ['class' => 'col-3 control-label']) !!}
            <div class="col-7">
        <select class="form-control" name="vehicle_name[]" id="vehicle_name" multiple required>
        @if(count($store)>0)
        @foreach ($store as $key=>$cate)
        <option value="{{$cate->id}}">{{$cate->vehicle_name}}</option>  
        @endforeach
        @endif
        </select>   
        </div>
          </div>
          <div class="form-group">
            {!! Form::label('Reason', 'Reason', ['class' => 'col-3 control-label']) !!}
        <div class="col-7">
           {!! Form::textarea('reason', null,  ['cols'=>'3','rows'=>'3','id' => 'reason','class' => 'form-control','placeholder'=>"Title","required"=>"true"]) !!}
            <div class="form-text text-muted">
                {{ trans("lang.status") }}
            </div>
        </div>
          </div>
        </div>
        <div class="modal-footer border-top-0 d-flex justify-content-center">
          <button type="submit" onClick="save()" class="btn btn-success">Submit</button>
        </div>
      {!! Form::close() !!}
    </div>
  </div>
</div>
    </div>
  </div>
</div>
@include('layouts.media_modal',['collection'=>null])
@endsection
@push('scripts_lib')
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
	  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  function reply_close()
{
    var element = document.getElementById("form");
         element.classList.remove("show");
         element.style.display = "none";
       
          document.getElementById("date").value="";
}
  $( function() {
    $( "#datepicker" ).datepicker({  minDate: new Date() });
  } );
  </script>
<!-- iCheck -->
<script src="{{asset('plugins/iCheck/icheck.min.js')}}"></script>
<!-- select2 -->
<script src="{{asset('plugins/select2/select2.min.js')}}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="{{asset('plugins/summernote/summernote-bs4.min.js')}}"></script>
{{--dropzone--}}
<script src="{{asset('plugins/dropzone/dropzone.js')}}"></script>
<script type="text/javascript">
    Dropzone.autoDiscover = false;
    var dropzoneFields = [];
</script>
<script src="{{asset('plugins/fullcalendar/lib/jquery.min.js')}}"></script>
<script src="{{asset('plugins/fullcalendar/lib/moment.min.js')}}"></script>
<script src="{{asset('plugins/fullcalendar/fullcalendar.min.js')}}"></script>

<script>

$(function () {
    var calendar = $('#calendar').fullCalendar({
        editable: true,
        events: ,
        displayEventTime: false,
        eventRender: function (event, element, view,e) {
        element.append( "<span class='removebtn'>X</span>" );
        element.find(".removebtn").click(function() {
             var element = document.getElementById("form");
                //    element.classList.remove("show");
                  console.log("first"+element);
          //$('#calendar').fullCalendar('removeEvents',event._id);
        var confirmIt = confirm("Want to delete?");
        if (confirmIt) {
        document.location.href = "destroy/"+event.id;
          element.style.display = "none";
        }
        element.style.display = "none";
        });
            if (event.allDay === 'true') {
                event.allDay = true;
            } else {
                event.allDay = false;
            }
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = "";
         var element = document.getElementById("form");
         element.classList.add("show");
         element.style.display = "block";
          var start = $.fullCalendar.formatDate(start, "Y-MM-DD");
          document.getElementById("date").value=start;
        
       
            //     true
            // if (title) {
            //     var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
            //     var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");

            //     $.ajax({
            //         url:'',
            //         data: 'title=' + title + '&start=' + start + '&end=' + end,
            //         type: "POST",
            //         success: function (data) {
            //             displayMessage("Added Successfully");
            //         }
            //     });
            //     calendar.fullCalendar('renderEvent',
            //             {
            //                 title: title,
            //                 start: start,
            //                 end: end,
            //                 allDay: allDay
            //             },
            //     true
            //             );
            // }
            calendar.fullCalendar('unselect');
        },
        
        editable: true,
        eventClick: function (event, delta) {
                
                   var res = event.vehicle_id.split(",");
                     console.log("second"+ res)
                     var rem=res
                     .map(function (e) { return parseInt(e); })
                     .filter(function (e) { return isFinite(e); });
                    var element = document.getElementById("form");
                    element.classList.add("show");
                    element.style.display = "block";
                     document.getElementById("date").value=event.date;
                   
                     document.getElementById("id").value=event.id;
                    document.getElementById("reason").value=event.reason;
                    
               const select = document.getElementById('vehicle_name');
               console.log(rem)
             
            var selectValues  =rem;

for (const option of document.querySelectorAll('#vehicle_name option')) {

  
  const value = Number.parseInt(option.value);

  
  if (selectValues.indexOf(value) !== -1) {
    option.setAttribute('selected', 'selected');
  }
 
  else {
    option.removeAttribute('selected');
  }
}
                }
        // eventClick: function (event) {
        //     var deleteMsg = confirm("Do you really want to delete?");
        //     if (deleteMsg) {
        //         $.ajax({
        //             type: "POST",
        //             url: "delete-event.php",
        //             data: "&id=" + event.id,
        //             success: function (response) {
        //                 if(parseInt(response) > 0) {
        //                     $('#calendar').fullCalendar('removeEvents', event.id);
        //                     displayMessage("Deleted Successfully");
        //                 }
        //             }
        //         });
        //     }
        // }

    });
});

function displayMessage(message) {
	    $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
}
</script>
@endpush