@include('admin::layouts.header')
<?php
use App\Models\CustomerDetails;
use App\Models\User;
use App\Models\Products;

?>
<main id="main-container">
        <!-- Hero -->
        <div class="bg-body-light">
          <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
              <h1 class="flex-grow-1 fs-3 fw-semibold my-2 my-sm-3">Bookings</h1>
              <nav class="flex-shrink-0 my-2 my-sm-0 ms-sm-3" aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">Dashboard</li>
                  <li class="breadcrumb-item">Sales</li>
                  <li class="breadcrumb-item active" aria-current="page">Bookings</li>
                </ol>
              </nav>
            </div>
          </div>
        </div>
        <!-- END Hero -->

        <!-- Page Content -->
        <div class="content">
          <!-- Your Block -->
          <div class="block block-rounded">
            <div class="block-header block-header-default">
              <h3 class="block-title">Bookings</h3>
            </div>
            <div class="block-content">
            @if(Session::has('success')) <div class="alert alert-success mt-2 mb-2">{{ Session::get('success') }}</div>@endif
            @if(Session::has('fail')) <div class="alert alert-danger mt-2 mb-2">{{ Session::get('fail') }}</div>@endif
             <div id='calendar'></div>
            </div>
          </div>
          <!-- END Your Block -->
        </div>
        <!-- END Page Content -->
</main>
<!-- END Main Container -->
@include('admin::layouts.footer')
<script src='https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js'></script>
<script>
    var calendarEl = document.getElementById('calendar');
    var bookings = @json($bookings);

    var events = bookings.map(function(booking) {
        return {
            id: booking.id,
            title: booking.title,
            start: booking.start,
            end: booking.end,
            extendedProps: {
                customer: booking.customer,
                phone: booking.phone,
                email: booking.email,
                products: booking.products,
                start_time: booking.start_time,
                end_time: booking.end_time,
                date: booking.date,
            },
            color: '#0665d0',
        };
    });

    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        selectable: true,
        events: events,
        eventClick: function(info) {
            var booking = info.event.extendedProps;

            document.getElementById('modalCustomer').innerText = booking.customer;
            document.getElementById('modalProducts').innerText = booking.products;
            document.getElementById('modalStartTime').innerText = booking.start_time;
            document.getElementById('modalEndTime').innerText = booking.end_time;
            document.getElementById('modalDate').innerText = booking.date;
            document.getElementById('modalEmail').innerText = booking.email;
            document.getElementById('modalPhone').innerText = booking.phone;

            var bookingModal = new bootstrap.Modal(document.getElementById('bookingModal'));
            bookingModal.show();

            info.jsEvent.preventDefault(); // prevent browser redirect
        },
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay'
        }
    });

    calendar.render();
</script>


<!-- Booking Detail Modal -->

<div class="modal" id="bookingModal" tabindex="-1" role="dialog" aria-labelledby="bookingModal" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
    <div class="block block-rounded block-themed block-transparent mb-0">
      <div class="block-header bg-primary-dark">
        <h3 class="block-title">Booking Details</h3>
        <div class="block-options">
          <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
            <i class="fa fa-fw fa-times"></i>
          </button>
        </div>
      </div>
      <div class="block-content">
            <p><strong>Customer:</strong> <span id="modalCustomer"></span></p>
            <p><strong>Email:</strong> <span id="modalEmail"></span></p>
            <p><strong>Phone:</strong> <span id="modalPhone"></span></p>
            <p><strong>Products:</strong> <span id="modalProducts"></span></p>
             <p><strong>Date:</strong> <span id="modalDate"></span></p>
            <p><strong>Start Time:</strong> <span id="modalStartTime"></span></p>
            <p><strong>End Time:</strong> <span id="modalEndTime"></span></p>
      </div>
      <div class="block-content block-content-full text-end bg-body">
        <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">Done</button>
      </div>
    </div>
  </div>
</div>
</div>