@extends('backend.layouts.app')

@section('content')
  <section class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1>Alegria Manila Bookings</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item active">Alegria Manila Bookings</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="card mb-5">
            <div class="card-header">
              <div class="card-title fw-bold">
                Reservation Dates
              </div>
              <div class="card-body">
                <div id='calendar'></div>
                <input type="hidden" id="selected-date-input">
              </div>
            </div>
          </div>

          <div class="card">
            <div class="card-header fw-bold">
              Manage Fully Booked Dates
            </div>
            <div class="card-body">
              <table id="fullTable" class="table table-striped table-responsive-md">
                <thead class="thead-dark">
                  <th>ID</th>
                  <th>FULLY BOOKED DATES</th>
                  <th>RESERVATION TYPE</th>
                  <th class="text-right action-width">ACTION</th>
                </thead>
                <tbody>
                  
                  @foreach ($fullybooker as $items)
                    <tr>
                      <td>{{ $items->id }}</td>
                      <td>{{ $items->assigned_date }}</td>
                      <td>{{ $items->assigned_time }}</td>
                      <td>
                        <form action="{{ url('admin/mnl-bookings-destroy/' . $items->id ) }}" method="POST" class="mx-3"> @csrf @method('delete')
                          <button class="btn btn-danger" type="submit">Unmark</button>
                        </form>
                      </td>
                    </tr>
                  @endforeach

                </tbody>
              </table>
            </div>
          </div>

          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel">Selected Date</h4>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <h4 id="assigned-date-count">Date Reserve Count: 0</h4>
                  <h4 id="lunch-reserve-count">Lunch Reserve Count: 0</h4>
                  <h4 id="first-seating-count">1st Seating Count: 0</h4>
                  <h4 id="second-seating-count">2nd Seating Count: 0</h4>
                  <form action="{{ url('admin/mnl-bookings') }}" method="POST" id="mark-as-fully-booked-form">
                    @csrf
                    <select class="form-select my-3" required name="assigned_time" aria-label="Default select example">
                      <option selected hidden disable>Select Seating to Fully Booked</option>
                      <option value="11AM - 1PM">11AM - 1PM</option>
                      <option value="4PM - 6PM">4PM - 6PM</option>
                      <option value="8PM - 10PM">8PM - 10PM</option>
                    </select>
                    <input type="hidden" name="assigned_date" id="selected_date">
                    <input type="hidden" name="branch" value="Alegria Manila">
                    <button type="submit" class="btn btn-primary bg-dark">Mark as Fully Booked</button>
                  </form>
                </div>
                
              </div>
            </div>
          </div>
          

          <div class="card">

            <div class="card-header">
              <div class="card-title fw-bold">
                Alegria Manila Bookings
              </div>
              <a href="#" class="float-right">
                Export
              </a>
            </div>

            <div class="card-body">
              <div class="row mb-5">
                <div class="col-md-4">
                  <div class="form-floating">
                      <input name="date" required type="date" class="form-control date_from" id="floatingInput" placeholder="name@example.com" value="">
                      <label for="floatingInput">DATE FROM</label>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-floating">
                        <input name="date" required type="date" class="form-control date_to" id="floatingInput" placeholder="name@example.com" value="">
                        <label for="floatingInput">DATE TO</label>
                      </div>
                </div>
                @if (Request::get('filter'))
                <div class="col-md-4 d-flex align-items-center">
                  <a href="{{ url('admin/mnl-bookings') }}" class="btn btn-secondary btn-filter">Reset</a>&nbsp;
                </div>
                @endif
                <div class="col-md-4 d-flex align-items-center">
                  <button class="btn btn-success btn-filter">Filter</button>&nbsp;
                </div>
              </div>
              <div class="d-flex justify-content-between">
                <div>
                <a href="{{ url('admin/mnl-bookings') }}" class="primary text-decoration-underline link">View All</a>&emsp;
                <a href="{{ url('admin/mnl-bookings?today=1') }}" class="primary text-decoration-underline link">View Today</a>
                </div>
            </div>
              <table id="bookingsTable" class="table table-striped table-responsive-md">
                <thead class="thead-dark">
                  <tr>
                    <th>ID</th>
                    <th>BRANCH</th>
                    <th>CUSTOMER INFO</th>
                    <th>DATE </th>
                    <th>RESERVATION TYPE</th>
                    <th class="text-right action-width">ACTION</th>
                  </tr>
                </thead>
                <tbody>

                  @foreach ($reservation as $items)
                  <tr>
                    <td>
                      {{ $items->id }}
                    </td>
                    <td>
                      {{ $items->branch }}
                    </td>
                    <td>
                      <span>{{ $items->first_name }} {{ $items->last_name }}</span><br>
                      <span>{{ $items->contact }}</span><br>
                      <span class="fw-bold text-uppercase">{{ $items->payment_method }}</span>
                    </td>
                    <td>
                      {{ $items->assigned_date }}
                    </td>
                    <td>
                      {{ $items->assigned_time }}
                    </td>
                    <td class="action-width">
                      <button type="button" class="btn btn-success mb-2 w-75" data-bs-toggle="modal" data-bs-target="#exampleModal{{ $items->id }}">
                        View
                      </button>
                      @if ($items->payment_status == 'Unpaid')
                      <form action="{{ url('admin/mnl-bookings/' . $items->id) }}" method="POST">
                          <input type="hidden" value="Paid" name="payment_status" />
                          @csrf @method('PUT')
                          <button type="submit" class="btn btn-primary mb-2 w-75">
                              Paid
                          </button>
                      </form>
                      @endif
                      <a href="{{ url('admin/mnl-bookings/' . $items->id) }}/edit" class="btn btn-secondary w-100 mb-2 btn-width">Edit</a>
                      <a href="" class="btn btn-danger w-100 btn-width" onclick="event.preventDefault(); document.getElementById('delete-form-{{ $items->id }}').submit();">Delete</a>
                      <form id="delete-form-{{ $items->id }}" action="{{ url('admin/mnl-bookings/' . $items->id) }}" method="POST" class="d-none">
                        @csrf @method('delete')
                      </form>
                    </td>
                  </tr>

                  <div class="modal fade" id="exampleModal{{ $items->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                      <div class="modal-content">
                        <div class="modal-header border-bottom-0">
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                              <div class="mb-5">
                                <span class="font-weight-bold">Customer Info</span><br>
                                <span>Customer Name:&nbsp; {{ $items->first_name }} {{ $items->last_name }}</span><br>
                                <span>Address:&nbsp; {{ $items->email }}</span><br>
                                <span>Contact No:&nbsp; {{ $items->contact }}</span><br>
                            </div>

                            <div>
                                <span class="font-weight-bold">Reservation Info</span><br>
                                <span>Branch:&nbsp; {{ $items->branch }}</span><br>
                                <span>Reservation Schedule:&nbsp; {{ date('M j, Y', strtotime($items->assigned_date)) }} at {{ $items->assigned_time }}</span><br>
                                <span>Preferred Menu:&nbsp; {{ $items->menu }}</span><br>
                                <span>PAX:&nbsp; {{ $items->pax }}</span><br>
                                <span>Diet Restrictions:&nbsp; {{ $items->diet }}</span><br>
                                <span>Deposit Fee:&nbsp; P{{ $items->amount }}</span><br>
                                <span>Payment Method:&nbsp; {{ $items->payment_method }}</span><br>
                                <span>Payment Status:&nbsp; {{ $items->payment_status }}</span><br>
                            </div>
                        </div>
                        <div class="modal-footer border-top-0">
                          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                      </div>
                    </div>
                  </div>
                @endforeach

                </tbody>
              </table>
            </div>

          </div>
        </div>
      </div>
    </div>
  </section>

