@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 active" aria-current="page">{{ $image->filename }}</li>
  </ol>
</nav>
@endsection

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

<div class="row">
  <div class="col text-center">
	<img src="{{ asset('assets/'.$image->preview()) }}" data-toggle="modal" data-target="#showimage_modal">
  </div>
  <div class="col">
    <div><strong>Dateiname:</strong></div>
    <div>{{ $image->filename }}</div>
    <div><strong>Original-Dateiname:</strong></div>
    <div>{{ $image->original_filename }}</div>
    <div><strong>MyPicturemaxx-Kennung:</strong></div>
    <div>{{ $image->mypicturemaxx_number or '&nbsp;' }}</div>
    <div><strong>Lieferant:</strong></div>
    <div>
      @if ( $image->supplier )
      <a href="{{ action('SupplierController@edit',$image->supplier) }}">{{ $image->supplier->name }}</a>
      @else
      &nbsp;
      @endif
    </div>
    <div><strong>Serie:</strong></div>
    <div>
      @if ($image->imageSet)
      <a href="/imageset/{{ $image->imageSet->id }}">{{ $image->imageSet->title }}</a>
      @else
      &nbsp;
      @endif
    </div>
    <div class="mt-3">
      <a href="{{ action('ImageController@edit',$image) }}" role="button" class="btn btn-primary">Bearbeiten</a>
      <button class="btn btn-danger" data-toggle="modal" data-target="#deleteimage_modal">Löschen</button>
    </div>
  </div>
</div>

<h3 class="mt-3">Metadaten</h3>
<nav class="nav mb-3">
  <ul class="nav nav-pills" id="meta-tabs" role="tablist">
    <li class="nav-item">
      <a id="current-tab" href="#current" data-toggle="tab" role="tab" class="nav-link active">Aktuelle Metadaten</a>
    </li>
    <li class="nav-item">
      <a id="original-tab" href="#original" data-toggle="tab" role="tab" class="nav-link">Originale Metadaten</a>
    </li>
  </ul>
</nav>

<div class="tab-content" id="meta-tabs-content">
  <div class="tab-pane show active" id="current" role="tabpanel">
    @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
          @if ( !empty($value) )
          {!! nl2br(e($value)) !!}
          @else
          &nbsp;
          @endif
        @endif
      </div>
    </div>
    @endforeach
  </div>


  <div class="tab-pane" id="original" role="tabpanel">
    <div class="mb-1"><button data-toggle="modal" data-target="#detailedmeta_modal" type="button" class="btn btn-outline-primary btn-sm">Detaillierte Metadaten anzeigen</button></div>
    @foreach (collect($image->metadata)->except(['id','image_id','created_at','updated_at','archive'])->toArray() as $meta_key => $meta_value)
    <div class="row">
        <div class="col-3">{{ studly_case($meta_key) }}</div>
                <div class="col">{{ $meta_value or '&nbsp;' }}</div>
    </div>
    @endforeach
  </div>
</div>

<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="deleteimage_modal" tabindex="-1" role="dialog" aria-labelledby="deleteimage_modal_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      {!! Form::open(['action' => ['ImageController@destroy',$image],'method' => 'delete']); !!}
      <div class="modal-header">
        <h5 class="modal-title" id="deleteimage_modal_title">Bild löschen</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Bild <strong>{{ $image->filename }} </strong> löschen?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Abbrechen</button>
        <button type="submit" class="btn btn-danger">Löschen</button>
      </div>
    </div>
    {!! Form::close() !!}
  </div>
</div>

<div class="modal fade " id="detailedmeta_modal" tabindex="-1" role="dialog" aria-labelledby="detailedmeta_modal_title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="detailedmeta_modal_title">Metadaten</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
              </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>
@endsection