@extends('entertrainer.layouts.master')
@section('content')


    <section class="section">
        <ul class="breadcrumb breadcrumb-style ">
            <li class="breadcrumb-item">
                <h4 class="page-title m-b-0">Dashboard</h4>
            </li>
            <li class="breadcrumb-item active">Event</li>
        </ul>
        @if ($message = Session::get('success'))
            <div class="alert alert-success">
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <div class="card">
            <div class="card-body">



                <button type="button" class="btn  btn-icon icon-left  btn-primary float-right mb-3" data-toggle="modal"
                    data-target="#AddImage"><i class="far fa-edit"></i>Add image</button>
                <div class="table-responsive">

                    <table class="table table-striped table-md" id="datatable">
                        <tbody>


                            <tr>
                                <th>ID</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>

                            @foreach ($data as $images)

                                <tr id="eventid">
                                    <td>{{ $images['id'] }}</td>
                                    <td>
                                        @for ($i = 0; $i < sizeof($images) - 1; $i++)
                                            <img src="{{ asset('imgfiles/' . str_replace('"', '', $images[$i])) }}"
                                                height="100px" alt="">
                                        @endfor
                                    </td>
                                    <td>
                                        <button class="btn btn-md btn-icon btn-success edit" data-toggle="modal"
                                            data-target="#EditImage"><i class="far fa-edit"></i>
                                        </button>

                                        <a href="{{ route('entertainer.gallery-delete', ['id' => $images['id']]) }}"
                                            class="btn btn-md btn-icon btn-danger delete"><i class="fas fa-trash-alt"></i>
                                        </a>
                                    </td>

                                </tr>
                            @endforeach


                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <div class="modal" id="AddImage">
        <div class="modal-dialog">
            <div class="modal-content">


                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Add Image</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">

                    @if ($message = Session::get('success'))
                        <div class="alert alert-success">
                            <strong>{{ $message }}</strong>
                        </div>
                    @endif
                    <form action="{{ route('entertainer.gallery.process') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="form-group">
                            <label>Name</label>
                            <div class="input-group">
                                <div class="input-group-prepend">

                                </div>
                                <input type="file" name="imgfiles[]" multiple class="form-control" id="images"
                                    placeholder="Image Name" required>
                            </div>
                            <span class="text-danger"></span>

                        </div>


                        <input type="submit" Value="Add Image"
                            class="btn  btn-icon icon-left  btn-primary float-right  m-t-15 waves-effect">
                    </form>
                </div>

                <!-- Modal footer -->


            </div>
        </div>
    </div>
    <div class="modal" id="EditImage">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Edit Image</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <form method="POST">
                        @csrf
                        <div class="form-group">
                            <label>Image</label>
                            <div class="input-group">
                                <div class="input-group-prepend">

                                </div>
                                <input type="hidden" name="id" class="id" value="">
                                <input type="file" class="form-control event_name" placeholder="Image" required>

                            </div>
                        </div>


                        <input type="submit" value="Add Image"
                            class="btn  btn-icon icon-left  btn-primary float-right  m-t-15 waves-effect">
                    </form>
                </div>

                <!-- Modal footer -->


            </div>
        </div>
    </div>

@endsection
@section('script')
<script>
    $(function() {

        var multiImgPreview = function(input, imgPreviewPlaceholder) {

            if (input.files) {
                var filesAmount = input.files.length;

                for (i = 0; i < filesAmount; i++) {
                    var reader = new FileReader();

                    reader.onload = function(event) {
                        $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(
                            imgPreviewPlaceholder);
                    }

                    reader.readAsDataURL(input.files[i]);
                }
            }

        };

        $('#images').on('change', function() {
            multiImgPreview(this, 'div.imgPreview');
        });
    });
</script>
@endsection