@extends('backend.layouts.master')

@section('content')
<!-- Content Header (media header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row">
          <div class="col-4">
            <h1>Media Manager</h1>
          </div>
          <div class="col-8">
            <div>
              {!! Form::open(['method' => 'POST', 'action' => 'Admin\MediaController@store', 'enctype' => 'multipart/form-data'])!!}
                <div class="row justify-content-end">               
                  <div class="col-auto">                  
                    <div class="input-group">
                      <div class="custom-file @if ($errors->has('file')){{'has-error'}}@endif">
                        <input name="file" class="form-control custom-file-input" type="file" id="file">
                      </div>
                    </div>
                  </div>
                  <div class="col-auto">
                    <div class="input-group-append ml-1 ">
                        <button type="submit" class="input-group-text"> <i class="bi bi-cloud-upload"></i> &nbsp; Upload </button>
                      </div>
                  </div>
                </div>  
                {!! Form::close() !!}
            </div>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
<!-- Main content -->
    <section class="content">
      <div class="card">
            <div class="card-body"> 
                <div class="row">
                    @foreach ( $medias as $media)
                    <div class="col-2 mb-4">
                      <div class="card text-bg-dark">
                        @if($media->type == 'image')
                                      <img class="card-img" height="130" src="{{env('APP_URL')}}/upload/{{ $media->type }}/thumbnail/{{ $media->name }}"/>
                                  @else
                                      <img class="card-img" height="130" src="{{ asset('theme/backend/img/file_icon.png') }}"/>
                                  @endif
                        <div class="card-img-overlay">
                              <form class="delete" action="{{ route('media.destroy', $media->id)}}" method="post">
                                  @csrf
                                  @method('DELETE')
                                  <button class="btn btn-danger" type="submit" title="Delete"><i class="bi bi-trash"></i></button>
                                </form>

                          <h5 class="card-title">{{ $media->name }} </h5>
                        </div>
                      </div>
                    </div>
                    @endforeach
                </div>
        </div>
      <!-- /.card -->
      </div>
      
    </section>
@endsection