@extends('layouts.admin')

@section('styles')
<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;
    }
</style>

@endsection

@section('content')
<div class="col-md-9 admincontent  justify-content-center">
    <h5>{{ __('Galleries') }}</h5>
    <form method="post" action="/admin/galleries" style="padding-bottom: 10px; padding-top:0;">
        @csrf
        <input type="hidden" name="order_id" value="{{(count($galleries)?$galleries->last()->order_id + 1:1)}}">
        New Gallery: <input type="text" name="name" placeholder="Menu Name" required style="background: #a9cfed; border:1px solid white; color: navy;">  <select name="type" required style="height:28px;background: #a9cfed; border:1px solid white; color: navy;"><option style="color:navy;" value="">Select Type</option><option value="image"  style="color:navy;">Image</option><option value="video"  style="color:navy;">Video</option></select> <button style="background: none; border:1px dashed white; height:28px;color:white;"> Add <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-danger">
            {!! 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>Menu Name</th>
            <th>Menu Order*</th>
            <th>Type</th>
            <th>Visible**</th>
            <th>Created By</th>
            <th> Action*** </th>
        </tr>
        @foreach($galleries as $gallery)
            <tr>
                <td>{{$gallery->name}}</td>
                <td>
                    <form method="post" action="/admin/galleries/order/{{$gallery->id}}">
                    @csrf
                        <input name="order" value="{{$gallery->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>{{ucfirst($gallery->type)}}</td>
                <td>
                    <a href="/admin/galleries/visible/{{$gallery->id}}">
                        @if($gallery->visible)
                            <img src="/images/visibleIcon.png" width="20px">
                        @else
                            <img src="/images/invisibleIcon.png" width="20px">
                        @endif
                    </a>
                    </td>
                <td>{{$gallery->createdBy->name}}
                    {{$gallery->createdBy->surname}}</td>
                <td>

                        <form method="post" action="/admin/galleries/delete" style="display: inline;">
                            <input type="hidden" name="gallery_id" value="{{$gallery->id}}">
        @csrf
                        <button style="background: none; border:none;"><image src="/images/deleteIcon.png" width="20px"/></button></form>&nbsp;&nbsp;&nbsp;<a href="/admin/gallery/{{$gallery->id}}"><img src="/images/editIcon.png" width="20px"></a>
                </td>
            </tr>
        @endforeach
    </tbody>
    </table>
    {{ $galleries->links() }}
    <small>* Edit the position (number) where you want the menu item 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 Gallery
    &nbsp;&nbsp; <image src="/images/deleteIcon.png" width="20px"/> Delete Gallery
    </small>
    <br/><small style="color:#ff8355;"><b>NOTES: <span style="display:inline-block;vertical-align: top;padding-top:3px;">Before a gallery can be deleted all images or videos in that gallery must be deleted first! <br/>
    Delete can not be undone.</span></b></small>
</div>
@endsection