@extends('layouts.admin')

@section('content')

<style type="text/css">
    .fc-col-header {
        width: 100%!important;
    }
    .fc-daygrid-body {
        width: 100%!important;
    }
    .fc-scrollgrid-sync-table {
        width: 100%!important;
    }
</style>
<div class="row" style="margin-top: 2em; margin-bottom: 2em">
	<div class="col-sm-4">  
        <div class="media-body">
          	<h3>{{ $DiaryCount }}</h3>
          	<h5>Total Diaries Created</h5>
        </div>
    </div>

    <div class="col-sm-4">  
        <div class="media-body">
            <h3>{{ Auth::user()->package->capacity }} GB</h3>
            <h5>Package Storage</h5>
        </div>
    </div>

    <div class="col-sm-4">  
        <div class="media-body">
            <h3>{{ $used_capacity }}</h3>
            <h5>Used Storage</h5>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <h1>Welcome {{ Auth::user()->name }}</h1>
        <h6>Member since: {{ date('h:i:s A - M d, Y', strtotime(Auth::user()->created_at)) }}</h6>
    </div>
</div>

<div class="row" style="margin-top: 2em; margin-bottom: 2em">
    <div class="col-sm-4">  
        @if($used_capacity_gb >= Auth::user()->package->capacity)
        <h3 style="color:red;">You have exceeds your package limit. Please <a href="{{ route('packageslist') }}">upgrade</a> your package.</h3>
        @endif
    </div>
</div>


<div class="row">
    <h2>Create a new journal entry</h2>
    <div class="col-lg-2">
      	<label></label>
      	<div class="buttons">
      		<a class="btn btn-primary signpbtn" href="{{ route('TextDiary') }}">Text Journal</a>
      	</div>
    </div>
    <div class="col-lg-2">
     	<label></label>
      	<div class="buttons">
      		<a class="btn btn-primary signpbtn" href="{{ route('ImageDiary') }}">Picture Journal</a>
      	</div>
    </div>
    <div class="col-lg-2">
      	<label></label>
      	<div class="buttons">
      		<a class="btn btn-primary signpbtn" href="{{ route('VideoDiary') }}">Video Journal</a>
      	</div>
    </div>
</div>


<hr>
<div class="row">
    <div class="col-sm-12">
        <h2>Quick glance calendar view</h2>
        <br>
		<div id='calendar'></div>
	</div>
</div>

 <script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            headerToolbar: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },

            initialDate: '{{ date("Y-m-d") }}',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            dayMaxEvents: true, // allow "more" link when too many events
            events: [
            	@if($diaries->count() > 0)
            	@foreach($diaries as $diary)
                {
                    @if($diary->type == "Text")
                        @php $type = "T"; @endphp
                    @elseif($diary->type == "Image")
                        @php $type = "P"; @endphp
                    @elseif($diary->type == "Video")
                       @php  $type = "V"; @endphp
                    @endif

                    @php
                    $title = str_replace("'",",",$diary->title);
                    @endphp
                    
                    title: "{{ $type }}: {{ $title }}",
                    url: "{{ route('diary.show', $diary->id) }}",
                    start: "{{ $diary->dated }}"
                },
                @endforeach
                @endif
            ],
            eventRender: function(info) {
              info.el.querySelector('.fc-event-title').innerHTML = info.event.title;
            }
        });
        calendar.render();
    });
</script>
@endsection