@extends('admin.layouts.contentLayoutMaster')

@section('title', $title)

@section('vendor-style')
  <!-- Vendor css files -->
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/calendars/fullcalendar.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/calendars/extensions/daygrid.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/calendars/extensions/timegrid.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('admin/vendors/css/pickers/pickadate/pickadate.css')) }}">
@endsection
@section('page-style')
  <!-- Page css files -->
  <link rel="stylesheet" href="{{ asset(mix('admin/css/plugins/calendars/fullcalendar.css')) }}">
  <style>
    .fc-sun {
      color: red;
      border-color: red;
    }
    .fc .fc-view-container .fc-body .fc-week table tbody .fc-other-month {
      background-color: white;
    }

    .fc .fc-view-container .fc-head .fc-head-container thead .fc-day-header.fc-today {
      color: red;
    }

    .fc-more-popover .fc-event-container {
      overflow: scroll;
      max-height: 200px;
    }
  </style>
@endsection

@section('content')
  <!-- Full calendar start -->
  <section id="basic-examples">
    <div class="row">
      <div class="col-3">
        <div class="card">
          <div class="card-content">
            <div class="card-body">
                <label>Locations</label>
                <div class="vs-checkbox-con vs-checkbox-primary">
                    <input type="checkbox" value="true" class="location-checkbox" data-location-id="-1">
                    <span class="vs-checkbox">
                    <span class="vs-checkbox--check">
                      <i class="vs-icon feather icon-check"></i>
                    </span>
                  </span>
                    <span class="bullet bullet-sm mr-25"></span>

                    <span>View All</span>
                </div>
                <hr>
                @foreach ($locations as $location)
                    <div class="mr-1">
                        <div class="vs-checkbox-con vs-checkbox-primary">
                            <input type="checkbox" value="false" class="location-checkbox" data-location-id="{{ $location->id }}">
                            <span class="vs-checkbox">
                      <span class="vs-checkbox--check">
                        <i class="vs-icon feather icon-check"></i>
                      </span>
                    </span>
                            <span>
                      <span class="bullet bullet-sm mr-25" style="background-color: {{ $location->color }} ;"></span>
                      {{ $location->name }}
                    </span>
                        </div>
                    </div>
                @endforeach
                <br>

              <label>Ticket Type</label>
              <div class="vs-checkbox-con vs-checkbox-primary">
                <input type="checkbox" value="true" class="ticket-type-checkbox" data-ticket-type="-1">
                <span class="vs-checkbox">
                    <span class="vs-checkbox--check">
                      <i class="vs-icon feather icon-check"></i>
                    </span>
                  </span>
                  <span class="bullet bullet-sm mr-25"></span>
                  <span>View All</span>
              </div>
              <hr>
              @foreach ($ticketTypeEnums as $key => $ticketType)
                <div class="mr-1">
                  <div class="vs-checkbox-con vs-checkbox-primary">
                    <input type="checkbox" value="false" class="ticket-type-checkbox" data-ticket-type="{{ $ticketType["code"] }}">
                    <span class="vs-checkbox">
                      <span class="vs-checkbox--check">
                        <i class="vs-icon feather icon-check"></i>
                      </span>
                    </span>
                    <span>
                      <span class="bullet bullet-sm mr-25" style="background-color: {{ $ticketType["color"] }}; border-radius: 0px;"></span>
                      {{ $ticketType["name"] }}
                    </span>
                  </div>
                </div>
              @endforeach
            </div>
          </div>
        </div>
      </div>
      <div class="col-9">
        <div class="card">
          <div class="card-content">
            <div class="card-body">
              <div id='fc-default'></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- calendar Modal starts-->
    <div class="modal fade text-left modal-calendar" tabindex="-1" role="dialog" aria-labelledby="cal-modal"
         aria-modal="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title text-text-bold-600" id="cal-modal">Add Event</h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <form action="#">
            <div class="modal-body">
              <div class="d-flex justify-content-between align-items-center add-category">
                <div class="chip-wrapper"></div>
                <div class="label-icon pt-1 pb-2 dropdown calendar-dropdown">
                  <i class="feather icon-tag dropdown-toggle" id="cal-event-category" data-toggle="dropdown"></i>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="cal-event-category">
                  <span class="dropdown-item business" data-color="success">
                    <span class="bullet bullet-success bullet-sm mr-25"></span>
                    Business
                  </span>
                    <span class="dropdown-item work" data-color="warning">
                    <span class="bullet bullet-warning bullet-sm mr-25"></span>
                    Work
                  </span>
                    <span class="dropdown-item personal" data-color="danger">
                    <span class="bullet bullet-danger bullet-sm mr-25"></span>
                    Personal
                  </span>
                    <span class="dropdown-item others" data-color="primary">
                    <span class="bullet bullet-primary bullet-sm mr-25"></span>
                    Others
                  </span>
                  </div>
                </div>
              </div>
              <fieldset class="form-label-group">
                <input type="text" class="form-control" id="cal-event-title" placeholder="Event Title">
                <label for="cal-event-title">Event Title</label>
              </fieldset>
              <fieldset class="form-label-group">
                <input type="text" class="form-control pickadate" id="cal-start-date" placeholder="Start Date">
                <label for="cal-start-date">Start Date</label>
              </fieldset>
              <fieldset class="form-label-group">
                <input type="text" class="form-control pickadate" id="cal-end-date" placeholder="End Date">
                <label for="cal-end-date">End Date</label>
              </fieldset>
              <fieldset class="form-label-group">
                <textarea class="form-control" id="cal-description" rows="5" placeholder="Description"></textarea>
                <label for="cal-description">Description</label>
              </fieldset>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary cal-add-event waves-effect waves-light" disabled>
                Add Event</button>
              <button type="button" class="btn btn-primary d-none cal-submit-event waves-effect waves-light"
                      disabled>submit</button>
              <button type="button" class="btn btn-flat-danger cancel-event waves-effect waves-light"
                      data-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-flat-danger remove-event d-none waves-effect waves-light"
                      data-dismiss="modal">Remove</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- calendar Modal ends-->
  </section>
  <!-- // Full calendar end -->
