@extends('layouts.layout') @section('content')
<div class="container-fluid" style="min-height:620px">
    @if (count($errors) > 0)
    <div class="alert alert-danger">
        <strong>Whoops!</strong> There were some problems with your input.
        <br>
        <br>
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif @if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
    @endif

    <div class="jumbotron">
        <form method="post" action="uploadimage" enctype="multipart/form-data">
            {{csrf_field()}}
            <div class="row">

                <div class="col-md-6">
                    <div class="form-group">
                        <input style="width:100%" type="text" autocomplete="off" id="foldername" name="foldername" class="form-control " placeholder="Folder Name" required>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="input-group control-group increment">
                        <input type="file" name="filename[]" class="form-control">
                        <div class="input-group-btn">
                            <button id='addimage' class="btn btn-success btn-sm" type="button"><i class="fa fa-plus"></i>Add</button>
                        </div>
                    </div>
                    <div class="clone hide">
                        <div class="control-group input-group" style="margin-top:10px">
                            <input type="file" name="filename[]" class="form-control">
                            <div class="input-group-btn">
                                <button class="btn btn-danger removeImage" type="button"><i class="glyphicon glyphicon-remove"></i> Remove</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-default" style="margin-top:10px">Submit</button>

        </form>
    </div>

    <div>

        <div class="row">

                @if($i==3)        
                   @else 
                 @endif
         {{$html}}
                @foreach($files as $image)
                                <div class="col-md-4 thumb">
                    <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="" data-image="{{url('images/gallery/'.$image->getFileName()) }}" data-target="#image-gallery">
                        <img class="img-responsive" src="{{url('images/gallery/'.$image->getFileName()) }}" alt="not found">
                        <h4>{{$image->getFileName() }}<h4>
                    </a>
                </div>

                @endforeach
            </div>
            <div>
            <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                            <h4 class="modal-title" id="image-gallery-title"></h4>
                        </div>
                        <div class="modal-body">
                            <img id="image-gallery-image" class="img-responsive" src="">
                        </div>
                        <div class="modal-footer">

                            <div class="col-md-2">
                                <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                            </div>

                            <div class="col-md-2">
                                <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    @endsection