{{ View::make('layout.header') }}
      @php
          $user_join_year = date('Y', strtotime($userPay->date_commence));
          $cutOffStartMonth = getSettingsValue('cut_of_startmonth');

          if ($cutOffStartMonth != 1) {
              if ($cutOffStartMonth > date('m')) {
                  $currentYear = date('Y') + 1;
              } else {
                  $currentYear = date('Y') + 1;
              }
          } else {
              $currentYear = date('Y') + 1;
          }
      @endphp
      <style>
          .highlight {
              background-color: yellow;
          }

          .select-filter {
              font-size: 1rem !important;
              width: 150px;
          }

          .select-filter:focus {
              border-color: #d8d6de !important;
          }

          table.dataTable thead .sorting:before,
          table.dataTable thead .sorting_asc:before,
          table.dataTable thead .sorting_desc:before,
          table.dataTable thead .sorting:after,
          table.dataTable thead .sorting_asc:after,
          table.dataTable thead .sorting_desc:after {
              display: none;
          }

          table.dataTable thead>tr>th.sorting_asc,
          table.dataTable thead>tr>th.sorting_desc,
          table.dataTable thead>tr>th.sorting,
          table.dataTable thead>tr>td.sorting_asc,
          table.dataTable thead>tr>td.sorting_desc,
          table.dataTable thead>tr>td.sorting {
              padding-right: 8px;
          }

          .flatpickr-calendar {
              width: 100%;
              box-shadow: unset;
          }

          #barcontent1 .col-md-3 {
              padding-right: 4%;
          }

          #calendar .label {
              height: 30px !important;
          }



          body {
              font-family: Arial, Helvetica, sans-serif;
          }

          /* The Modal (background) */
          .modal {
              display: none;
              /* Hidden by default */
              position: fixed;
              /* Stay in place */
              z-index: 5000;
              /* Sit on top */
              padding-top: 175px;
              /* Location of the box */
              left: 0;
              top: 0;
              width: 100%;
              /* Full width */
              height: 100%;
              /* Full height */
              overflow: auto;
              /* Enable scroll if needed */
              background-color: rgb(0, 0, 0);
              /* Fallback color */
              background-color: rgba(0, 0, 0, 0.4);
              /* Black w/ opacity */
          }

          /* Modal Content */
          .modal-content {
              background-color: #fefefe;
              margin: auto;
              padding: 35px;
              border: 1px solid #888;
              width: 19%;
          }

          /* The Close Button */
          .close {
              color: #aaaaaa;
              float: right;
              font-size: 28px;
              font-weight: bold;
              text-align: right;

          }

          .close:hover,
          .close:focus {
              color: #000;
              text-decoration: none;
              cursor: pointer;
          }

          body {
              font-family: Arial, Helvetica, sans-serif;
          }

          /* The Modal (background) */
          .modal1 {
              display: none;
              /* Hidden by default */
              position: fixed;
              /* Stay in place */
              z-index: 5000;
              /* Sit on top */
              padding-top: 175px;
              /* Location of the box */
              left: 0;
              top: 0;
              width: 100%;
              /* Full width */
              height: 100%;
              /* Full height */
              overflow: auto;
              /* Enable scroll if needed */
              background-color: rgb(0, 0, 0);
              /* Fallback color */
              background-color: rgba(0, 0, 0, 0.4);
              /* Black w/ opacity */
          }

          /* Modal Content */
          .modal-content1 {
              background-color: #fefefe;
              margin: auto;
              padding: 35px;
              border: 1px solid #888;
              width: 19%;
          }

          /* The Close Button */
          .close1 {
              color: #aaaaaa;
              float: right;
              font-size: 28px;
              font-weight: bold;
              text-align: right;

          }

          .close1:hover,
          .close1:focus {
              color: #000;
              text-decoration: none;
              cursor: pointer;
          }
      </style>

      <script type="text/javascript"
          src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.min.js"></script>


      <!-- BEGIN: Content-->
      <div class="app-content content ">
          <div class="content-overlay"></div>
          <div class="header-navbar-shadow"></div>
          <div class="content-wrapper">
              <div class="content-header row">
                  <div class="content-header-left col-md-9 col-12 mb-2">
                      <div class="row breadcrumbs-top">
                          <div class="col-12">
                              <div class="breadcrumb-wrapper">
                                  @if (request()->route()->uri() == 'e-attendance/approval/duty_Roaster')
                                      <ol class="breadcrumb">
                                          <li class="breadcrumb-item">Approval </li>
                                          </li>
                                          <li class="breadcrumb-item active">
                                              <a href="{{ route('approval.viewdutyroaster') }}">Duty Roster</a>
                                          </li>
                                          <li class="breadcrumb-item active">
                                              <a href=""> Add Duty Roster</a>
                                          </li>
                                      </ol>
                                  @else
                                      <ol class="breadcrumb">
                                          <li class="breadcrumb-item">HR </li>
                                          <li class="breadcrumb-item active"><a href="{{ route('setupHr') }}">Setup</a>
                                          </li>
                                          <li class="breadcrumb-item active">
                                              <a href="{{ route('viewdutyroaster') }}">Duty Roster</a>
                                          </li>
                                          <li class="breadcrumb-item active">
                                              <a href=""> Add Duty Roster</a>
                                          </li>
                                      </ol>
                                  @endif
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="content-body">
                  <section id="dashboard-ecommerce">
                      <div class="row match-height">
                          <div class="card" style=" width: 100%;">
                              <div class="card-header">
                                  <div class="d-flex align-items-center">
                                      <h4 class="card-title">Add New Duty Roster</h4>
                                  </div>
                              </div>
                              <form action="{{ route('createDutyroaster') }}" method="post"
                                  enctype="multipart/form-data">
                                  @csrf
                                  <div class="card-body">
                                      <div class="form-group row">
                                          <label for="Schedule" class="col-sm-2 col-form-label">Group ID :</label>
                                          <div class="col-sm-3">
                                              <input type="text" class="form-control" name="group_id" id="group_id"
                                                  placeholder="Group ID" value="{{ old('group_id') ?? '' }}">
                                              @if ($errors->has('group_id'))
                                                  <span class="text-danger">{{ $errors->first('group_id') }}</span>
                                              @endif
                                          </div>
                                          <label for="Work" class="col-sm-2 col-form-label">Name:</label>
                                          <div class="col-sm-3">
                                              <input type="text" class="form-control" id="Work"
                                                  placeholder="Name" name="name" value="{{ old('name') ?? '' }}">
                                              @if ($errors->has('name'))
                                                  <span class="text-danger">{{ $errors->first('name') }}</span>
                                              @endif
                                          </div>
                                          <div class="col-sm-2">
                                              <button class="btn btn-primary" type="submit">submit</button>
                                          </div>
                                      </div>
                                      <!-- Tab panes -->
                                  </div>
                          </div>
                          </form>




                      </div>
                      <!-- END: Content-->
                      {{ View::make('layout.footer') }}
                      @include('inc.restday-modal')



                      <!-- Add duty Roaster -->

                      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
                      <link rel="stylesheet" href="{{ asset('app-assets/bw/calendar.css') }}" type="text/css"
                          media="screen" title="no title" charset="utf-8">
                      <script src="{{ asset('app-assets/bw/jquery1.min.js') }}"></script>
                      <script src="{{ asset('pp-asseats/bw/jquery.calendar.min.js') }}"></script>
                      <script src="{{ asset('app-assets/vendors/js/forms/validation/jquery.validate.min.js') }}"></script>