@endsection

@section('vendor-script')
  <!-- Vendor js files -->
  <script src="{{ asset(mix('admin/vendors/js/extensions/moment.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/calendar/fullcalendar.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/calendar/extensions/daygrid.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/calendar/extensions/timegrid.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/calendar/extensions/interactions.min.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/pickers/pickadate/picker.js')) }}"></script>
  <script src="{{ asset(mix('admin/vendors/js/pickers/pickadate/picker.date.js')) }}"></script>
@endsection
@section('page-script')

  <!-- Page js files -->
  <script type="text/javascript">
    $(document).ready(function (e) {
        $("body").addClass("menu-collapsed");

        // color object for different event types
        var filters = {
            location_ids: {},
            ticket_types: {}
        };

        var colors = {
            primary: "#28c76f",
            success: "#28c76f",
            danger: "#ea5455",
            warning: "#ff9f43"
        };

        // chip text object for different event types
        var categoryText = {
            primary: "Others",
            success: "Business",
            danger: "Personal",
            warning: "Work"
        };
        var categoryBullets = $(".cal-category-bullets").html(),
            evtColor = "",
            eventColor = "";

        // calendar init
        var calendarEl = document.getElementById('fc-default');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ["dayGrid", "timeGrid", "interaction"],
            header: {
                  left: "dayGridMonth,dayGridWeek,dayGridDay",
                  right: "prev,title,next"
            },
            displayEventTime: false,
            navLinks: true,
            editable: true,
            allDay: false,
            lazyFetching: true,
            eventLimit: true, // for all non-TimeGrid views
            views: {
                timeGrid: {
                    eventLimit: 6 // adjust to 6 only for timeGridWeek/timeGridDay
                },
            },
            events: {
                url: "{{ route("admin.booking-calendar.get-bookings") }}",
                method: 'POST',
                extraParams: function() {
                    return {
                        "_token" : "{{ csrf_token() }}",
                        "filters" : JSON.stringify(filters)
                    };
                },
                failure: function() {
                    Swal.fire(
                      'Oops, something when wrongs.',
                      "Failed to get Booking.",
                      'error'
                    );
                }
            },
            // allDaySlot: false,
            // scrollTime: "00:00:00",
            // slotLabelFormat: {
            //     hour: '2-digit',
            //     minute: '2-digit',
            //     meridiem: false
            // },
            locale: "id",
            // nowIndicator: true,
            dayRender: function (obj) {
                var $el = $(obj.el);

                if (obj.date < moment("{{ Carbon::now()->format("Y-m-d") }}")) {
                    $el.attr("style", "background-color: #f1f1f1;");
                }
            },
            eventRender: function(info) {
                var $el = $(info.el);
                var $fcTitle = $el.find(".fc-title");

                $el.attr("style", "background: white !important; padding-left: 5px;");
                $fcTitle.attr("style", "color: black");
                $fcTitle.prepend('<span class="bullet bullet-sm" style="background-color: ' + info.event.extendedProps.ticket_type_color +  '; border-radius: 0px;"></span> ');
                $fcTitle.prepend('<span class="bullet bullet-sm" style="background-color: ' + info.event.extendedProps.location_color +  ';"></span> ');

                var contentHtml = '<div>';
                contentHtml += '<p>' + info.event.extendedProps.booking_schedule_label + '</p>';
                contentHtml += '<span><i class="fa fa-circle"></i> ' + info.event.extendedProps.customer_name + '</span><br>';
                contentHtml += '<span><i class="fa fa-map-marker"></i> ' + info.event.extendedProps.location_name + '</span><br>';
                contentHtml += '<span><i class="fa fa-square"></i> ' + info.event.extendedProps.ticket_type + '</span><br><br>';

                var url = "{{ url("admin/booking/") }}/" + info.event.extendedProps.booking_id + "/show";
                contentHtml += '<a class="btn btn-primary btn-sm" href="' + url + '"'+ '>Detail</a>';
                contentHtml += "</div>";

                $el.popover({
                    html: true,
                    title: info.event.extendedProps.order_id + "<a href='#' id='close-event-popover-btn-" + info.event.extendedProps.booking_id + "' class='pull-right  white'>X</a>",
                    content: contentHtml,
                    trigger: 'click',
                    placement: 'top',
                    container: 'body'
                }).on('shown.bs.popover', function() {
                    $("#close-event-popover-btn-" + info.event.extendedProps.booking_id).on("click", function (e) {
                        e.preventDefault();
                        $el.popover("hide");
                    });
                });
            }
        });

        // render calendar
        calendar.render();

        function generateUnorderedListHandler(data, $appendTarget) {
            for (var key in data) {
                var $option = $('<option>', {
                    text: data[key],
                    value: key
                });

                $appendTarget.append($option);
            }
        }

        // Locations
        $(".location-checkbox").on("change", function (e) {
            e.preventDefault();

            var locationId = $(this).data("location-id");
            if ($(this).is(":checked")) {
                if (locationId == -1) { // is view all checkbox
                    $(".location-checkbox").prop("checked", true);
                } else {
                    $(".location-checkbox[data-location-id='-1']").prop("checked", false);
                }
            } else {
                if (locationId == -1) { // is view all checkbox
                    $(this).prop("checked", true);
                } else {
                    if ($(".location-checkbox:checked").length == 0) {
                        $(".location-checkbox").prop("checked", true);
                    } else {
                        $(".location-checkbox[data-location-id='-1']").prop("checked", false);
                    }
                }
            }

            filters.location_ids = {};
            $(".location-checkbox:checked").each(function (index, item) {
                var secondLocationId = $(item).data("location-id");

                if (secondLocationId != -1) {
                    filters.location_ids[secondLocationId] = secondLocationId;
                }
            });

            calendar.refetchEvents();
        });

        $(".location-checkbox[data-location-id='-1']").prop("checked", true).trigger('change');



        // Ticket Types
        $(".ticket-type-checkbox").on("change", function (e) {
            e.preventDefault();

            var ticketType = $(this).data("ticket-type");
            if ($(this).is(":checked")) {
                if (ticketType == -1) { // is view all checkbox
                    $(".ticket-type-checkbox").prop("checked", true);
                } else {
                    $(".ticket-type-checkbox[data-ticket-type='-1']").prop("checked", false);
                }
            } else {
                if (ticketType == -1) { // is view all checkbox
                    $(this).prop("checked", true);
                } else {
                    if ($(".ticket-type-checkbox:checked").length == 0) {
                        $(".ticket-type-checkbox").prop("checked", true);
                    } else {
                        $(".ticket-type-checkbox[data-ticket-type='-1']").prop("checked", false);
                    }
                }
            }

            filters.ticket_types = {};
            $(".ticket-type-checkbox:checked").each(function (index, item) {
                var secondTicketType = $(item).data("ticket-type");

                if (secondTicketType != -1) {
                    filters.ticket_types[secondTicketType] = secondTicketType;
                }
            });

            calendar.refetchEvents();
        });

        $(".ticket-type-checkbox[data-ticket-type='-1']").prop("checked", true).trigger('change');


        // appends bullets to left class of header
        $("#basic-examples .fc-right").append(categoryBullets);

        // Close modal on submit button
        $(".modal-calendar .cal-submit-event").on("click", function () {
            $(".modal-calendar").modal("hide");
        });

        // Remove Event
        $(".remove-event").on("click", function () {
            var removeEvent = calendar.getEventById('newEvent');
            removeEvent.remove();
        });

        // reset input element's value for new event
        if ($("td:not(.fc-event-container)").length > 0) {
            $(".modal-calendar").on('hidden.bs.modal', function (e) {
                $('.modal-calendar .form-control').val('');
            })
        }

        // remove disabled attr from button after entering info
        $(".modal-calendar .form-control").on("keyup", function () {
            if ($(".modal-calendar #cal-event-title").val().length >= 1) {
                $(".modal-calendar .modal-footer .btn").removeAttr("disabled");
            }
            else {
                $(".modal-calendar .modal-footer .btn").attr("disabled", true);
            }
        });

        // change chip's and event's color according to event type
        $(".calendar-dropdown .dropdown-menu .dropdown-item").on("click", function () {
            var selectedColor = $(this).data("color");
            evtColor = colors[selectedColor];
            eventTag = categoryText[selectedColor];
            eventColor = selectedColor;

            // changes event color after selecting category
            $(".cal-add-event").on("click", function () {
                calendar.addEvent({
                    color: evtColor,
                    dataEventColor: eventColor,
                    className: eventColor
                });
            })

            $(".calendar-dropdown .dropdown-menu").find(".selected").removeClass("selected");
            $(this).addClass("selected");

            // add chip according to category
            $(".modal-calendar .chip-wrapper .chip").remove();
            $(".modal-calendar .chip-wrapper").append($("<div class='chip chip-" + selectedColor + "'>" +
                "<div class='chip-body'>" +
                "<span class='chip-text'> " + eventTag + " </span>" +
                "</div>" +
                "</div>"));
        });
    });
  </script>
@endsection