@php
    $typeTranslation = [
      'date' => [
          'prev' => trans('menu.prev_day'),
          'next' => trans('menu.next_day')
      ],
      'week' => [
          'prev' => trans('menu.prev_week'),
          'next' => trans('menu.next_week')
      ],
      'month' => [
          'prev' => trans('menu.prev_month'),
          'next' => trans('menu.next_month')
      ]
    ];
    $today      = carbon\Carbon::now();
    $weekNumber = $today->weekOfYear;

@endphp

<div class="flex flex-wrap justify-between items-end gap-3">
    <div>
      <p class="text-md-semibold text-custom-grey-500">
        @if ($type == 'date') 
        @if ($today->isSameDay($date))
            {{trans('menu.today_title')}}
        @else
            {{trans('forms.date')}}
        @endif
        @elseif($type == 'week') 
            @if ($weekNumber == $week)
              {{trans('title.schedule_this_week')}}
            @else
              {{trans('title.week')}} : {{$week}}
            @endif
        @endif
      </p>
      <div class="flex gap-3 items-center">
        <h1 class="text-xl-bold text-custom-grey-900">
          @if ($type == 'month')

          {{$monthText .' , '.$from->copy()->format('Y')}}

          @elseif($type == 'week')

          {{ $from->copy()->locale(app()->getLocale())->isoFormat('D MMMM, YYYY') }} <span class="text-custom-orange-900">-</span> {{ $to->copy()->locale(app()->getLocale())->isoFormat('D MMMM, YYYY') }}

          @else
          {{ $date->locale(app()->getLocale())->isoFormat('dddd D MMMM, YYYY') }}
          
          @endif
        </h1>
        @php
            $query = request()->query();
            $query["date"] =  $prev;
            if (request()->has('location')) {
                $query['location'] = request()->get('location');
            }
            $prevUrl = url()->current() . '?' . http_build_query($query);

            $query["date"] = $next;
            if (request()->has('location')) {
                $query['location'] = request()->get('location');
            }
            $nextUrl = url()->current() . '?' . http_build_query($query);
        @endphp
        <div class="flex gap-[6px] items-center">
            <a title="{{ $typeTranslation[$type]['prev'] }}" 
              href="{{ $prevUrl }}" class="month-btn">
                <x-svg-icon class="bg-custom-orange-25 text-custom-orange-900 cursor-pointer" icon="icon-arrow-previous" />
            </a>

            <a title="{{ $typeTranslation[$type]['next'] }}" 
              href="{{ $nextUrl }}" class="month-btn">
                <x-svg-icon class="bg-custom-orange-25 text-custom-orange-900 cursor-pointer" icon="icon-arrow-next" />
            </a>
        </div>
        <div id="reportrange">
          	<x-svg-icon class="bg-custom-orange-25 text-custom-orange-900 cursor-pointer" icon="icon-calendar" />
        </div>
      </div>
    </div>
    <div class="flex bg-custom-grey-50 rounded-[8px] w-max items-center p-[8px] overflow-x-scroll no-scrollbar">

      <div class="mr-2">
        <a href="{{ route('schedules.daily') }}" 
          class="tabs-btn-box min-w-[94px] @if($type == 'date') active @endif">
          {{ trans('forms.lbl_daily') }}
        </a>
      </div>
      <div class="mr-2">
        <a href="{{ route('schedules.index') }}" 
          class="tabs-btn-box min-w-[94px] @if($type == 'week') active @endif">
          {{ trans('forms.lbl_weekly') }}
        </a>
      </div>
      <div>
        <a href="{{ route('schedules.monthly') }}" 
          class="tabs-btn-box min-w-[94px] @if($type == 'month') active @endif">
          {{ trans('forms.lbl_monthly') }}
        </a>
      </div>
      
    </div>
  </div>
  @if ($type != 'month')
    <div class="flex flex-wrap justify-between items-center gap-4 mt-1">
      <div class="flex flex-wrap gap-4 items-center">
        <div class="w-[320px]">
          <div class="multi-select-dropdown">
            <div class="multi-select-box text-sm-regular">
              @php
                  $selectedLocation = $locations->where('id',request()->location)->first()->name ?? trans('forms.all_location');
              @endphp
              {{$selectedLocation}}
            </div>
            <div class="multi-select-options-content">
              <div class="multi-select-option">
                <div class="flex gap-2">
                    <input type="radio" name="location_id" value="" id="location_all" {{ request()->location == null ? 'checked' : '' }} />
                    <span class="location-span cursor-pointer" data-target="location_all">{{trans('forms.all_location')}}</span>
                </div>
            </div>
            @foreach($locations as $ekey => $value)
                <div class="multi-select-option">
                    <div class="flex gap-2">
                        <input type="radio" name="location_id" value="{{$value->id}}" id="location_{{$value->id}}" {{ request()->location == $value->id ? 'checked' : '' }} />
                        <span class="location-span cursor-pointer" data-target="location_{{$value->id}}">{{$value->name}}</span>
                    </div>
                </div>
            @endforeach
            </div>
            <div
              class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                  stroke-linejoin="round" />
              </svg>
            </div>
          </div>
        </div>
        @if ($type == 'date')
        <div>
            <div class="multi-select-dropdown">
              <div class="multi-select-box text-sm-regular">
                
                @php
                  if ($orderby == 'asc') {
                      $selectedOrder = "Asc" ;
                  }elseif ($orderby == "desc") {
                    $selectedOrder = "desc" ;
                  }else{
                  $selectedOrder = "Sort by A-Z" ;
                  }
                @endphp
                {{$selectedOrder}}
              </div>
              <div class="multi-select-options-content">
              <div class="multi-select-option">
                  <div class="flex gap-2">
                      <input type="radio" name="orderby" value="asc" id="orderby-asc" {{ $orderby == 'asc' ? 'checked' : '' }} />
                      <span class="orderby-span" data-target="orderby-asc">Asc</span>
                  </div>
              </div>
              <div class="multi-select-option">
                  <div class="flex gap-2">
                      <input type="radio" name="orderby" value="desc" id="orderby-desc" {{ $orderby == 'desc' ? 'checked' : '' }} />
                      <span class="orderby-span" data-target="orderby-desc">Desc</span>
                  </div>
              </div>


              </div>
              <div
                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-custom-grey-500">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round" />
                </svg>
              </div>
            </div>
        </div>
        <div class="flex gap-3 items-center">
          <h1 class="text-md-medium text-custom-grey-900">
            {{trans('title.only_operation_room')}}
          </h1>
          <label class="custom_switch">
            <input id="show-operation-switch" type="checkbox" />
            <span class="switch_slider round"></span>
          </label>
        </div>
        @endif

      </div>
    </div>
  @endif

  @if ($type == 'month')
    <form id="calendar-search-form" onsubmit="return false;">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3 items-center mt-1">

        <select class="form-control form-control-sm pd-dropdown select-tab w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-400"
          name="department[]"
          id="department"
          data-placeholder="{{__('forms.filter_by_department')}}"
          multiple
        >
          @foreach($departments as $ekey => $value)
            <option
              {{ isset($_GET['department']) && in_array($value->id, $_GET['department']) ? "selected" : "" }}
              value="{{ $value->id }}"
            >{{ $value->name }}</option>
          @endforeach
        </select>

        <select class="form-control form-control-sm pd-dropdown select-tab w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-400"
          name="position[]"
          id="position"
          data-placeholder="{{__('forms.filter_by_postion')}}"
          multiple
        >
          @foreach($positions as $ekey => $value)
            <option
              {{ isset($_GET['position']) && in_array($value->id, $_GET['position']) ? "selected" : "" }}
              value="{{ $value->id }}"
            >{{ $value->name }}</option>
          @endforeach
        </select>

        <select class="form-control form-control-sm pd-dropdown select-tab w-full text-sm border-gray-300 rounded-md shadow-sm focus:ring focus:ring-blue-200 focus:border-blue-400"
          name="location[]"
          id="location"
          data-placeholder="{{__('forms.filter_by_location')}}"
          multiple
        >
          @foreach($locations as $ekey => $value)
            <option
              {{ isset($_GET['location']) && in_array($value->id, $_GET['location']) ? "selected" : "" }}
              value="{{ $value->id }}"
            >{{ $value->name }}</option>
          @endforeach
        </select>

      </div>
    </form>
  @endif