@extends('dashboard::layouts.app')


@section('title')
    <h5 class="text-dark font-weight-bold mt-2 mb-2 mr-5">
        Feedback
    </h5>
@endsection

@section('content')
    <style>
        .img-thumbs {
            background: #eee;
            border: 1px solid #ccc;
            border-radius: 0.25rem;
            margin: 1.5rem 0;
            padding: 0.75rem;
        }

        .img-thumbs-hidden {
            display: none;
        }

        .wrapper-thumb {
            position: relative;
            display: inline-block;
            margin: 1rem 0;
            justify-content: space-around;
        }

        .img-preview-thumb {
            background: #fff;
            border: 1px solid none;
            border-radius: 0.25rem;
            box-shadow: 0.125rem 0.125rem 0.0625rem rgba(0, 0, 0, 0.12);
            margin-right: 1rem;
            max-width: 140px;
            padding: 0.25rem;
        }

        .remove-btn {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: .7rem;
            top: -5px;
            right: 10px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 10px;
            font-weight: bold;
            cursor: pointer;
        }

        .remove-btn:hover {
            box-shadow: 0px 0px 3px grey;
            transition: all .3s ease-in-out;
        }
    </style>


    <!--begin::Card-->
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap py-3">
            <div class="card-title">
                <h3 class="card-label">
                    Feedback List
                </h3>
            </div>
        </div>
        <div class="card-body">
            <!--begin: Datatable-->
            <div class="tab-pane" id="tab_1_1">
                <div class="portlet-body">
                    <div class="text-right">
                        <form action="{{ route('feedback.view') }}" method="GET">
                            <input type="text" name="search" required />
                            <button type="submit">Search</button>
                        </form>
                    </div>
                    <table class="table zero-configuration ordertable">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Subject</th>
                                <th>Message</th>
                                <th>Actions</th>
                            </tr>
                        </thead>

                        <tbody>
                            @if (count($feedbacks) > 0)
                                @foreach ($feedbacks as $feedback)
                                    <tr>
                                        <td>{{ $feedbacks->firstItem() + $loop->index }}</td>
                                        <td>{{ $feedback->name }}</td>
                                        <td>{{ $feedback->email }}</td>
                                        <td>{{ $feedback->subject }}</td>
                                        <td>{{ $feedback->message }}</td>
                                        <td>
                                            <span style="display: inline-block;">
                                                <form action="{{ route('feedback.delete', ['id' => $feedback->id]) }}" method="POST">
                                                    @csrf
                                                    <input type="hidden" name="id" value="{{ $feedback->id }}">
                                                    <button class="btn btn-sm btn-clean btn-icon btn-icon-md" title="Delete" onClick="return confirm('Are you sure want to delete?')"><i class="la la-trash"></i></button>
                                                </form>
                                            </span>
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4">No Feedback Found</td>
                                </tr>
                            @endif
                        </tbody>

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


            <div class='dataTables_paginate paging_simple_numbers float-right card-body'>

                {{ $feedbacks->appends(Request::except('page'))->links('pagination::bootstrap-4') }}

            </div>
            <!--end: Datatable-->
        </div>
    </div>
    <!--end::Card-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var imgUpload = document.getElementById('upload-img'),
            imgPreview = document.getElementById('img-preview'),
            imgUploadForm = document.getElementById('form-upload'),
            totalFiles, previewTitle, previewTitleText, img;

        imgUpload.addEventListener('change', previewImgs, true);

        function previewImgs(event) {
            totalFiles = imgUpload.files.length;

            if (!!totalFiles) {
                imgPreview.classList.remove('img-thumbs-hidden');
            }

            for (var i = 0; i < totalFiles; i++) {
                wrapper = document.createElement('div');
                wrapper.classList.add('wrapper-thumb');
                removeBtn = document.createElement("span");
                nodeRemove = document.createTextNode('x');
                removeBtn.classList.add('remove-btn');
                removeBtn.appendChild(nodeRemove);
                img = document.createElement('img');
                img.src = URL.createObjectURL(event.target.files[i]);
                img.classList.add('img-preview-thumb');
                wrapper.appendChild(img);
                wrapper.appendChild(removeBtn);
                imgPreview.appendChild(wrapper);

                $('.remove-btn').click(function() {
                    $(this).parent('.wrapper-thumb').remove();
                });

            }


        }
    </script>
@endsection