@extends('layouts.app')
@section('content')
<!-- Header -->
<div class="header bg-gradient-danger pb-8 pt-5 pt-md-6">
  <div class="container-fluid">
    <div class="header-body">
      <div class="row align-items-center py-4">
        <div class="col-lg-6 col-7">
          <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
              <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                 <li class="breadcrumb-item"><a href="{{url('admin/home')}}"><i class="fas fa-home"></i></a></li>
                 <li class="breadcrumb-item"><a href="{{url('deliveries')}}">Delivery</a></li>
                 <li class="breadcrumb-item active" aria-current="page">List</li>
              </ol>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid mt--7">
<!-- Table -->
<div class="row">
   <div class="col">
      <div class="card shadow">
         <div class="card-header bg-white">
              <div class="row align-items-center">
                <div class="col-8">
                  <h4 class="mb-0">Delivery</h4>
                </div>
                <!-- <div class="col-4 text-right">
                  <a href="javascript:" title="Advanced Search" data-toggle="modal" data-target="#filterModal" data-whatever="@mdo" class="btn btn-primary btn-sm"><i class="fa fa-search" aria-hidden="true"></i></a>
                </div> -->
                
                <div class="nav-search" id="nav-search">
                  <form class="form-search" method="get" action="{{ url('deliveries/item/search') }}"> 
                      <input type="text" name="key" placeholder="Search ..." class="nav-search-input" autocomplete="off" />
                          
                          <button  class="btn btn-danger btn-sm delete_all" type= "submit">Search</button>
                    </form>
                </div>
              </div>
            </div>

            
            
         <div class="table-responsive">
            @if(Session::has('message'))
            <div class="alert {{ Session::get('alert-class', 'alert-info') }}" role="alert">
                {{ Session::get('message') }}
            </div>
            @endif

                <div id='calendar'></div>
         </div>
      </div>
   </div>
</div>
</div>
<style type="text/css">
  .fc-content{
    color: #FFFFFF !important;
    display: none;
  }
  .event-count{
    color: #FFFFFF;
    background-color: #3A87AD;
    margin-top: 25px;
    border-radius: 7px;
  }
  .fc-more{
    display: none;
  }
  .event-count i{
    margin-left: 10px;
  }
  .fc-day:hover{ 
    background:#5C5550; 
    cursor: pointer; 
  }
</style>
<script type="text/javascript">
  // var y=1;
  $(document).ready(function() {
  // let i=0;
    $('#calendar').fullCalendar({

      header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
      },
navLinks: true,
      eventLimit: 1, 
      editable: true,
     
     
      events: [
        @foreach($calendar_details as $calendar_details)
                {

                    
                    start : '{{ $calendar_details->date }}',
                    end:'{{ $calendar_details->date}}',
                    id:'{{ $calendar_details->id}}',
                    //url : "{{URL::to('deliveries/view/' . $calendar_details->id )}}",
 

                },
                @endforeach
       
      ],
      eventRender: function (event, element, view) {
            $(element).each(function () {
                $(this).attr('date-num', event.start.format('YYYY-MM-DD'));
            });
        },
eventAfterAllRender: function(view){
            for( cDay = view.start.clone(); cDay.isBefore(view.end) ; cDay.add(1, 'day') ){
                var dateNum = cDay.format('YYYY-MM-DD');
                var dayEl = $('.fc-day[data-date="' + dateNum + '"]');
                var eventCount = $('.fc-event[date-num="' + dateNum + '"]').length;
                if(eventCount){
                    var html = '<a href="deliveries/' + dateNum+'"><div class="event-count">' +
                                '<i>' +
                                eventCount +
                                '</i>' +
                                '</div></a>';

                    dayEl.append(html);

                }
            }
        } ,
        dayClick: function(date, allDay, jsEvent, view) {
          
          var clickday = date.format('YYYY-MM-DD');
            window.location.assign("deliveries/"+clickday);
            // change the day's background color just for fun
            // $(this).css('background-color', '#5C5550');
          
          
        }
    });
        
  });

</script>

@endsection