@endsection

@section('css')
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css" />
@endsection

@section('js')
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
  <script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
  <script>
    $(document).ready(function() {
      $('#bookingsTable').DataTable({
        stateSave: true,
        order: [[0, 'desc']]
      });
    });

    document.addEventListener('DOMContentLoaded', function() {
    var assignedDates = {!! json_encode($bookers) !!};
    var assignedFullyLunch = {!! json_encode($fullyLunch) !!};
    var assignedFullyFirst = {!! json_encode($fullyFirst) !!};
    var assignedFullySecond = {!! json_encode($fullySecond) !!};
    var lunchBooking = {!! json_encode($lunchBooking) !!};
    var firstBooking = {!! json_encode($firstBooking) !!};
    var secondBooking = {!! json_encode($secondBooking) !!};
    var uniqueReservedDates = [];

    // Filter and get unique dates from assignedDates
    assignedDates.forEach(function(date) {
      if (!uniqueReservedDates.includes(date)) {
        uniqueReservedDates.push(date);
      }
    });

    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
      selectable: true,
      select: function(info) {
        var selectedDate = info.startStr; // Get the selected date
        document.getElementById('selected_date').value = selectedDate;
        document.getElementById('selected-date-input').textContent = selectedDate;

        // Count the assigned dates with the same date as the selected date
        var assignedDateCount = assignedDates.filter(function(date) {
          return date === selectedDate;
        }).length;

        // Count the lunchBooking, firstBooking, and secondBooking for the selected date
        var lunchReserveCount = lunchBooking.filter(function(date) {
          return date === selectedDate;
        }).length;
        var firstSeatingCount = firstBooking.filter(function(date) {
          return date === selectedDate;
        }).length;
        var secondSeatingCount = secondBooking.filter(function(date) {
          return date === selectedDate;
        }).length;

        document.getElementById('assigned-date-count').textContent = "Date Reserve Count: " + assignedDateCount;
        document.getElementById('lunch-reserve-count').textContent = "Lunch Reserve Count: " + lunchReserveCount;
        document.getElementById('first-seating-count').textContent = "1st Seating Count: " + firstSeatingCount;
        document.getElementById('second-seating-count').textContent = "2nd Seating Count: " + secondSeatingCount;

        $('#myModal').modal('show'); // Open the Bootstrap modal
      },
      eventColor: '#34a203', // Set the default event color to #34a203 (Reserved)
      events: uniqueReservedDates.map(function(date) {
        return { title: 'Reserved', date: date, color: '#34a203' };
      }).concat(assignedFullyLunch.map(function(date) {
        return { title: 'Lunch Seating Fully Booked', date: date, color: '#ff0000' };
      })).concat(assignedFullyFirst.map(function(date) {
        return { title: 'First Seating Fully Booked', date: date, color: '#ff0000' };
      })).concat(assignedFullySecond.map(function(date) {
        return { title: 'Second Seating Fully Booked', date: date, color: '#ff0000' };
      })),
      eventRender: function(info) {
        if (info.event.title === 'Reserved' && info.event.extendedProps.display === 'background') {
          return false; // Do not display the 'Reserved' event when it is fully booked
        }
      }
    });

    calendar.render();
  });



$(document).ready(function() {

$('.btn-filter').click(function(){
    from = $('.date_from').val();
    to = $('.date_to').val();
    if (from == '' || to == '') {
        alert('please select date.');
    } else {
        window.location.href = '{{ url('admin/mnl-bookings') }}?filter='+from+'_'+to;
    }
});

// $('.btn-export').click(function(){
//     from = $('.date_from').val();
//     to = $('.date_to').val();
//     if (from == '' || to == '') {
//         alert('please select date.');
//     } else {
//         window.open("{{ url('medical-clinic/appointments') }}?export=1&filter=" +from+'_'+to, "_blank")
//     }
// });

});

  $(document).ready(function() {
      $('#fullTable').DataTable({
        order: [[0, 'desc']],
      });
  });
</script>
@endsection