@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<style>
    tr:nth-child(even){
        background-color: #4b79cf !important;
    }
    tr:nth-child(odd){
        background-color: #4269b1 !important;
    }
    tr:first-child{
        background-color: navy  !important;
    }
    td,th{
        padding:2px 5px !important;
    }
    table{
        border:1px solid navy;
        border-radius:5px;
        padding:0;
    }
    input[type=file], input[type=file] *, input[type=file] *{
        background: #a9cfed !important; border:1px solid white  !important; color: navy !important; padding-top: -2px; padding-bottom:-2px;
    }
    .gallery img{
        display:inline-block;
        box-shadow: 2px 2px 10px rgba(5,5,55,0.4);
        background-color: rgba(255,255,255,0.8);
        padding:2px;
        border-radius:5px;
        margin:0.5vw;
      }
</style>

@endsection

@section('content')
<div class="col-md-9 admincontent  justify-content-center">
    <a href='/admin/gallery/image/{{$gallery->id}}' style="background: none; border:0; color:white; float: right; text-decoration: none;"><img src="/images/addGallery.png" height='35px' style=""/></a><h5>Edit {{$gallery->name}}</h5>
    @if (session('success'))
        <div class="alert alert-success">
            {!! session('success') !!}
        </div>
    @endif
    @if (session('error'))
        <div class="alert alert-success">
            {!! session('error') !!}
        </div>
    @endif
    @if ($errors->has('name'))
        <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('name') }}</strong>
        </span>
    @endif
    @if ($errors->has('type'))
        <span class="invalid-feedback" role="alert">
            <strong>{{ $errors->first('type') }}</strong>
        </span>
    @endif
    <table class="" style="width:100%;">
        <tbody style="width:100%;">
        <tr>
            <th>Preview</th>
            <th>Heading</th>
            <th>Image Order*</th>
            <th>Visible**</th>
            <th>Uploaded By</th>
            <th>Action***</th>
        </tr>
        @forelse($gallery->images as $image)
            <tr>
                <td class="gallery">
                    <a data-fancybox  href="/gallery/{{$image->id}}.{{$gallery->type=='video'?'mp4':'jpg'}}">
                        <img src="/gallery/th_{{$image->id}}.jpg" width="60px">
                    </a>
                </td>
                <td>{{$image->heading}}</td>
                <td>
                    <form method="post" action="/admin/gallery/order/{{$image->id}}">
                        @csrf
                        <input name="order" value="{{$image->order_id}}" style="width:26px; height:20px; background: #a9cfed; border:1px solid navy; color: navy;"/><button style="background: none; border:none;"><img src="/images/updateIcon.png" width="20px" style="margin-top:-4px"/></button>
                    </form>
                </td>
                <td>
                    <a href="/admin/gallery/visible/{{$image->id}}">
                        @if($image->visible)
                        <img src="/images/visibleIcon.png" width="20px">
                        @else
                        <img src="/images/invisibleIcon.png" width="20px">
                        @endif
                    </a>
                    </td>
                <td>
                    {{$image->uploadedBy->name}}
                    {{$image->uploadedBy->surname}}
                </td>
                <td>
                    <form method="post" action="/admin/gallery/delete/{{$image->id}}" style="display: inline;">
                        @csrf
                    <button style="background: none; border:none;"><image src="/images/deleteIcon.png" width="20px"/></button></form>&nbsp;&nbsp;&nbsp;<a href="/admin/gallery/image/{{$gallery->id}}/{{$image->id}}"><img src="/images/editIcon.png" width="20px"></a>  
                </td>
            </tr>
        @empty
        <tr><td colspan="6">No images available.<br/> - Upload by clicking on the upload image "<img src="/images/addGallery.png" height='25px' style=""/>" icon.<br/> - Image size should be 800 pixels wide and 600 pixels high, thumbnails are generated automatically.</td></tr>
        @endforelse
    </tbody>
    </table>
    @if(count($gallery->images))
    <br/>
    <small>* Edit the order (number) where you want the image to appear, then click on the "<img src="/images/updateIcon.png" width="12px"/>" icon to update. The rest will re-order after it.<br/>
    ** Click icon to change visibility: <img src="/images/visibleIcon.png" width="20px"> (Visble) &nbsp;&nbsp; <img src="/images/invisibleIcon.png" width="20px"> (NOT Visble)<br/>
    *** <img src="/images/editIcon.png" width="20px"> Edit Image
    &nbsp;&nbsp; <image src="/images/deleteIcon.png" width="20px"/> Delete Image
    </small>
    <br/><small style="color:#ff8355;"><b>NOTES:  <span style="display:inline-block;vertical-align: top;padding-top:3px;">Image size: 800(w)x600(h) in pixels (IMPORTANT).<br/>
        Image type: jpg or png.<br/>
        Delete can not be undone.</span></b></small>
    @endif
</div>
@endsection

@section('javascript')
    <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
@endsection