@extends('layouts/contentLayoutMaster')

@section('title', 'Settings - Service')

@section('content')
<section>
  <h2 class="page-title font-bolder text-primary mb-2" data-id="">{{ __('locale.add_new_service') }}</h2>
</section>

<section>
  <div class="row">
    <div class="col-12">
      <div class="card service-detail">
        <div class="card-body">
          <div class="row">
            <div class="col-md-4">
              <div class="form-group">
                <label class="form-label" for="activity">{{ __('locale.activity') }}</label>
                <select name="activity" class="select2 form-control input-activity" data-minimum-results-for-search="Infinity">
                  @foreach($activities as $key => $data)
                    @if(in_array($data->id, $existActivities)))
                      <option value="{{ $data->id }}" disabled>{{ $data->name }}</option>
                    @else
                      <option value="{{ $data->id }}">{{ $data->name }}</option>
                    @endif
                  @endforeach
                </select>
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="price">{{ __('locale.price') }}</label>
              <div class="input-group input-group-merge mb-2 input-group-price">
                <span class="input-group-text">Rp</span>
                <input id="price" type="text" class="form-control input-price @error('price') is-invalid @enderror" name="price" autocomplete="price" required autofocus pattern="^\$\d{1,3}(,\d{3})*(\.\d+)?$">
              </div>
            </div>
            <div class="col-md-4">
              <label class="form-label" for="participant">{{ __('locale.max_participant') }}</label>
              <div class="input-group input-group-number input-group-participant">
                <button class="btn btn-outline-secondary btn-minus waves-effect" type="button" disabled>
                    <i data-feather="minus"></i>
                </button>
                <input id="participant" type="text" class="form-control input-number input-participant text-center" value="1" min="1" name="participant" aria-label="Amount" required>
                <button class="btn btn-outline-primary btn-plus waves-effect" type="button">
                    <i data-feather="plus"></i>
                </button>
              </div>
            </div>
            <div class="col-md-12">
              <label class="form-label" for="description">{{ __('locale.description') }}</label>
              <textarea class="form-control input-description" rows="3" name="description" required></textarea>
            </div>
          </div>
          <hr class="mb-2">
          <div class="schedule-list"></div>
          <div class="row mb-2">
            <div class="col-md-12 text-center">
              <button class="btn btn-outline-secondary btn-block btn-add-schedule">{{ __('locale.add_schedule') }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row mb-2">
    <div class="col-md-12 text-center">
      <button class="btn btn-success btn-block btn-create-service">{{ __('locale.create') }}</button>
    </div>
  </div>
</section>

<div class="hidden">
  <div class="input-schedule">
    <div class="card border schedule-item">
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label class="form-label" for="day">{{ __('locale.days') }}</label>
              <div class="input-days">
                <label><input type="checkbox" name="days" value="1"><span>{{ __('locale.monday') }}</span></label>
                <label><input type="checkbox" name="days" value="2"><span>{{ __('locale.tuesday') }}</span></label>
                <label><input type="checkbox" name="days" value="3"><span>{{ __('locale.wednesday') }}</span></label>
                <label><input type="checkbox" name="days" value="4"><span>{{ __('locale.thursday') }}</span></label>
                <label><input type="checkbox" name="days" value="5"><span>{{ __('locale.friday') }}</span></label>
                <label><input type="checkbox" name="days" value="6"><span>{{ __('locale.saturday') }}</span></label>
                <label><input type="checkbox" name="days" value="7"><span>{{ __('locale.sunday') }}</span></label>
              </div>
            </div>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="start_time">{{ __('locale.start_time') }}</label>
              <select name="start_time" class="select2 form-control input-start-time" data-minimum-results-for-search="Infinity">
                @foreach($times as $key => $time)
                <option value="{{$key}}">{{ Carbon\Carbon::parse($time->time)->format('H:i') }}</option>
                @endforeach
              </select>
          </div>
          <div class="col-md-2">
            <label class="form-label" for="end_time">{{ __('locale.end_time') }}</label>
              <select name="end_time" class="select2 form-control input-end-time" data-minimum-results-for-search="Infinity">
                @foreach($times as $key => $time)
                <option value="{{$key}}">{{ Carbon\Carbon::parse($time->time)->format('H:i') }}</option>
                @endforeach
              </select>
          </div>
          <div class="col-md-2 text-right">
            <div class="btn btn-md btn-flat-primary mb-50 btn-delete-schedule">{{ __('locale.delete') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@section('page-script')
  {{-- Page js files --}}
  <script src="{{ asset(('js/scripts/member/settings/add.js')) }}"></script>
@endsection