@extends('layouts/contentLayoutMaster')

@section('title', 'Calender')

@section('vendor-style')
  <span id='csrf' style='display:none'>{{ csrf_token() }}</span>
  <!-- Vendor css files -->
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/calendars/fullcalendar.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/forms/select/select2.min.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('vendors/css/pickers/flatpickr/flatpickr.min.css')) }}">
@endsection

@section('page-style')
  <!-- Page css files -->
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/pickers/form-flat-pickr.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/pages/app-calendar.css')) }}">
  <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/forms/form-validation.css')) }}">
@endsection

@section('content')
<!-- Full calendar start -->
<section>
  <div class="app-calendar overflow-hidden border">
    <div class="row g-0">
      <!-- Sidebar -->
      <div class="col app-calendar-sidebar flex-grow-0 overflow-hidden d-flex flex-column" id="app-calendar-sidebar">
        <div class="sidebar-wrapper">
          <div class="card-body d-flex justify-content-center">
            <button
              class="btn btn-primary btn-toggle-sidebar w-100"
              data-bs-toggle="modal"
              data-bs-target="#add-new-sidebar"
            >
              <span class="align-middle">{{ __('locale.'.'Add Appointment') }}</span>
            </button>
          </div>
          <div class="card-body pb-0">
            <h5 class="section-label mb-1">
              <span class="align-middle">Filter</span>
            </h5>
            <div class="calendar-events-filter">
              <div class="form-check form-check-danger mb-1">
                <input
                  type="checkbox"
                  class="form-check-input input-filter"
                  id="personal"
                  data-value="personal"
                  checked
                />
                <label class="form-check-label" for="personal">{{ __('locale.Personal') }}</label>
              </div>
              <div class="form-check form-check-warning mb-1">
                <input type="checkbox" class="form-check-input input-filter" id="appointment" data-value="appointment" checked />
                <label class="form-check-label" for="appointment">{{ __('locale.Appointment') }}</label>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Sidebar -->

      <!-- Calendar -->
      <div class="col position-relative">
        <div class="card shadow-none border-0 mb-0 rounded-0">
          <div class="card-body pb-0">
            <div id="calendar"></div>
          </div>
        </div>
      </div>
      <!-- /Calendar -->
      <div class="body-content-overlay"></div>
    </div>
  </div>
  <!-- Calendar Add/Update/Delete event modal-->
  <div class="modal modal-slide-in event-sidebar fade" id="add-new-sidebar">
    <div class="modal-dialog sidebar-lg">
      <div class="modal-content p-0">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
        <div class="modal-header mb-1">
          <h5 class="modal-title">{{ __('locale.Add Event') }}</h5>
        </div>
        <div class="modal-body flex-grow-1 pb-sm-0 pb-3">
          <form class="event-form needs-validation" data-ajax="false" novalidate>
            <div class="mb-1">
              <label for="select-label" class="form-label">{{ __('locale.Calendar') }}</label>
              <select class="select2 select-label form-select w-100" id="select-label" name="select-label">
                <option data-label="primary" value="Appointment" selected>{{ __('locale.Appointment') }}</option>
                <option data-label="danger" value="Personal">{{ __('locale.Personal') }}</option>
              </select>
            </div>
            <div class="mb-1">
              <label for="title" class="form-label">{{ __('locale.Name') }}</label>
              <input type="text" class="form-control" id="title" name="title" placeholder="{{ __('locale.Name') }}" required />
            </div>
           <div class="mb-1">
               <label class="form-label" for="phone">{{ __('locale.Phone') }}</label>
               <div class="input-group input-group-merge">
                   <span class="input-group-text">CR (+506)</span>
                   <input type="text" class="form-control phone-number-mask" placeholder="8888 8888" id="phone" name="phone" />
               </div>
           </div>
           <div class="mb-1">
               <label class="form-label" for="email">{{ __('locale.Email') }}</label>
               <input type="email" id="email" name="email" class="form-control" placeholder="john.doe@email.com" aria-label="john.doe@email.com" />
           </div>
            <div class="mb-1 position-relative">
              <label for="start-date" class="form-label">Start Date</label>
              <input type="text" class="form-control" id="start-date" name="start-date" placeholder="Start Date" required />
            </div>
            <div class="mb-1 position-relative">
              <label for="end-date" class="form-label">End Date</label>
              <input type="text" class="form-control" id="end-date" name="end-date" placeholder="End Date" required />
            </div>
            <div class="mb-1">
              <div class="form-check form-switch">
                <input type="checkbox" class="form-check-input allDay-switch" id="customSwitch3" />
                <label class="form-check-label" for="customSwitch3">All Day</label>
              </div>
            </div>
            <div class="mb-1 d-flex">
              <button type="submit" class="btn btn-primary add-event-btn me-1">Add</button>
              <button type="button" class="btn btn-outline-secondary btn-cancel" data-bs-dismiss="modal">Cancel</button>
              <button type="submit" class="btn btn-primary update-event-btn d-none me-1">Update</button>
              <button class="btn btn-outline-danger btn-delete-event d-none">Delete</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
  <!--/ Calendar Add/Update/Delete event modal-->
</section>
<!-- Full calendar end -->
@endsection

@section('vendor-script')
  <script>
    var currentLocale = "{{ Session::get('locale') ?? 'es' }}";
    var allDayText = "{{ Session::get('locale') == 'es' ? 'Todo el día' : 'All day' }}";
    var hoy = "{{ Session::get('locale') == 'es' ? 'Hoy' : 'Today' }}";
    var mes = "{{ Session::get('locale') == 'es' ? 'Mes' : 'Month' }}";
    var lista = "{{ Session::get('locale') == 'es' ? 'Lista' : 'List' }}";
    var semana = "{{ Session::get('locale') == 'es' ? 'Semana' : 'Week' }}";
    var dia = "{{ Session::get('locale') == 'es' ? 'Día' : 'Day' }}";
    var urlEvents = "{{route('app-calendar-appointments')}}";
    var urlSaveEvent = "{{route('save-user-appointment')}}";
  </script>
  <!-- Vendor js files -->
  <script src="{{ asset(mix('vendors/js/calendar/fullcalendar.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/extensions/moment.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/select/select2.full.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/forms/validation/jquery.validate.min.js')) }}"></script>
  <script src="{{ asset(mix('vendors/js/pickers/flatpickr/flatpickr.min.js')) }}"></script>
@endsection

@section('page-script')
  <!-- Page js files -->
  <script src="{{ asset(mix('js/scripts/pages/app-calendar-events.js')) }}"></script>
  <script src="{{ asset(mix('js/scripts/pages/app-calendar.js')) }}"></script>

  <script>
  </script>
@endsection