@extends('admin.main')

@section('content')

    <!-- /.card -->
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Hotel Gallery</h3>
            </div>

            <form id="FormStore" role="form" enctype="multipart/form-data"
                  action="{{route('admin.post.hotel.gallery.store')}}">
                <div class="card-body">
                    @csrf

                    <div class="row">

                        <div class="col-md-12">
                            <div class="form-group col-md-5">

                                <label for="img">Image</label>
                                <input type="file" class="form-control" multiple name="img[]" id="img" accept="image/*">
                                <input type="hidden" name="hotel_id" value="{{ $hotel->id }}">

                            </div>
                        </div>

                        <div class="col-sd-12">
                            <div class="gallery row"></div>
                        </div>

                    </div>

                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                    <button type="submit" class="btn btn-primary add-gallery">Submit</button>
                </div>
            </form>

        </div>


        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <table id="data-table" class="table table-bordered table-striped col-md-12" style="width: 100%">
                        <thead>
                            <tr>
                                <th class="text-center" data-fill="id">#</th>
                                <th 
                                    class="text-center" 
                                    data-type="image"
                                    data-fill="img"
                                    directory="{{getImage(HOTEL_GALLERY_PATH)}}"
                                >
                                    Image
                                </th>
                                <th 
                                    class="text-center" 
                                    data-type="input"
                                    data-fill="img_alt"
                                    input-type="text"
                                    input-class="form-control"
                                    input-placeholder="Image Alt"
                                >
                                    Image Alt
                                </th>
                                <th 
                                    class="text-center" 
                                    data-type="input"
                                    data-fill="img_title"
                                    input-type="text"
                                    input-class="form-control"
                                    input-placeholder="Image Title"
                                >
                                    Image Title
                                </th>
                                <th 
                                    class="text-center" 
                                    data-type="input"
                                    input-type="submit"
                                    input-fill="Save"
                                    input-class="form-control btn btn-info btn-sm"
                                    input-url="{{ route('admin.put.hotel.gallery.update', ['!id!']) }}"
                                    input-method="put"
                                >
                                    Save Changes
                                </th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>


    </div>

@endsection




@section('scripts')

    <script type="text/javascript">

        $(function () {
            // Multiple images preview in browser placeToInsertImagePreview
            var imagesPreview = function (input) {

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

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

                        reader.onload = function (event) {
                            $("div.gallery").append('<div class="col-md-4"><img class="img img-bordered" style="width:150px;height: 150px;margin-left:20px;" src="' + event.target.result + '" /> </div>');

                        }

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

            };

            $('#img').on('change', function () {
                $("div.gallery").html('')
                imagesPreview(this);

            });

            $('.add-gallery').on('click', function(){
                $("div.gallery").html('')
            })


        });


    </script>

    @include('admin.ajax.datatables', [
        'ajax_url'          => route('admin.get.hotel.gallery.datatables', [$hotel->id]),
        'options'           => true,
        'delete_row'        => true,
        'delete_url'        => route('admin.delete.hotel.gallery.destroy', ['!id!']),
        'multi_delete'      => true,
        'multi_delete_url'  => route('admin.post.hotel.gallery.deleteMulti'),
    ])

@endsection