@extends('user.layouts.index', ['header' => true, 'nav' => true, 'demo' => true, 'settings' => $settings])

{{-- Custom CSS --}}
@section('css')
    <link href="{{ asset('css/dropzone.min.css') }}" rel="stylesheet">
    <script src="{{ asset('js/dropzone.min.js') }}"></script>
    <script src="{{ asset('js/clipboard.min.js') }}"></script>
    <style>
        .btn-group-sm>.btn,
        .btn-sm {
            --tblr-btn-line-height: 1.5;
            --tblr-btn-icon-size: .75rem;
            margin-right: 5px;
            font-size: 12px !important;
            margin: 13px 0 10px 5px !important;
        }

        .li-link {
            padding: 10px;
            margin: 4px;
        }

        .btn.disabled,
        .btn:disabled,
        fieldset:disabled .btn {
            border-color: #0000 !important;
        }

        .custom-nav {
            position: absolute;
            right: 5px;
            top: -2px;
        }

        .media-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
@endsection

@section('content')
    <div class="page-wrapper">
        <div class="page-body">
            <div class="container-fluid">
                {{-- Failed --}}
                @if (Session::has('failed'))
                    <div class="alert alert-important alert-danger alert-dismissible mb-2" role="alert">
                        <div class="d-flex">
                            <div>
                                {{ Session::get('failed') }}
                            </div>
                        </div>
                        <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                @endif

                {{-- Success --}}
                @if (Session::has('success'))
                    <div class="alert alert-important alert-success alert-dismissible mb-2" role="alert">
                        <div class="d-flex">
                            <div>
                                {{ Session::get('success') }}
                            </div>
                        </div>
                        <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
                    </div>
                @endif

                <div class="card">
                    <div class="row g-0">
                        <div class="col-12 col-md-2 border-end">
                            <div class="card-body">
                                <h4 class="subheader">{{ __('Update Business Card') }}</h4>
                                <div class="list-group list-group-transparent">
                                    {{-- Nav links --}}
                                    @include('user.pages.edit-cards.includes.nav-link', [
                                        'link' => 'testimonial',
                                    ])
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-10 d-flex flex-column">
                            <form action="{{ route('user.update.testimonial', Request::segment(3)) }}" method="post"
                                enctype="multipart/form-data" id="myForm">
                                @csrf
                                <div class="card-body">
                                    <h3 class="card-title mb-4">{{ __('Testimonials') }}</h3>

                                    <div class="row">
                                        {{-- Dynamic fields --}}
                                        @for ($i = 0; $i < count($testimonials); $i++)
                                            <div class="row" id="{{ $i }}">
                                                <div class="col-md-6 col-xl-6">
                                                    <div class="mb-3">
                                                        <label class="form-label required">{{ __('Reviewer Image') }}</label>
                                                        <div class="input-group mb-2">
                                                            <input type="text"
                                                                class="image{{ $testimonials[$i]->id }} media-model form-control"
                                                                name="reviewer_image[]"
                                                                placeholder="{{ __('Reviewer Image') }}"
                                                                value="{{ $testimonials[$i]->reviewer_image }}" required>
                                                            <button class="btn btn-primary btn-md" type="button"
                                                                onclick="openMedia({{ $testimonials[$i]->id }})">{{ __('Choose
                                                                                                                        image') }}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-6 col-xl-6">
                                                    <div class="mb-3">
                                                        <label
                                                            class="form-label required">{{ __('Reviewer Name') }}</label>
                                                        <input type="text" class="form-control" name="reviewer_name[]"
                                                            placeholder="{{ __('Reviewer Name') }}" maxlength="191"
                                                            value="{{ $testimonials[$i]->reviewer_name }}" required>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-xl-6">
                                                    <div class="mb-3">
                                                        <label
                                                            class="form-label required">{{ __('Reviewer Subtext') }}</label>
                                                        <input type="text" class="form-control" name="review_subtext[]"
                                                            placeholder="{{ __('Reviewer Subtext') }}"
                                                            value="{{ $testimonials[$i]->review_subtext }}" required>
                                                    </div>
                                                </div>

                                                <div class="col-md-6 col-xl-6">
                                                    <div class="mb-3">
                                                        <label class="form-label required">{{ __('Review') }}</label>
                                                        <input type="text" class="form-control" name="review[]"
                                                            placeholder="{{ __('Review') }}"
                                                            value="{{ $testimonials[$i]->review }}" required>
                                                        <button class='btn btn-danger btn-sm mt-2'
                                                            onclick='removeTestimonial({{ $i }})'>
                                                            {{ __('Remove') }}
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endfor

                                        {{-- Add new testimonials --}}
                                        <div id="more-testimonial" class="row"></div>

                                        {{-- Add button --}}
                                        <div class="col-lg-12 mb-5">
                                            <button type="button" onclick="addTestimonial()" class="btn btn-primary">
                                                {{ __('Add New') }}
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="card-footer text-end">
                                    <div class="d-flex">
                                        <a href="{{ route('user.cards') }}"
                                            class="btn btn-outline-primary ms-2">{{ __('Cancel') }}</a>
                                        <a href="{{ route('user.edit.popups', Request::segment(3)) }}" class="btn btn-outline-primary ms-2">{{ __('Skip') }}</a>
                                        <button type="submit"
                                            class="btn btn-primary ms-auto">{{ __('Submit') }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('user.includes.footer')

        {{-- Media Library --}}
        <div class="modal modal-blur fade" id="openMediaModel" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-full-width modal-dialog-centered modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="modal-status"></div>
                    <div class="modal-body text-center py-4">
                        <h3 class="mb-2">{{ __('Media Library') }}</h3>
                        <div class="text-muted mb-5">
                            {{ __('Upload multiple images') }}
                        </div>
    
                        {{-- Upload multiple images --}}
                        @include('user.pages.cards.media.upload')
    
                        {{-- Upload multiple images --}}
                        @include('user.pages.cards.media.list')
    
                        {{-- Pagination --}}
                        <div id="pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Custom JS --}}
    @push('custom-js')
        <script>
            var count = {{ count($testimonials) }};
            var currentSelection = 0;

            function addTestimonial() {
                "use strict";
                if (count >= {{ $plan_details->no_testimonials }}) {
                    new swal({
                        title: `{{ __('Oops!') }}`,
                        icon: 'warning',
                        text: `{{ __('You have reached your current plan limit.') }}`,
                        timer: 2000,
                        buttons: false,
                        showConfirmButton: false,
                    });
                } else {
                    count++;
                    var id = getRandomInt();
                    var testimonial =
                        "<div class='row' id=" + id +
                        "><div class='col-md-6 col-xl-6'><div class='mb-3'><label class='form-label required'>{{ __('Reviewer Image') }}</label><div class='input-group mb-2'><input type='text' class='image" +
                        id +
                        " media-model form-control' name='reviewer_image[]' placeholder='{{ __('Reviewer Image') }}' required><button class='btn btn-primary btn-md' type='button' onclick='openMedia(" +
                        id +
                        ")'>{{ __('Choose image') }}</button></div></div></div><div class='col-md-6 col-xl-6'> <div class='mb-3'> <label class='form-label required'>{{ __('Reviewer Name') }}</label> <input type='text' class='form-control' name='reviewer_name[]' maxlength='191' placeholder='{{ __('Reviewer Name') }}' required></div></div> <div class='col-md-6 col-xl-6'> <div class='mb-3'> <label class='form-label required'>{{ __('Reviewer Subtext') }}</label> <input type='text' class='form-control' name='review_subtext[]' placeholder='{{ __('Reviewer Subtext') }}' required></div></div> <div class='col-md-6 col-xl-6'> <div class='mb-3'> <label class='form-label required'>{{ __('Review') }}</label> <input type='text' class='form-control' name='review[]' placeholder='{{ __('Review') }}' required> <a href='#' class='btn mt-3 btn-danger btn-sm' onclick='removeTestimonial(" +
                        id + ")'>{{ __('Remove') }}</a>  </div><br></div>";
                    $("#more-testimonial").append(testimonial).html();
                }
            }

            // Remove service
            function removeTestimonial(id) {
                "use strict";
                $("#" + id).remove();
            }

            // Generate random number
            function getRandomInt() {
                min = Math.ceil(0);
                max = Math.floor(9999999999);
                return Math.floor(Math.random() * (max - min) + min); //The maximum is exclusive and the minimum is inclusive
            }

            // Open Media modal
            function openMedia(id) {
                "use strict";
                currentSelection = id;
                $('#openMediaModel').modal('show');
            }
        </script>
        {{-- Upload image in dropzone --}}
        <script type="text/javascript">
            // Default
            $('#success').hide();
            $('#failed').hide();

            Dropzone.options.dropzone = {
                maxFilesize: {{ env('SIZE_LIMIT') / 1024 }},
                acceptedFiles: ".jpeg,.jpg,.png,.gif",
                timeout: 180000,
                success: function(file, response) { 
                    if(response.status == 'success') {
                        // Feature Request
                        // $('#success').show();
                        // $('#successMessage').html(`<span>`+response.message+`</span>`);
                        // window.location.href = `{{ route('user.media') }}`;
                        loadMedia();
                    } else {
                        $('#failed').show();
                        $('#failedMessage').html(`<span>`+response.message+`</span>`);
                    }
                }
            };
        </script>

        {{-- Media with pagination --}}
        <script>
            // Default values
            var currentPage = 1;
            var totalPages = 1;

            // Previous image
            function loadPreviousPage() {
                "use strict";

                if (currentPage > 1) {
                    currentPage--;
                    loadMedia(currentPage);
                }
            }

            // Next page
            function loadNextPage() {
                "use strict";

                if (currentPage < totalPages) {
                    currentPage++;
                    loadMedia(currentPage);
                }
            }

            // Load media images
            function loadMedia(page = 1) {
                $.ajax({
                    url: '{{ route('user.media') }}',
                    method: 'GET',
                    data: {
                        page: page
                    },
                    dataType: 'json',
                    success: handleMediaResponse,
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            }

            // Media response
            function handleMediaResponse(response) {
                "use strict";

                var mediaData = response.media.data;
                if (mediaData.length > 0) {
                    $('#noImagesFound').hide();
                    $('#showPagination').removeClass('d-none').addClass('card pagination-card');
                    displayMediaCards(mediaData);
                    updatePaginationInfo(response.media);
                } else {
                    $('#noImagesFound').show();
                    $('#showPagination').addClass('d-none');
                    $('#mediaCardsContainer').html('');
                    updatePaginationInfo(response.media);
                }
            }

            // Display media images in card type
            function displayMediaCards(mediaData) {
                "use strict";

                // Generate media image
                var mediaCardsHtml = '';
                mediaData.forEach(function(media) {
                    mediaCardsHtml += `
                <div class="col-6 col-lg-4 col-xl-2 mb-4">
                    <div class="card">
                        <img src="${media.base_url}${media.media_url}" class="card-img-top" style="height: 200px; object-fit: cover;" alt="${media.media_name}">
                        <div class="card-body">
                            <h5 class="card-title media-name">${media.media_name}</h5>
                            <a class="btn btn-icon btn-primary btn-md copyBoard" data-clipboard-text="${media.media_url}" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ __('Copy') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2"
                                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <rect x="8" y="8" width="12" height="12" rx="2"></rect>
                                    <path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            `;
                });
                $('#mediaCardsContainer').html(mediaCardsHtml);
            }

            // Update pagination
            function updatePaginationInfo(media) {
                "use strict";

                $('#paginationStartIndex').text(media.from);
                $('#paginationEndIndex').text(media.to);
                $('#paginationTotalCount').text(media.total);
                currentPage = media.current_page;
                totalPages = media.last_page;

                $('#prevPageBtn').prop('disabled', currentPage <= 1);
                $('#nextPageBtn').prop('disabled', currentPage >= totalPages);
            }

            // Load more image in pagination
            $(document).ready(function() {
                "use strict";

                loadMedia(); // Initial load
            });
        </script>

        {{-- Clipboard --}}
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                "use strict";

                var clipboard = new ClipboardJS('.copyBoard');

                // Success
                clipboard.on('success', function(e) {
                    "use strict";

                    // Place value in the field
                    $('.image' + currentSelection).val(e.text);

                    // Hide media modal
                    $('#openMediaModel').modal('hide');
                });

                // Error
                clipboard.on('error', function(e) {
                    "use strict";

                    showErrorAlert('{{ __('Failed to copy text to clipboard. Please try again.') }}');
                });

                // Show success message
                function showSuccessAlert(message) {
                    "use strict";

                    showAlert(message, 'success');
                }

                // Show error message
                function showErrorAlert(message) {
                    "use strict";

                    showAlert(message, 'danger');
                }

                // Show alert
                function showAlert(message, type) {
                    "use strict";

                    var alertDiv = document.createElement('div');
                    alertDiv.classList.add('alert', 'alert-important', 'alert-' + type, 'alert-dismissible');
                    alertDiv.setAttribute('role', 'alert');

                    var innerContent = '<div class="d-flex">' +
                        '<div>' +
                        message +
                        '</div>' +
                        '</div>' +
                        '<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>';

                    alertDiv.innerHTML = innerContent;
                    document.querySelector('#showAlert').appendChild(alertDiv);

                    setTimeout(function() {
                        "use strict";

                        alertDiv.remove();
                    }, 3000);
                }
            });
        </script>
    @endpush
@endsection