@extends('layouts.master')
@section('title', $title)
@section('header-line')
<!--<p class="hover-text" title="This is the hover text">
My Upcoming Events
</p>
<span>| </span>
<p>Add Event</p>
<span> | </span>
<p>Goto Today</p>-->
@endsection
@section('content')
<link href="{{ asset('css/Calendar.css') }}" rel="stylesheet">
<section class="content" style="padding: 0;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" style="padding: 0;">
                <div class="card">
                    <!-- /.card-header -->
                    @if ($error = Session::get('error'))
                    <div class="alert alert-danger">
                        <p>{{ $error }}</p>
                    </div>
                    @endif
                    @if ($message = Session::get('message'))
                    <div class="alert alert-success">
                        <p>{{ $message }}</p>
                    </div>
                    @endif
                    @if (count($errors) > 0)
                    <div class="alert alert-danger">
                        <strong>Whoops!</strong> There were some problems with your input.<br><br>
                        <ul>
                            @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif
                    <div class="main_color">
                        <div class="box">
                        <div class="first-box">
                            <img src="{{ asset('images/Schedule.png') }}" />
                            <div class="Present">
                            <p>Calendar</p>
                            </div>
                        </div>
                        <div class="second-box">
                            <div class="checklist">
                            <!-- <input type="checkbox" class="checkk"> Only My Job Orders -->
                            <div>
                                <input type="radio" name="hideNonPublic" id="hideNonPublic" class="radio1" onclick="refreshView();" />
                                <label>Show Entries from Other Users</label>
                            </div>
                            </div>
                        </div>
                        </div>

                        <div class="Present1">
                        <p id="calendarTitle">Calendar: May 1, 2023</p>
                        </div>
                    </div>
                  
                    <div class="mycontait">
                        <div class="left_upper">
                            <div id="addEventTD">
                                <div class="main_Event">
                                    <p>Add Event</p>
                                </div>
                                <form action="{{ route('calendarevent.store') }}" id="addEventForm" method="POST" enctype='multipart/form-data'>
                                    @csrf
                                    <input type="hidden" name="candidate_id" value="{{ $candidateId }}">
                                    <input type="hidden" name="contact_id" value="{{ $contactId }}">
									<input type="hidden" name="addEvent" value="{{ $addEvent }}">

                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Email To:</label>
                                            <div>
                                                <input type="email" name="attendees" class="vancy1" id="inpuAttendees" placeholder="Attendees" required>
                                                Add comma separated list of emails
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Title:</label>
                                            <div><input type="text" name="title" class="vancy1" id="inputTitle" placeholder="Add Title" required></div>
                                        </div>
                                </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Type:</label>
                                            <select class="custom-select mr-sm-2 vancy2" name="type" style="margin-right:0px !important;">   
                                                @foreach($calendarEventTypes as $cet )
                                                <option value="{{$cet->calendar_event_type_id}}">{{$cet->short_description}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Date:</label>
                                            <div><input type="date" name="date" class="vancy1" id="inputDate" placeholder="Date"required></div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="dio_vancy">
                                            <label>Time</label>
                                            <div class="main_time">
                                                <input type="radio" name="allDay" id="allDayEdit0" value="0" class="radio1" checked onchange="setAddAllDayEnabled();"/>
                                                <select class="custom-select mr-sm-2 main_sele add_check" id="hour" name="hour" id="inlineFormCustomSelect">
                                                    @for ($i = 1; $i<=12; $i++)
                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                    @endfor 
                                                </select>
                                                <select class="custom-select mr-sm-2 main_sele add_check" id="minute" name="minute" id="inlineFormCustomSelect">
                                                    @for ($i = 0; $i<=59; $i++)
                                                        @php
                                                            $formattedValue = ($i < 10) ? '0' . $i : $i;
                                                        @endphp
                                                        <option value="{{ $formattedValue }}">{{ $i }}</option>
                                                    @endfor 
                                                </select>
                                                <select class="custom-select mr-sm-2 main_sele add_check" id="meridiem" name="meridian" id="inlineFormCustomSelect">
                                                    <option value="1" selected>AM</option>
                                                    <option value="2">PM</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="main_checklist">
                                        <!-- <input type="checkbox" class="checkk"> Only My Job Orders -->
                                        <div>
                                            <input type="radio" name="allDay" value="1" id="allDayEdit1" class="radio1" onchange="setAddAllDayEnabled();"/>
                                            <label>All Day / No Specific Time</label>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Duration:</label>
                                           <select id="duration" class="custom-select mr-sm-2 vancy1 inputbox" name="duration" style="    margin-right: 0px !important;">
                                                <option value="15">15 minutes</option>
                                                <option value="30">30 minutes</option>
                                                <option value="45">45 minutes</option>
                                                <option value="60" selected="selected">1 hour</option>
                                                <option value="90">1.5 hours</option>
                                                <option value="120">2 hours</option>
                                                <option value="180">3 hours</option>
                                                <option value="240">4 hours</option>
                                                <option value="300">More than 4 hours</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div>
                                        <div class="vancy">
                                            <label>Desc:</label>
                                            <div><textarea class="vancy3" name="description"></textarea></div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="main_vancy1">
                                            <label>Add to Teams Event:</label>
                                            <div>
                                            <input type="checkbox" name="teamsEvent" class="checkbox90" />
                                            </div>
                                        </div>
                                    </div>
                                    <button class="main_btn addevent" id="for-sub">Add Event</button>
                                </form>
                            </div>
                            <div style="display:none" id="viewEventTD">
                                <div class="main_Event">
                                    <p>View Event</p>
                                </div>
                                <table>
                                    <tr>
                                        <td>
                                            <span id="viewEventTitle" style="font-weight:bold"></span><br />
                                            Email To: <span id="viewEventAttendees"></span><br />
                                            Entered By: <span id="viewEventOwner"></span><br />
                                            Event Type: <span id="viewEventType"></span><br />
                                            <span id="viewEventLink"></span><br />
                                            <br />
                                            Date: <span id="viewEventDate"></span><br />
                                            Time: <span id="viewEventTime"></span><br />
                                            Duration: <span id="viewEventDuration"></span><br />
                                            Reminder: <span id="viewEventReminder"></span><br />
                                            <br />
                                            Description:<br />
                                            <span id="viewEventDescription"></span><br />
                                            <br />
                                            <span id="viewTeamsEvent"></span><br />
                                            Attachment: <span id="viewEventAttachment"></span><br />
                                            <br />
                                            <button class="main_btn" onclick="calendarEditEvent(currentViewedEntry);">Edit Event</button>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div style="display:none" id="editEventTD">
                                <div class="main_Event">
                                    <p>Edit Event</p>
                                </div>
                                <form name="editEventForm" id="editEventForm" action="{{route('calendarevent.update')}}" method="post" onsubmit="return checkEditForm(document.editEventForm);" autocomplete="off" enctype="multipart/form-data">
                                    <input type="hidden" name="postback" id="postbackB" value="postback" />
                                    <input type="hidden" name="eventID" id="eventIDEdit" />
                                    <input type="hidden" name="dataItemType" id="dataItemTypeEdit" />
                                    <input type="hidden" name="dataItemID" id="dataItemIDEdit" />
                                    <input type="hidden" name="jobOrderID" id="jobOrderIDEdit" />
                                    @csrf
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Email To:</label>
                                            <div>
                                                <input type="email" name="attendees" class="vancy1" id="attendeesEdit" placeholder="Attendees">
                                                Add comma separated list of emails
                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Title:</label>
                                            <div><input type="text" name="title" class="vancy1" id="titleEdit" placeholder="Add Middle Name"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Type:</label>
                                            <select class="custom-select mr-sm-2 vancy1" id="typeEdit" name="type">   
                                                @foreach($calendarEventTypes as $cet )
                                                <option value="{{$cet->calendar_event_type_id}}">{{$cet->short_description}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Date:</label>
                                            <div><input type="date" name="date" class="vancy1" id="eventDate" placeholder="Date"></div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="dio_vancy">
                                            <label>Time</label>
                                            <div class="main_time">
                                                <input type="radio" class="radio1" name="allDay" id="allDayEdit0" value="0" checked onchange="setEditAllDayEnabled();"/>
                                                <select class="custom-select mr-sm-2 main_sele edit_check" name="hour" id="hourEdit">
                                                    @for ($i = 1; $i<=12; $i++)
                                                        <option value="{{ $i }}">{{ $i }}</option>
                                                    @endfor 
                                                </select>
                                                <select class="custom-select mr-sm-2 main_sele edit_check" name="minute" id="minuteEdit">
                                                    @for ($i = 0; $i<=59; $i++)
                                                        @php
                                                            $formattedValue = ($i < 10) ? '0' . $i : $i;
                                                        @endphp
                                                        <option value="{{ $formattedValue }}">{{ $i }}</option>
                                                    @endfor 
                                                </select>
                                                <select class="custom-select mr-sm-2 main_sele edit_check" name="meridian" id="meridiemEdit">
                                                    <option value="1" selected>AM</option>
                                                    <option value="2">PM</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="main_checklist">
                                        <!-- <input type="checkbox" class="checkk"> Only My Job Orders -->
                                        <div>
                                            <input type="radio" name="allDay" id="allDayEdit1" value="1" onchange="setEditAllDayEnabled();" class="radio1" />
                                            <label>All Day / No Specific Time</label>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="vancy">
                                            <label>Duration:</label>
                                           <select id="durationEdit" class="custom-select mr-sm-2 vancy1 inputbox" name="duration">
                                                <option value="15">15 minutes</option>
                                                <option value="30">30 minutes</option>
                                                <option value="45">45 minutes</option>
                                                <option value="60" selected="selected">1 hour</option>
                                                <option value="90">1.5 hours</option>
                                                <option value="120">2 hours</option>
                                                <option value="180">3 hours</option>
                                                <option value="240">4 hours</option>
                                                <option value="300">More than 4 hours</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div>
                                        <div class="vancy">
                                            <label>Desc:</label>
                                            <div><textarea class="vancy2" id="descriptionEdit" name="description"></textarea></div>
                                        </div>
                                    </div>
                                    <div class="d-flex">
                                        <div class="main_vancy1">
                                            <label>Add to Teams Event:</label>
                                            <div>
                                            <input type="checkbox" id="teamsEventEdit" name="m" checked class="checkbox90" />
                                            </div>
                                        </div>
                                    </div>
                                    <button type="submit" class="main_btn">Edit Event</button>

                                </form>
                            </div>
                        </div>
                        <div class="left_upper1">
                            <div class="btn-group btn_group1" role="group" aria-label="Basic example">
                                <button type="button" class="btn btn-primary" onclick='userCalendarViewDay(this)' id="DayView">Day</button>
                                <button type="button" class="btn" onclick='userCalendarViewWeek(this)' id="WeekView">Week</button>
                                <button type="button" class="btn" onclick="userCalendarViewMonth(this)"  id="MonthView">Month</button>
                            </div>
                            <div id="calendarMonthParent" style="display:none;">
                                <div class="Calen_toggle">
                                    <a href="" id="linkMonthBack"><button class="basicc" ><</button></a>
                                    <h1 id="monthNotice"></h1>
                                    <a href="" id="linkMonthForeward"><button class="basicc">></button></a>
                                </div>
                                <table style="border-collapse: collapse;">
                                    <tr>
                                        <td>
                                            <table id="calendarMonth">
                                                <tr>
                                                    <th height="1%">Monday</th> 
                                                    <th height="1%">Tuesday</th>
                                                    <th height="1%">Wednesday</th>
                                                    <th height="1%">Thursday</th>
                                                    <th height="1%">Friday</th>
                                                    <th height="1%">Saturday</th>
                                                    <th height="1%">Sunday</th>
                                                </tr>

                                                                                                                                                    <tr id="calendarRow1">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell0" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell1" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell2" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell3" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell4" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell5" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell6" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                                    <tr id="calendarRow2">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell7" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell8" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell9" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell10" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell11" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell12" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell13" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                                    <tr id="calendarRow3">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell14" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell15" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell16" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell17" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell18" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell19" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell20" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                                    <tr id="calendarRow4">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell21" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell22" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell23" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell24" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell25" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell26" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell27" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                                    <tr id="calendarRow5">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell28" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell29" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell30" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell31" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell32" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell33" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell34" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                                    <tr id="calendarRow6">
                                                                                                                                                                            <td class="empty" id="calendarMonthCell35" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell36" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell37" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell38" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell39" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell40" height="17%">&nbsp;</td>
                                                                                                                    <td class="empty" id="calendarMonthCell41" height="17%">&nbsp;</td>
                                                                                                            </tr>
                                                                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <div id="calendarDayParent">
                                <div class="Calen_toggle">
                                    <a href="" id="linkDayBack"><button class="basicc" ><</button></a>
                                    <h1 id="dayNotice"></h1>
                                    <a href="" id="linkDayForeward"><button class="basicc">></button></a>
                                </div>
                                <table class="calenderRight">
                                    <tr>
                                        <td class="calender_left">Morning</td>
                                        <td class="calender_right"  id="calendarDayCell0"></td>
                                    </tr>
                                    @for($i = $dayHourStart; $i<=$dayHourEnd; $i++)
                                        <tr>
                                            <td class="calender_left"> {{ (($i<=12) ? $i : $i-12 ) }} : 00</td>
                                            <td class="calender_right" id="calendarDayCell1"></td>
                                        </tr>
                                    @endfor
                                    <tr>
                                        <td class="calender_left">Evening</td>
                                        <td class="calender_right" id="calendarDayCell2"></td>
                                    </tr>
                                </table>
                            </div>
                            <div id="calendarWeekParent" style="display:none;">
                                <div class="Calen_toggle">
                                    <a href="" id="linkWeekBack"><button class="basicc" ><</button></a>
                                    <h1 id="weekNotice"></h1>
                                    <a href="" id="linkWeekForeward"><button class="basicc">></button></a>
                                </div>
                                <table class="calenderRight">
                                    <tr>
                                        <td>
                                            <table id="calendarWeek">
                                                <tr>
                                                    <td class="weekCell">Monday <br /><span id="weekDay0"></span></td>
                                                    <td class="empty" id="calendarWeekCell0"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Tuesday <br /><span id="weekDay1"></span></td>
                                                    <td class="empty" id="calendarWeekCell1"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Wednesday <br /><span id="weekDay2"></span></td>
                                                    <td class="empty" id="calendarWeekCell2"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Thursday <br /><span id="weekDay3"></span></td>
                                                    <td class="empty" id="calendarWeekCell3"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Friday <br /><span id="weekDay4"></span></td>
                                                    <td class="empty" id="calendarWeekCell4"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Saturday <br /><span id="weekDay5"></span></td>
                                                    <td class="empty" id="calendarWeekCell5"></td>
                                                </tr>
                                                <tr>
                                                    <td class="weekCell">Sunday <br /><span id="weekDay6"></span></td>
                                                    <td class="empty" id="calendarWeekCell6"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>                        
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>
    <!-- /.container-fluid -->
</section>
@push('scripts')