@extends('layouts.app')

@section('title','Gallery')

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">Gallery</div>
            <div class="panel-body">
                @if(count($gallery)>0)
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>File</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($gallery as $galleryData)
                        <tr>
                            <td>{{ $galleryData->title }}</td>
                            <td>
                                @if($galleryData->data_type=="image")
                                <img src="{{ asset('julian_gallery/images/'.$galleryData->filename) }}" class="img-thumbnail" height="320px" width="240px" alt="{{ $galleryData->title }}">
                                @else
                                <iframe src="https://youtube.com/embed/{{ $galleryData->filename }}" height="240" width="280"></iframe>
                                @endif
                            </td>
                            <td class="text-center"><p><a id="deleteFile" data-id="{{ $galleryData->id }}" href="#" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</a> </p>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>                                        
                </table>
                {{ $gallery->links() }}
                @else
                Gallery is empty!
                @endif
            </div>
        </div>
    </div>
</div>

<div id="deleteModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Delete File</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this file from gallery?</p>
                <form id="deleteFileForm" method="POST" action="{{ url('/admin/gallery') }}">
                    {{ csrf_field() }}
                    <input id="file_id" type="hidden" name="file_id" value="">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" name="submit" value="Yes" class="btn btn-success">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')

<script type="text/javascript">
  $(document).on('click','#deleteFile',function(){
    var file = $(this).data('id');
    $("#deleteFileForm #file_id").val(file);
});
</script>

@endsection

