@extends('master')

@section('title')
    Edit Gallery
@stop

@section('styles')
    <link rel="stylesheet" href="{{ asset('css/nav.css') }}">
@stop

@section('content')

    <div class="row fullWidth">
        <div class="autoplay">
            <div><img class="" src="{{ asset('img/home/osizweni-test-header.jpg') }}"></div>
            <div><img class="" src="{{ asset('img/home/osizweni-header-blue.jpg') }}"></div>
            <div><img class="" src="{{ asset('img/home/osizweni-header-green.jpg') }}"></div>
        </div>
        @include('partials.dashboard-nav')
    </div>


    <div class="row fullWidth">
        <div class="bannerPage">

        
        <form action="{{ $gallery ? route('admin.gallery.update', $gallery->id) : route('admin.gallery.store') }}" method="post" enctype="multipart/form-data">
            @method($gallery ? 'put' : 'post')
            @csrf
            <div class="row">
                <div class="large-6 columns">
                    <label>Gallery Name</label>
                    <input required type="text" name="name" value="{{ old('name') ?: ($gallery ? $gallery->name : null)}}">
                </div>
              </div>
    
                <div class="row">
                    <div class="large-12 columns">
                            <label>Description</label>
                            <textarea required name="description" class="content">
                                {{ old('description') ?: ($gallery ? $gallery->description : null) }}
                            </textarea>
                        </div>
                </div>
    
              <div class="row">
                <div class="large-6 columns">
                    <button style="margin-left: 0; width: 50%;" type="submit">Update Gallery</button>
                </div>
              </div>
    
              <hr>
        </form>
          

        @if ($gallery)
            <h2>Gallery Images</h2>

            @if($gallery->images->count() > 0)
                <div class="row">
                    <ul class="large-block-grid-3">
                        @foreach($gallery->images as $image)
                            <li>
                                <img style="width:312px;height:315px;" src="{{ asset($image->title) }}">
                                <br>
                                <form action="{{ route('admin.gallery.image.destroy', [$gallery->id, $image->id]) }}" method="post">
                                    @method('delete')
                                    @csrf
                                    <button type="submit" class="link">Delete</button>
                                </form>
                            </li>
                        @endforeach
                    </ul>
                </div>
            @else
                <h1>No gallery images added.</h1>
            @endif

            <div class="row">
                <div class="large-6 columns">
                    <a href="{{ route('admin.gallery.index') }}"><button style="margin-left: 0; width: 50%;">Back to Gallery Dashboard</button></a>
                </div>
            </div>
        @endif


        </div>
        <hr class="hrBooking">
    </div>
@include('partials.footer')

@stop

@section('scripts')
    <script src="{{ asset('js/scripts.js') }}"></script>
    <link rel="stylesheet" href="{{asset("redactor2/redactor.css")}}" />
      <script src="{{asset("redactor2/redactor.js")}}"></script>
      <script src="{{asset("js/redactor/plugins/scriptbuttons.js")}}"></script>
      <script type="text/javascript">
      $(document).ready(
      $(function()
      {
          $('.content').redactor({
                                    focus: true,
                                    imageUpload: '/redactorUpload',
                                    plugins: ['table', 'video','imagemanager','fontcolor','fontsize','fullscreen','scriptbuttons']

          });
      }));
      </script>
      <script>
          function Conform_Delete()
          {
             return confirm("Are You Sure Want to remove this image?");
          }
      </script>
@stop