@extends('_layouts.app')

@section('content')
  <div class="content page-lyric">
    <div class="row">
      <div class="col-md-8">
        <div class="card">
          <div id="form-error"></div>
          <form method="post" action="" id="form-lyric">
            <div class="card-body">
              <div class="form-group mb-4">
                <label for="title">Title{!! requiredMark() !!}</label>
                <input type="text" name="title" class="form-control" id="title" value="{{ $item->title ?? '' }}">
              </div>
              <div class="form-group">
                <div id="lyric-editor"></div>
              </div>
            </div>
            <div class="card-footer">
              {!! showButton('submit') !!}
              {!! showButton('cancel', route('lyric')) !!}
              @if (isset($item))
                {!! showButton('delete') !!}
              @endif
            </div>
          </form>
        </div>
      </div>
      <div class="col-md-4">
        <div class="card">
          <div class="card-body">
            <div class="form-group">
              <label for="artist">Artist</label>
              <input type="text" name="artist" class="form-control" id="artist" value="{{ $item->artist ?? '' }}">
            </div>
            <div class="form-group">
              <label for="root_note">Root note</label>
              <input type="text" name="root_note" class="form-control" id="root_note" value="{{ $item->root_note ?? '' }}">
            </div>
            <div class="form-group">
              <label for="is_active">Status</label>
              <select class="form-control select2" name="is_active" id="is_active" style="width: 100%;" {!! dropDownColor() !!}>
                @foreach ([1 => 'Published', 0 => 'Draft'] as $id => $status)
                  @php
                    $lyricStatus = $item->is_active ?? '';
                    $selected = $id == $lyricStatus ? 'selected' : '';
                  @endphp
                  <option value="{{ $id }}" {{ $selected }}>{{ $status }}</option>
                @endforeach
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    var itemData = {!! $item ?? json_encode(['id' => 0]) !!};
  </script>
@endsection

@section('title')
  {{ isset($item) ? 'Edit lyric' : 'New lyric' }}
@endsection