@extends('admin.layouts.dashboard')
@section('title', 'All Orders')
@section('content')
<link href='assets/assets/vendor/core/main.css' rel='stylesheet' />
    <link href='assets/assets/vendor/daygrid/main.css' rel='stylesheet' />
    
   
    <!-- Style -->
    <link rel="stylesheet" href="assets/assets/css/css/style.css">  

<div class="container-fluid">
<div class="row ">
<div class="col-md-6  mt-3 mb-3">  <h3 class="mb-2 main-heading">Rental Management</h3></div>
                      <div class="col-md-6 mt-3 mb-3" style="margin-bottom: 10px;">
                      <div class="input-group rounded-2 border-0">
           <input type="" class="form-control" name="search" value="" id="ajaxSearchItem" placeholder="Search..">
           <div class="input-group-append">
                <button class="btn btn-primary search-btn" type="button">
                    <i class="fas fa-search fa-sm"></i>
                </button>
            </div></div>
           </div>
           </div>     
                   <div class="row" id="ajaxSearchData">
                    <div class="col-lg-12">

                            <div class="py-5">
                            <div id='calendar'></div>
                            </div>
                        </div>
                    </div>
                </div>
@endsection


<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content text-center">
    <i class="fa fa-check check" aria-hidden="true"></i>
      <div class="modal-body pb-5 px-3">
      
      
    </div>
    
    </div>
  </div>
</div>

<script>
      document.addEventListener('DOMContentLoaded', function() {
       // alert('hello');
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid' ],
      defaultDate: '2020-02-12',
      editable: true,
      eventClick: function(info) {
        const customer =  info.event.extendedProps.Customer;
        const title = info.event.title;
        const email = info.event.extendedProps.Email;
        const phone = info.event.extendedProps.Phone;
        const eventModal =document.getElementById('eventModal');

        // Set modal content
        eventModal.querySelector('.modal-body').innerHTML = `<h4 style="margin-bottom:20px;">Name: ${customer}</h4>
        <h4 style="margin-bottom:20px;">Tub: ${title}</h4>
        <h4 style="margin-bottom:20px;">Email: ${email}</h4>
        <h4>Phone: ${phone}</h4>`;

      // Show the modal
      $(eventModal).modal('show');

        alert('Coordinates: ' + info.jsEvent.pageX + ',' + info.jsEvent.pageY);
        alert('View: ' + info.view.type);

        change the border color just for fun
        info.el.style.borderColor = 'red';
      },
      eventLimit: true, // allow "more" link when too many events
      events: [
        {
          title: 'Sportster 140 (1-2 person)',
          
          extendedProps: {
            Customer: 'Joy',
            Email: 'ruby@gmail.com',
            Phone: '123-456-7890'
          },
          
          
          start: '2020-02-01'
        },
        {
          title: 'Legend 220 (3-4 people)',
          extendedProps: {
            Customer: 'Era',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          start: '2020-02-07'
        },
        {
          title: 'Resort 300 (4-6 people)',
          extendedProps: {
            Customer: 'James',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          start: '2020-02-09'
        },
        {
          title: 'The Portico (4-6 people)',
          extendedProps: {
            Customer: 'Hazel',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          start: '2020-02-16'
        },
        {
          title: 'Hot Tubs',
          extendedProps: {
            Customer: 'Lucy',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          end: '2020-02-13'
        },
        {
          title: 'Cold Plunges',
          extendedProps: {
            Customer: 'Eleanor',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          end: '2020-02-12'
        },
        {
          title: 'Saunas',
          extendedProps: {
            Customer: 'Mae',
            Email: 'ruby@gmail.com',
             Phone: '123-456-7890'
          },
          //url: 'http://google.com/',
          start: '2020-02-12'
        }
      ]
    });

    calendar.render();
  });

    </script>


    <script src='assets/assets/vendor/core/main.js'></script>
    <script src='assets/assets/vendor/interaction/main.js'></script>
    <script src='assets/assets/vendor/daygrid/main.js'></script>