@extends('layouts.contentLayoutMaster')

@section('title')
    Availability for: {{$user->fullName}}
@endsection

@section('pageVendorStyles')
    <link rel="stylesheet" type="text/css" href="/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/file-uploaders/dropzone.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/forms/select/select2.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/calendars/fullcalendar.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/calendars/extensions/daygrid.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/calendars/extensions/timegrid.min.css">
    <link rel="stylesheet" type="text/css" href="/vendors/css/pickers/pickadate/pickadate.css">
@endsection

@section('pageStyles')
    <link rel="stylesheet" type="text/css" href="{{ \App\Helpers\Helpers::assetLink('css/plugins/forms/validation/form-validation.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ \App\Helpers\Helpers::assetLink('css/plugins/calendars/fullcalendar.css') }}">
@endsection

@section('content')
    
    @include('elements.messages-error')
    
    <section id="basic-vertical-layouts">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-content">
                        <div class="card-body">
                            <div class="cal-category-bullets d-none">
                                <div class="bullets-group-1">
                                    <div class="category-business mr-1">
                                        <span class="bullet bullet-success bullet-sm mr-25"></span>
                                        Business
                                    </div>
                                    <div class="category-work mr-1">
                                        <span class="bullet bullet-warning bullet-sm mr-25"></span>
                                        Work
                                    </div>
                                </div>
                                <div class="bullets-group-2">
                                    <div class="category-personal mr-1">
                                        <span class="bullet bullet-danger bullet-sm mr-25"></span>
                                        Personal
                                    </div>
                                    <div class="category-others">
                                        <span class="bullet bullet-primary bullet-sm mr-25"></span>
                                        Others
                                    </div>
                                </div>
                            </div>
                            <div id='fc-default'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        @include('elements.eventModel')
    </section>

@endsection

@section('pageVendorScripts')

    <script src="/vendors/js/extensions/dropzone.min.js"></script>
    <script src="/vendors/js/tables/datatable/datatables.min.js"></script>
    <script src="/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/vendors/js/tables/datatable/datatables.bootstrap4.min.js"></script>
    <script src="/vendors/js/tables/datatable/buttons.bootstrap.min.js"></script>
    <script src="/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/vendors/js/forms/select/select2.full.min.js"></script>

    <script src="/vendors/js/extensions/moment.min.js"></script>
    <script src="/vendors/js/calendar/fullcalendar.min.js"></script>
    <script src="/vendors/js/calendar/extensions/daygrid.min.js"></script>
    <script src="/vendors/js/calendar/extensions/timegrid.min.js"></script>
    <script src="/vendors/js/calendar/extensions/interactions.min.js"></script>
    <script src="/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/vendors/js/pickers/pickadate/picker.date.js"></script>
@endsection

@section('pageScripts')
    <script type="text/javascript">
        let events = {!! $events !!};
        let userId = {{ $user->id }};
    </script>
    <script src="{{ \App\Helpers\Helpers::assetLink('js/scripts/ui/ui.js') }}"></script>
    <script src="{{ \App\Helpers\Helpers::assetLink('js/scripts/forms/validation/form-validation.js') }}"></script>
    <script src="{{ \App\Helpers\Helpers::assetLink('js/scripts/extensions/fullcalendar.js') }}"></script>

@endsection