@extends('layouts.layout') @section('content')
<div class="container-fluid" style="min-height:420px">
    <input type="hidden" name="from_date" id="from_date" value="{{$current_date}}">
    <input type="hidden" name="to_date" id="to_date">
    
    <form action="{{asset('calendar')}}" id="calendar_form" method="post">
    @csrf
    <input type="hidden" name="current_month_year" id="current_month_year" value="{{$current_month_year}}">
    </form>
    <div class="row calendarcard">
        <div class="col-md-5 bgcalendar ">
                 <div class="mycalendar"></div>
        </div>
        <div class="col-md-5">
            <!--event form-->
            <div class="row" style="margin-top:20px">
                <div class="col-md-6">
                <h2>Holiday & Events</h2>
                </div>
                <div class="col-md-3">
                <button data-toggle="tooltip" title="Add event" class="btn roundedbtn" type="button" onclick="setevent()"><i class="fa fa-plus"></i></button>
                </div>
                <div class="col-md-3">
                <button type="button" class="btn pull-right " onclick="window.location='weekoff'">Add Weekoff</button>
                </div>
            </div>
            <br>

            <div style="max-height:320px; overflow-y: scroll;">
                @if($calendar_data!="" && count($calendar_data)>0)
                @foreach($calendar_data as $calendar_list)
                @php 
                $cal_date=$calendar_list->CAL_DATE;
                $cal_date1=$calendar_list->CAL_DATE->format('d-M-Y');
                @endphp
                    <div class="card {{($calendar_list->CAL_EVENT_TYPE=='1')?'eventday':'holiday'}}">

                            <div class="card-body"><h4>{{$calendar_list->CAL_EVENT_NAME}} 
                            <b class="pull-right"  data-toggle="tooltip" title="Remove event" onclick="removeevent('{{$calendar_list->CAL_ID}}')"><i class="fa fa-times"></i></b>
                            </h4>
                            </div>
                    <p style="margin-top:10px"> {{$cal_date1}} </p>  
                    </div>
                @endforeach
                @endif
            </div>



            <!--event form-->
        
        </div>
        <div class="col-md-2">
            <!--event form-->
            <br> <br> <br> <br>
        <div>
        <i class="fa fa-circle" style="color:red"></i>  &nbsp;&nbsp;&nbsp; Public Holiday
        </div>
            <br>
        <div>
        <i class="fa fa-circle" style="color:blue"></i>  &nbsp;&nbsp;&nbsp; Festival Holiday
        </div>
            <br>
        <div>
        <i class="fa fa-circle" style="color:green"></i>  &nbsp;&nbsp;&nbsp; Weekoff
        </div>
            <br>
        <div>
        <i class="fa fa-circle" style="color:pink"></i> &nbsp;&nbsp;&nbsp; Weekoff & Public Holiday
        </div>
            <br>
        <div>
        <i class="fa fa-circle" style="color:violet"></i> &nbsp;&nbsp;&nbsp; Weekoff & Festival Holiday
        </div>



            <!--event form-->
        
        </div>

    </div>





</div>

<div class="modal fade" id="eventmodal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
         
        <h4 class="modal-title" id="myModalLabel">Add Holiday and Event</h4>
        </div>
        
        <!-- Modal Body -->
        
        <form role="form" onsubmit="return addevent()">
        <div class="modal-body">
            <p class="statusMsg"></p>
                <div class="form-group">
                    <label for="inputName">Holiday & Event Name</label>
                    <input type="text" class="form-control" id="event_name" placeholder="Title"/>
                </div>
                <div class="form-group">
                    <label for="inputEmail">Select Holiday type</label>
                   <select class="form-control"  id="event_type">
                   <option value="">Select Holiday type</option>
                   <option value="1">Public Holiday</option>
                   <option value="2">Festival Holiday</option>
                   <option value="3">Event</option>
                   </select>
                </div>
        </div>
        
        <!-- Modal Footer -->
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button  class="btn btn-primary submitBtn">SUBMIT</button>
        </div>
        
        </form>
    </div>
</div>
</div>


@endsection