@extends('layouts/layoutMaster')

@section('title', 'Calendar')

@section('vendor-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/fullcalendar/fullcalendar.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/flatpickr/flatpickr.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/select2/select2.css')}}" />
  <link rel="stylesheet" href="{{asset('assets/vendor/libs/formvalidation/dist/css/formValidation.min.css')}}" />
  <link rel="stylesheet" href="{{ env('APP_URL') }}assets/vendor/libs/sweetalert2/sweetalert2.css" />
@endsection

@section('page-style')
  <link rel="stylesheet" href="{{asset('assets/vendor/css/pages/app-calendar.css')}}" />

  <style>
    #calendar {
      padding: 20px;
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.08);
      margin-bottom: 20px;
    }

    .fc-toolbar-title {
      font-size: 22px;
      font-weight: 600;
      /* color: #333; */
    }

    .fc-toolbar-chunk button {
      border-radius: 6px !important;
      padding: 6px 12px !important;
    }

    .fc-event,
    .fc-daygrid-event,
    .fc-timegrid-event {
      background-color: var(--bs-primary) !important;
      border-color: var(--bs-primary) !important;
      color: #fff !important;
      font-weight: 500;
      border-radius: 6px !important;
      padding: 3px 6px !important;
    }

    .fc-daygrid-event:hover {
      filter: brightness(0.92);
    }

    .fc-day-today {
      background: rgba(var(--bs-primary-rgb), 0.10) !important;
    }

    .fc {
      font-family: "Inter", "Segoe UI", sans-serif;
    }
  </style>
@endsection

@section('vendor-script')
  {{-- Load FullCalendar Plugins --}}
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@6.1.7/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@6.1.7/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@6.1.7/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/list@6.1.7/index.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@6.1.7/index.global.min.js"></script>

  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/FormValidation.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/Bootstrap5.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/select2/select2.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/flatpickr/flatpickr.js')}}"></script>
  <script src="{{asset('assets/vendor/libs/moment/moment.js')}}"></script>
  <script src="{{ env('APP_URL') }}assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
@endsection

@section('page-script')
  {{-- Custom Calendar Script --}}
  <script src="{{ asset('assets/js/app-calendar.js') }}"></script>
@endsection

@section('content')

<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="card app-calendar-wrapper">
  <div class="row g-0">
    {{-- Calendar --}}
    <div class="col app-calendar-content">
      <div class="card shadow-none border-0">
        <div class="card-body pb-0">
          <div id="calendar"></div>
        </div>
      </div>
      <div class="app-overlay"></div>
    </div>
  </div>
</div>

@endsection