@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>Alegrita x Mang Jose Bookings</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item active">Alegrita x Mang Jose 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" name="assigned_date" id="selected_date">
              </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 class="text-right action-width">ACTION</th>
                </thead>
                <tbody>
                  
                  @foreach ($fullybooker as $items)
                    <tr>
                      <td>{{ $items->id }}</td>
                      <td>{{ $items->assigned_date }}</td>
                      <td>
                        <form action="{{ url('admin/alegrita-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"></h4>
                  <form action="{{ url('admin/alegrita-bookings') }}" method="POST" id="mark-as-fully-booked-form">
                    @csrf
                    <input type="hidden" name="selected_date" id="selected-date-input">
                    <input type="hidden" name="branch" value="Buena Vida">
                    <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">
                Buena Vida 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/alegrita-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/alegrita-bookings') }}" class="primary text-decoration-underline link">View All</a>&emsp;
                <a href="{{ url('admin/alegrita-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>TIME</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>
                      {{ date('g:i A', strtotime($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>
                      <a href="{{ url('admin/alegrita-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/alegrita-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 {{ date('g:i A', strtotime($items->assigned_time)) }}</span><br>
                              {{-- <span>Preferred Menu:&nbsp; {{ $items->menu }}</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 assignedFullyDates = {!! json_encode($fullybookers) !!};

  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; // Store the selected date in the hidden input field
      document.getElementById('selected-date-input').value = selectedDate; // Set the selected date in the form's hidden input field

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

      document.getElementById('assigned-date-count').textContent = "Date Reserve Count: " + assignedDateCount; // Update the count in the modal
      $('#myModal').modal('show'); // Open the Bootstrap modal
    },
    eventColor: '#34a203', // Set the default event color to #34a203 (Reserved)
    events: assignedDates.map(function(date) {
      return { title: 'Reserved', date: date, color: '#34a203' }; // Set the color for Reserved events to #34a203
    }).concat(assignedFullyDates.map(function(date) {
      return { title: 'Fully Booked', date: date, display: 'background', color: '#f05129' }; // Set the color for Fully Booked events to #f05129
    })),
    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/alegrita-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")
//     }
// });

});
</script>
@endsection