@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">
    <h5>{{ __('Slider Images') }}</h5>
    <form method="post" style="padding-bottom: 10px; padding-top:0;" enctype="multipart/form-data">
        @csrf
        Upload Image: <input type="file" name="filename" placeholder="file" required style=" ">   <button style="background: none; border:1px dashed white; height:32px;color:white;"> Upload <img src="/images/addGallery.png" height='28px' style="margin-top: -5px;"/></button>
    </form>
    @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>Image</th>
            <th>Image Order*</th>
            <th>Visible</th>
            <th>Uploaded By</th>
            <th>Action**</th>
        </tr>
        @forelse($images as $image)
            <tr>
                <td  class="gallery">
                    <a data-fancybox  href="/slider/{{$image->id}}.jpg">
                    <img src="/slider/{{$image->id}}.jpg" width ="150px">
                    </a>
                </td>
                <td>
                    <form method="post" action="/admin/slider/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/slider/visible/{{$image->id}}">
                        @if($image->visible)
                        <img src="/images/visibleIcon.png" width="20px">
                        @else
                        <img src="/images/invisibleIcon.png" width="20px">
                        @endif
                    </a>
                <td>{{$image->uploadedBy->name}}
                    {{$image->uploadedBy->surname}}</td>
                <td>
                    <form method="post" action="/admin/slider/delete" style="display: inline;">
                        @csrf
                        <input type="hidden" value="{{$image->id}}" name="id">
                    <button style="background: none; border:none;"><image src="/images/deleteIcon.png" width="20px"/></button></form>
                </td>
            </tr>
        @empty
        <tr><td colspan="5">No images available. Upload images above. Image size should be 900 pixels wide and 300 pixels high.</td></tr>
        @endforelse
    </tbody>
    </table>
    {{ $images->links() }}
    <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/>
    ** <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: 900(w)x300(h) in pixels (IMPORTANT).<br/>
        Image type: jpg or png.<br/>
        Delete can not be undone.</span></b></small>
</div>
@endsection


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