@extends ('backend.layouts.app')

@section ('title', trans('labels.backend.departments.title'))

@section('after-styles')
    {{ Html::style("css/backend/plugin/datatables/dataTables.bootstrap.min.css") }}
    <link rel="stylesheet" href="{!! asset('css/fullcalendar.min.css') !!}">
    <link rel="stylesheet" href="{!! asset('css/fullcalendar.print.min.css') !!}" media="print">
    <link rel="stylesheet" href="{!! asset('css/scheduler.min.css') !!}">
    <style>


        #calendar {
            margin: 10px auto;
            min-height: 500px;
        }

        #calendar .fc-resource-cell {
            min-width: 200px;
        }

        html {
            overflow-x: scroll;
        }

        .fc-view-container {
            overflow: scroll;
            overflow: -moz-scrollbars-horizontal;
        }

        /*.fc-view.fc-agendaDay-view.fc-agenda-view {*/
        /*width: 300%;*/
        /*}*/
        ::-webkit-scrollbar {
            -webkit-appearance: none;
            width: 7px;
        }

        ::-webkit-scrollbar-thumb {
            border-radius: 4px;
            background-color: rgba(0, 0, 0, .5);
            -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
        }
    </style>
@endsection

@section('page-header')
    <h1>{{ trans('labels.backend.appointment.title') }}</h1>
@endsection

@section('content')
    <div class="box box-success">
        <div class="box-header with-border">


            <div class="box-tools pull-right">
                @permission('create-appointment')
                <div class="pull-right mb-10 hidden-sm hidden-xs">
                    {{ link_to_route('admin.appointment.create', trans('labels.backend.appointment.create'), [], ['class' => 'btn btn-success btn-m']) }}
                </div><!--pull right-->


                <div class="pull-right mb-10 hidden-lg hidden-md">
                    <div class="btn-group">
                        {{ link_to_route('admin.appointment.create', trans('labels.backend.appointment.create'), [], ['class' => 'btn btn-success btn-m']) }}

                    </div><!--btn group-->
                </div><!--pull right-->
                @endauth
                <div class="clearfix"></div>
            </div>
        </div><!-- /.box-header -->

        <div class="box-body">
            <div id='calendar'></div>
            <h3 class="box-title">{{ trans('labels.backend.appointment.management') }}</h3>
            <div class="table-responsive">
                <table id="roles-table" class="table table-condensed table-hover">
                    <thead>
                    <tr>
                        <th>{{ trans('labels.backend.appointment.patient-name') }}</th>
                        <th>{{ trans('labels.backend.appointment.doctor-name') }}</th>
                        <th>{{ trans('labels.backend.appointment.date') }}</th>
                        <th>{{ trans('labels.backend.appointment.status') }}</th>
                        <th>{{ trans('labels.general.actions') }}</th>


                    </tr>
                    </thead>
                </table>
            </div><!--table-responsive-->
        </div><!-- /.box-body -->
    </div><!--box-->

    <div class="box-tools pull-right">
        @permission('create-appointment')
        <div class="pull-right mb-10 hidden-sm hidden-xs">
            {{ link_to_route('admin.appointment.create', trans('labels.backend.appointment.create'), [], ['class' => 'btn btn-success btn-m']) }}
        </div><!--pull right-->


        <div class="pull-right mb-10 hidden-lg hidden-md">
            <div class="btn-group">
                {{ link_to_route('admin.appointment.create', trans('labels.backend.appointment.create'), [], ['class' => 'btn btn-success btn-m']) }}

            </div><!--btn group-->
        </div><!--pull right-->
        @endauth
        <div class="clearfix"></div>
    </div>


@endsection

