@extends('layouts.admin.index')

@section('content')
<div id="main-wrapper">
  <!-- Sidebar -->
  @include('layouts.admin.sidebar')
  <div class="page-wrapper">
    <!--  Header -->
    @include('layouts.admin.header')

    <div class="body-wrapper">
      <div class="container-fluid">
        {{ $disabled ? Breadcrumbs::render('DigitalLibraryView',$model->id) : ($model->id ? Breadcrumbs::render('DigitalLibraryEdit',$model->id) : Breadcrumbs::render('DigitalLibraryAdd')) }}
        <div class="card w-100">
          <div class="card-body">
            <form role="form" action="{{ route('digital-library.store') }}" method="post" enctype="multipart/form-data">
              <div class="mb-3 fv-row d-flex flex-column">
                <label class="form-label" for="image">Image</label>
                @if($model->image)
                  <img src="{{ asset('storage/digital-library/'.$model->image) }}" style="max-width: 200px" class="mb-2"/>
                @endif
                @if(!$disabled)
                  <input type="file" class="form-control" name="image" id="image" />
                @endif
                @error('image')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="name">Nama</label>
                <input class="form-control" id="name" name="name" value="{{ old('name', $model->name) }}" placeholder="Nama" @readonly($disabled)/>
                @error('name')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <label class="form-label" for="description">Deskripsi</label>
                <textarea class="form-control" id="description" name="description" placeholder="Deskripsi" @readonly($disabled)>{{ old('description', $model->description) }}</textarea>
                @error('description')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="keyword">Keyword</label>
                </div>
                <select class="form-select keyword" name="keyword[]" id="keyword" multiple="multiple" data-disabled="{{ $disabled ? 'true' : 'false' }}">
                  @foreach($keyword as $k=>$c)
                    <option value="{{$c}}" selected>{{$c}}</option>
                  @endforeach
                </select>
                @error('keyword')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div class="mb-3 fv-row">
                <div>
                  <label class="form-label" for="keyword">Tipe</label>
                </div>
                <select class="form-select keyword" name="type" id="type" @disabled($disabled)>
                  @foreach($types as $type)
                    <option value="{{$type['id']}}" @selected(old('type', $model->type) == $type['id'])>{{$type['label']}}</option>
                  @endforeach
                </select>
                @error('type')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <div @class(['mb-3','fv-row','d-none'=>$model->type == 3]) id="file-container">
                <label class="form-label" for="file">File</label>
                @if(!$disabled)
                  <input type="file" class="form-control" name="file" id="file" accept="application/pdf" />
                  <small class="fst-italic text-info">Max 50 MB in PDF file formats</small>
                @endif
                @if($model->file)
                  <div><a class="btn btn-primary mt-2" href="{{ asset('storage/digital-library/'.$model->file) }}" download="">Download File</a></div>
                @endif
                @error('file')
                <div class="invalid-feedback d-block">
                  {{ $message }}
                </div>
                @enderror
              </div>
              <div @class(['mb-3','fv-row','d-none'=>$model->type != 3]) id="video-container">
                <label class="form-label" for="video_url">URL Youtube</label>
                <input type="text" class="form-control" name="video_url" id="video_url" @disabled($disabled) value="{{ old('video_url',$model->file) }}" />
                @error('video_url')
                  <div class="invalid-feedback d-block">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <input type="hidden" name="id" value="{{ $model->id }}" />
              {{ csrf_field() }}
              <div class="d-flex w-100 justify-content-end">
                @if(!$disabled)
                  <button class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                @endif
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@push('scripts')
<script type="module">
  const disabled = {{ $disabled ? 'true' : 'false' }};
  $(function() {
    $('.keyword').select2({
      tags: true,
      tokenSeparators: [','],
      disabled: disabled
    });
    const videoContainer = $('#video-container');
    const fileContainer = $('#file-container');
    $('#type').on('change',function(){
      const type = Number($(this).val());
      switch (type) {
        case 1:
        case 2:
        case 4:
          if(!videoContainer.hasClass('d-none')){
            videoContainer.addClass('d-none')
          }
          if(fileContainer.hasClass('d-none')){
            fileContainer.removeClass('d-none')
          }
          break;
        default:
          if(videoContainer.hasClass('d-none')){
            videoContainer.removeClass('d-none')
          }
          if(!fileContainer.hasClass('d-none')){
            fileContainer.addClass('d-none')
          }
          break;
      }
    });
  });
</script>
@endpush