@extends('_layouts.app')

@section('content')
  <div class="content page-songlist">
    <div class="row">
      <div class="col-md-6">
        <div class="card">
          <div class="card-body table-responsive">
            <table id="dt-lyric" class="table">
              <thead>
              <tr>
                <th>Title</th>
                <th>Artist</th>
                <th>Root Note</th>
              </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <form method="post" action="" id="form-songlist">
          <div class="card">
            <div id="form-error"></div>
            <div class="card-body">
              <div class="form-group">
                <label for="title">Title{!! requiredMark() !!}</label>
                <input type="text" name="artist" class="form-control" id="title" value="{{ $item->title ?? '' }}">
              </div>
              <div class="form-group">
                <label for="is_publish">Status</label>
                <select class="form-control select2" name="is_publish" id="is_publish"
                        style="width: 100%;" {!! dropDownColor() !!}>
                  @foreach ([1 => 'Published', 0 => 'Draft'] as $id => $status)
                    @php
                      $songlistStatus = $item->is_publish ?? '';
                      $selected = $id == $songlistStatus ? 'selected' : '';
                    @endphp
                    <option value="{{ $id }}" {{ $selected }}>{{ $status }}</option>
                  @endforeach
                </select>
              </div>
            </div>

          </div>
          <div class="card">
            <div class="card-body">
              <ul class="products-list product-list-in-card pl-2 pr-2" id="song-bucket"></ul>
            </div>
            <div class="card-footer">
              {!! showButton('submit') !!}
              {!! showButton('cancel', route('lyric')) !!}
              @if (isset($item))
                {!! showButton('delete') !!}
              @endif
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <script>
    var itemData = {!! $item ?? json_encode(['id' => 0]) !!};
    var songData = {!! !empty($songs) ? json_encode($songs) : json_encode([]) !!};
  </script>
@endsection

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