@section('after-scripts')
    {{ Html::script("js/backend/plugin/datatables/jquery.dataTables.min.js") }}
    {{ Html::script("js/backend/plugin/datatables/dataTables.bootstrap.min.js") }}
    <script src="{!! asset('js/moment.min.js') !!}"></script>
    <script src="{!! asset('js/fullcalendar.min.js') !!}"></script>
    <script src="{!! asset('js/scheduler.min.js') !!}"></script>
    <script src="{!! asset('js/fullcalendar-lang-ro.js') !!}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/locales.js"></script>

    <script>

        //-----
        /*
         * @name DoubleScroll
         * @desc displays scroll bar on top and on the bottom of the div
         * @requires jQuery
         *
         * @author Pawel Suwala - http://suwala.eu/
         * @author Antoine Vianey - http://www.astek.fr/
         * @version 0.5 (11-11-2015)
         *
         * Dual licensed under the MIT and GPL licenses:
         * http://www.opensource.org/licenses/mit-license.php
         * http://www.gnu.org/licenses/gpl.html
         *
         * Usage:
         * https://github.com/avianey/jqDoubleScroll
         */
        (function ($) {

            jQuery.fn.doubleScroll = function (userOptions) {

                // Default options
                var options = {
                    contentElement: undefined, // Widest element, if not specified first child element will be used
                    scrollCss: {
                        'overflow-x': 'auto',
                        'overflow-y': 'hidden'
                    },
                    contentCss: {
                        'overflow-x': 'auto',
                        'overflow-y': 'hidden'
                    },
                    onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
                    resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
                    timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
                };

                $.extend(true, options, userOptions);

                // do not modify
                // internal stuff
                $.extend(options, {
                    topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
                    topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
                    topScrollBarInnerSelector: '.doubleScroll-scroll'
                });

                var _showScrollBar = function ($self, options) {

                    if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
                        // content doesn't scroll
                        // remove any existing occurrence...
                        $self.prev(options.topScrollBarWrapperSelector).remove();
                        return;
                    }

                    // add div that will act as an upper scroll only if not already added to the DOM
                    var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);

                    if ($topScrollBar.length == 0) {

                        // creating the scrollbar
                        // added before in the DOM
                        $topScrollBar = $(options.topScrollBarMarkup);
                        $self.before($topScrollBar);

                        // apply the css
                        $topScrollBar.css(options.scrollCss);
                        $self.css(options.contentCss);

                        // bind upper scroll to bottom scroll
                        $topScrollBar.bind('scroll.doubleScroll', function () {
                            $self.scrollLeft($topScrollBar.scrollLeft());
                        });

                        // bind bottom scroll to upper scroll
                        var selfScrollHandler = function () {
                            $topScrollBar.scrollLeft($self.scrollLeft());
                        };
                        $self.bind('scroll.doubleScroll', selfScrollHandler);
                    }

                    // find the content element (should be the widest one)
                    var $contentElement;

                    if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
                        $contentElement = $self.find(options.contentElement);
                    } else {
                        $contentElement = $self.find('>:first-child');
                    }

                    // set the width of the wrappers
                    $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
                    $topScrollBar.width($self.width());
                    $topScrollBar.scrollLeft($self.scrollLeft());

                }

                return this.each(function () {

                    var $self = $(this);

                    _showScrollBar($self, options);

                    // bind the resize handler
                    // do it once
                    if (options.resetOnWindowResize) {

                        var id;
                        var handler = function (e) {
                            _showScrollBar($self, options);
                        };

                        $(window).bind('resize.doubleScroll', function () {
                            // adding/removing/replacing the scrollbar might resize the window
                            // so the resizing flag will avoid the infinite loop here...
                            clearTimeout(id);
                            id = setTimeout(handler, options.timeToWaitForResize);
                        });

                    }

                });

            }

        }(jQuery));


        //-----


        $(function () {
            $('#roles-table').DataTable({
                sort: false,
                processing: true,
                serverSide: true,
                searching: false,
                ajax: {
                    url: '{{ route("admin.appointments.get") }}',
                    type: 'post'
                },
                "language": {
                    "sProcessing": "Procesează...",
                    "sLengthMenu": "Afișează ultimele_MENU_ programări",
                    "sZeroRecords": "Nu am găsit nimic - ne pare rău",
                    "sInfo": "Afișate de la _START_ la _END_ din _TOTAL_ programări",
                    "sInfoEmpty": "Afișate de la 0 la 0 din 0 înregistrări",
                    "sInfoFiltered": "(filtrate dintr-un total de _MAX_ programări)",
                    "sInfoPostFix": "",
                    "sSearch": "Caută:",
                    "sUrl": "",
                    "oPaginate": {
                        "sFirst": "Prima",
                        "sPrevious": "Precedenta",
                        "sNext": "Următoarea",
                        "sLast": "Ultima"
                    }
                },
                columns: [
                    {data: 'patient_id', name: '{{config('access.appointments_table')}}.patient_id'},
                    {data: 'doctor_id', name: '{{config('access.appointments_table')}}.doctor_id'},
                    {
                        data: 'start',
                        name: '{{config('access.appointments_table')}}.start',
                        searchable: false,
                    },

                    {data: 'status', name: '{{config('access.appointments_table')}}.status'},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],

                searchDelay: 100
            });
        });

        $(function () { // document ready


            $('#calendar').fullCalendar({
                defaultView: 'agendaDay',
                editable: false,
                selectable: true,
                slotDuration: '00:10:00',
                filterResourcesWithEvents: true,
                pickSeconds: false,
                height: "auto",
                schedulerLicenseKey: 'GPL-My-Pchangedroject-Is-Open-Source',
                locale: 'ro',
                eventLimit: true, // allow "more" link when too many events
                lazyFetching: false,
                eventClick: function (calEvent, jsEvent, view) {
                    if (calEvent.url) {

                        window.location(calEvent.url);
                        return false;
                    }

//                    alert('Event: ' + calEvent.title);
//                    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
//                    alert('View: ' + view.name);

                    // change the border color just for fun
//                    $(this).css('border-color', 'red');

                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'agendaDay,agendaTwoDay,agendaWeek,month'
                },
                minTime: "07:00:00",
                maxTime: "20:00:00",
                allDaySlot: false,


                startParam: 'start',
                endParam: 'end',
                resources: { // you can also specify a plain string like 'json/resources.json'
                    url: '{{ route("admin.appointments.doctors.ajax") }}',
                    error: function () {
                        alert("Eroare la incarcarea calendarului")
                    },
                    data: {
//                        start:$('#calendar').fullCalendar('getView').start ,
                        // end: end.format()
                    },
                },

                events: {

                    url: '{{ route("admin.appointments.events.ajax") }}',
                    error: function () {
                        alert("Eroare la incarcarea calendarului")
                    },
//                    data: {
////                        start:$('#calendar').fullCalendar('getView').start ,
//                        // end: end.format()
//                    },

                },

                select: function (start, end, jsEvent, view, resource) {
                    console.log(
                            'select',
                            start.format(),
                            end.format(),
                            resource ? resource.id : '(no resource)'
                    );
                },
                dayClick: function (date, jsEvent, view) {
                    console.log(view.name);
                    if (view.name === "month") {
                        $('#calendar').fullCalendar('gotoDate', date);
                        $('#calendar').fullCalendar('changeView', 'agendaDay');
                    }
                }
            });

        });

        $(document).ready(function () {
            $('.fc-view-container').doubleScroll();
        });

    </script>


@endsection