@extends('layouts.app') 
@section('content') 

@section('css')
<link rel="stylesheet" href="{{asset('assets/admin/fullcalendar-3.3.1/fullcalendar.css')}}">

<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/pickers/datetime/bootstrap-datetimepicker.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/vendors/css/ui/jquery-ui.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/admin/css/plugins/ui/jqueryui.min.css')}}">
<style>
.fc-day-grid-event .fc-content .fc-title {
    color: #fff !important;
    font-size: 14px !important;
}
</style>
@endsection

@if(session()->has('message'))<div class="alert alert-success">{{ session()->get('message') }}</div>@endif
@if(session()->has('error'))<div class="alert alert-danger">{{ session()->get('error') }}</div>@endif

<div class="alert alert-warning">
    <b>Note!</b><br>
    <b>1: </b> Select user with you want to swap shift<br>
    <b>2: </b> Click on the shift and then select your shift you want to swap with other user
</div>

<div class="card box-shadow-1">
    <div class="card-header">
        <h4 class="card-title">{{ isset($title)?$title:'' }}</h4>
    </div>

    <div class="card-body collapse in">
        <div class="card-block card-dashboard">
            <div class="row">
                <div class="col-sm-2">
                    <h2>Users</h2>
                    @if(isset($users) && !empty($users))
                    @foreach($users as $row)
                    <div class="list-group">
                        <a href="{{route('shiftSwap',['id'=>$row->id])}}" class="list-group-item @if($row->id == Request::input('id')) active @endif">{{ucwords($row->name)}} <br>
                            @if($row->type != '')
                            [{{$row->type}}] - 
                            @endif
                            @if($row->section != '')
                            [{{$row->section}}]
                            @endif
                        </a>
                    </div>
                    @endforeach
                    @endif
                </div>
                <div class="col-sm-10">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

@include('admin.schedules.shift_swap_modal') 
@section('js')
<script src="{{asset('assets/admin/fullcalendar-3.3.1/lib/moment.min.js')}}"></script>
<script src="{{asset('assets/admin/fullcalendar-3.3.1/fullcalendar.js')}}"></script>

<script type="text/javascript" src="{{asset('assets/admin/vendors/js/pickers/dateTime/moment-with-locales.min.js')}}"></script>
<script type="text/javascript" src="{{asset('assets/admin/vendors/js/pickers/dateTime/bootstrap-datetimepicker.min.js')}}"></script>
<script src="{{asset('assets/admin/js/core/libraries/jquery_ui/jquery-ui.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/admin/js/scripts/ui/jquery-ui/buttons-selects.min.js')}}" type="text/javascript"></script>
<script type="text/javascript">

    $(function () {
        $('.time').datetimepicker({
            format: 'LT'
        });
        
        $('#calendar').fullCalendar({
            defaultDate: Date(),
            eventLimit: true,
            header: { 
                left: 'prev,next today', 
                center: 'title', 
                right: 'month,agendaWeek,agendaDay' 
            }, 
            events: [
                <?php
                foreach ($schedules as $row) {

                    if($row->shift == 'lunch'){
                        $color = '#4486F7';
                    }elseif($row->shift == 'dinner'){
                        $color = '#378006';
                    }else{
                        $color = '#DA4453';
                    }
                    
                    echo "{
                        id: '".$row->id."',
                        title: '".$row->start_time." - ".$row->close_time."\\n".ucwords($row->shift)."\\n".ucwords($row->days)."',
                        description: '".$row->shift." - ".$row->days."',
                        start: '".$row->date."',
                        end: '".$row->date."',
                        color: '".$color."'
                    },";
                }
                ?>    
            ],
            <?php foreach ($schedules as $row) {
                if($row->shift == 'lunch'){
                ?>
                eventColor: '#378006',
            <?php 
                }elseif($row->shift == 'dinner'){?>
                eventColor: '#FFC000',
            <?php }
            } ?>

            eventClick:function( event, element, view ) {
                var event_id = event.id;
                $('#shift_from').val(event_id);
                $("#shiftSwapModal").modal('show');
            },

        });


    });

    $(".edit_click").on('click', function (event) {
        event.preventDefault();

        $('#sectionModalLabel').html('Edit Section');
        var id = $(this).attr("data-id")
        var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
        $.ajax({
            type: 'POST',
            url: '{{route("getSection")}}',
            data: {
                id: id,
                _token: CSRF_TOKEN
            },
            dataType: 'json',
            success: function (response) {
                $('#id').val(response.id);
                $('#name').val(response.name);
                $('#email').val(response.email);
                $('input[name=type][value=' + response.type + ']').prop('checked',true)
                $('#sectionModal').modal('show');
            }
        });
    });
    $('.add_click').click(function () {
        $('#seheduleForm')[0].reset();
        $('#seheduleModalLabel').html('Add New Sehedule');
    });

</script>

@endsection 
@endsection