@extends('layouts.app')

@section('title',$image->filename)

@section('breadcrumb')
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item" aria-current="page"><a href="{{ route('image.index') }}">Bilder</a></li>
    <li class="breadcrumb-item" aria-current="page"><a href="{{ route('image.show',$image) }}">{{ $image->filename }}</a></li>
    <li class="breadcrumb-item active" aria-current="page">Bearbeiten</li>
  </ol>
</nav>
@endsection

@section('content')
<h2>{{ $image->filename }}</h2>

<div class="row">
  <div class="col">
    <div class=" text-center"><img src="{{ asset('assets/'.$image->preview()) }}" data-toggle="modal" data-target="#showimage_modal"></div>
    <div class="mt-3 text-center">
      {!! Form::open(['action' => ['ImageController@rotate',$image],'method' => 'put','id' => 'image-rotate']) !!}
      {!! Form::hidden('rotate',null) !!}
      <button data-rotate="90ccw" type="button" class="btn btn-sm btn-outline-info">90° <i class="fas fa-undo"></i></button>
      <button data-rotate="90cw" type="button" class="btn btn-sm btn-outline-info">90° <i class="fas fa-redo"></i></button>
      <button data-rotate="180" type="button" class="btn btn-sm btn-outline-info">180° <i class="fas fa-undo"></i></button>
      {!! Form::close() !!}
    </div>
  </div>
  <div class="col">
  {!! Form::model($image, ['action' => ['ImageController@update',$image],'method' => 'put']) !!}
    <div class="form-group">
      <label><strong>Dateiname:</strong></label>
      <input type="text" class="form-control-plaintext" readonly value="{{ $image->filename }}">
    </div>
    <div class="form-group">
      <label><strong>Original-Dateiname:</strong></label>
      <input type="text" class="form-control-plaintext" readonly value="{{ $image->original_filename }}">
    </div>
    <div class="form-group">
      <label for="mypicturemaxx_number"><strong>MyPicturemaxx-Kennung:</strong></label>
      {!! Form::text('mypicturemaxx_number',null,['class' => 'form-control','id' => 'mypicturemaxx_number']) !!}
    </div>
    <div class="form-group">
      <label for="supplier_id"><strong>Lieferant:</strong></label>
      <div class="form-row">
        <div class="col">
          {!! Form::select('supplier_id',$suppliers->pluck('name','id')->prepend('--','')->all(),null,['class' => 'form-control','id' => 'supplier_id']) !!}
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="image_set_id"><strong>Serie:</strong></label>
      <div class="form-row">
        <div class="col">
          {!! Form::select('image_set_id',$imagesets->pluck('title','id')->prepend('--','')->all(),null,['class' => 'form-control','id' => 'image_set_id']) !!}
        </div>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-primary">Speichern</button> <button type="reset" class="btn btn-secondary">Zurücksetzen</button>
    </div>
  {!! Form::close() !!}
  </div>
</div>

<h3 class="mt-3">Metadaten <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#editmeta_modal">Bearbeiten</button></h3>
@foreach ($current_meta as $key => $value)
<div class="row">
  <div class="col-3">
    {{ studly_case($key) }}
  </div>
  <div class="col">
    @if ( is_array($value) )
    {{ join(', ',$value) }}
    @else
    {{ $value }}
    @endif
  </div>
</div>
@endforeach

<div class="modal fade" id="showimage_modal" tabindex="-1" role="dialog" aria-labelledby="showimage_modal_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="showimage_modal_title">Bild</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img class="img-fluid" src="{{ asset($image->picture()) }}"></img>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="editmeta_modal" tabindex="-1" role="dialog" aria-labelledby="editmeta_modal_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
    {!! Form::open(['action' => ['ImageController@updateMeta',$image],'method' => 'put']) !!}
      <div class="modal-header">
        <h5 class="modal-title" id="editmeta_modal_title">Metadaten bearbeiten</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        @foreach ($current_meta->except(['keywords','supplementalcategories']) as $key => $value)
        <div class="form-group">
          {!! Form::label($key,studly_case($key)) !!}
          @if ( ($key === 'caption') || ($key === 'instructions') )
          {!! Form::textarea($key,$value,['class' => 'form-control','rows' => 3]) !!}
          @else
          {!! Form::text($key,$value,['class' => 'form-control']) !!}
          @endif
        </div>
        @endforeach
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Speichern</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
      </div>
    {!! Form::close() !!}
    </div>
  </div>
</div>
@endsection

@section('script')
<script src="{{ asset('js/image.js') }}"></script>
@endsection