@extends('cms.layouts.app')

@section('pre-styles')
    <style>
        .close-icon-parent {
            position: relative;
        }

        .close-icon {
            position: absolute;
            right: 0;
            top: 0;
            width: 50px;
            height: 40px;
            background: #ff8e8e3b;
            font-weight: bold;
            font-size: 22px;
            color: black;
        }
    </style>
@endsection

@section('contents')
    <!-- Hero -->

    <x-cms.bread-crumb title="<i class='fa fa-plus'></i> Add Portfolio">

        <li class="breadcrumb-item">Cms</li>
        <li class="breadcrumb-item" aria-current="page">
            Portfolio
        </li>
    </x-cms.bread-crumb>

    <div class="content" id="imageUploadPage">

        @if ($message = Session::get('success'))
            <div class="alert alert-success alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @elseif($message = Session::get('danger'))
            <div class="alert alert-danger alert-block">
                <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
            </div>
        @endif

        <div class="block">
            <div class="block-content block-content-full">
                <form action="{{ route('gallery-files.store') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <input type="hidden" name="gallery_id" value="{{ $gallery->id }}">
                                <div class="form-group-inner">
                                    <label for=""> File</label>

                                    <input id="imgInp" @change="onFileUploadChange" class="form-control h-100"
                                        name="galleryFiles[]" type="file" multiple />
                                </div>
                            </div>
                        </div>
                    </div>



                    <div class="mt-4" v-If="files.length > 0">
                        <div class="row">
                            <div class="col-sm-3 mt-2" v-for="file in files">
                                <img style="width: 100%; height: 350px;" :src="file" alt="">
                            </div>
                        </div>
                    </div>

                    <div class="text-right">
                        <a class="btn btn-danger btn-sm" href="{{ route('galleries.index') }}" title=""><i
                                class="fa fa-angle-double-left"></i> Cancel</a>
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i> Save</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="block">
            <div class="block-content block-content-full">
                <div class="mt-4">
                    <div class="row">
                        @foreach ($galleryImages as $galleryImage)
                            <div class="col-sm-4 mt-2 mb-4">
                                <div class="card close-icon-parent">
                                    <div class="text-center close-icon">
                                        <form
                                            action="{{ route('gallery-files.destroy', ['gallery_file' => $galleryImage->id]) }}"
                                            method="post" class="delForm">
                                            {{ csrf_field() }}
                                            {{ method_field('DELETE') }}

                                            <button
                                                @click="!confirm('Are you sure want to delete this image from gallery ?') ? $event.preventDefault() : ''"
                                                type="submit" class="btn btn-danger px-3" value="Delete"
                                                data-toggle="tooltip" title="Delete">X</button>

                                        </form>
                                    </div>

                                    <img style="width: 100%; height: 250px;"
                                        src="{{ asset('/uploads/gallery-files/' . $galleryImage->file) }}" alt=""
                                        id="imagePreview{{ $galleryImage->id }}">
                                    <div class="card-body">
                                        <form
                                            action="{{ route('gallery-files.update', ['gallery_file' => $galleryImage->id]) }}"
                                            method="post" enctype="multipart/form-data">
                                            @csrf
                                            @method('PATCH')
                                            <div class="row">
                                                <div class="col-4 p-2">
                                                    <input type="text" name="display_order"
                                                        class="form-control form-control-sm mt-1"
                                                        value="{{ $galleryImage->display_order }}"
                                                        placeholder="Display Order...">
                                                </div>

                                                <div class="col-8 p-2">
                                                    <input type="file" name="galleryImage" class="form-control"
                                                        onchange="document.getElementById('imagePreview{{ $galleryImage->id }}').src = window.URL.createObjectURL(this.files[0])">
                                                </div>

                                                <div class="col-12">
                                                    <input placeholder="Title" value="{{ $galleryImage->title }}"
                                                        type="text" name="title"
                                                        class="form-control form-control-sm mt-2 mb-2">
                                                    <textarea placeholder="Description" class="form-control" name="description" id="description" rows="2">{{ $galleryImage->description }}</textarea>
                                                </div>
                                            </div>


                                            <div class="text-right">
                                                <button class="btn btn-success btn-sm mt-2" type="submit"><i
                                                        class="fa fa-edit"></i> Update</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="text-right">
                    <a class="btn btn-danger btn-sm mt-2" href="{{ route('galleries.index') }}" title=""><i
                            class="fa fa-angle-double-left"></i> Back to Galley</a>
                </div>
            </div>
        </div>

    </div>
@endsection

@section('scripts')
    <script src="{{ asset('/js/vue.min.js') }}"></script>

    <script>
        const imageUploadPage = new Vue({
            el: '#imageUploadPage',
            data: {
                files: []
            },
            methods: {
                onFileUploadChange(e) {
                    this.files = [];
                    for (var i = 0; i < e.target.files.length; i++) {
                        this.files.push(URL.createObjectURL(e.target.files[i]));
                    }
                },
            }
        });
    </script>
@endsection