@extends('reviewer.layouts.app')
@php
    $hiddenForever = in_array($product->status, [Status::PRODUCT_PERMANENT_DOWN]);
@endphp
@section('panel')
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <div class="col-md-5">
                    <div class="card h-100">
                        <div class="card-body">
                            <h4 class="m-0">{{ __($product->title) }}</h4>
                            @if ($product->audio_temp_file && $product->category->file_type == 'audio' && in_array('mp3', $product->category->preview_file_types))
                                <div class="audio-player-wrapper">
                                    <div class="d-flex align-items-center gap-1 audio-player-left">
                                        <button id="play-button" class="play-button">
                                            <i class="fas fa-play"></i>
                                        </button>
                                        <span id="current-time">00:00</span>
                                    </div>

                                    <div class="audio-player-middle"
                                         data-file-path="{{ asset(getFilePath('previewFile')) . '/' . productFilePath($product, 'temp_audio_file') . '/' . $product->audio_temp_file }}"
                                         id="waveform"></div>

                                    <div class="audio-player-time">
                                        <span id="total-time">00:00</span>
                                    </div>
                                </div>
                            @else
                                <div class="image-upload mt-3">
                                    <img src="{{ getImage(getFilePath('productPreview') . productFilePath($product, 'preview_image')) }}"
                                         alt="@lang('Product Preview')" />
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-md-7">
                    <div class="card">
                        <div class="card-body">

                            <ul class="list-group list-group-flush ">
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Project Files')</span>
                                    <span>
                                        @if ($product->file)
                                            <a
                                               href="{{ route('reviewer.product.download', $product->id) }}?time={{ time() }}">
                                                <i class="las la-download"></i>
                                                @lang('Download File')
                                            </a>
                                        @endif
                                        @if ($product->product_updated == Status::PRODUCT_UPDATE_PENDING || $product->status == Status::PRODUCT_PENDING)
                                            @php $hasFile = true; @endphp
                                            <a
                                               href="{{ route('reviewer.product.download.temp', $product->id) }}?time={{ time() }}">
                                                <i class="las la-download"></i>
                                                @lang('Download Updated File')
                                            </a>
                                        @endif
                                    </span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Category')</span>
                                    <span>{{ @$product->category->name }}</span>
                                </li>
                                @if (!$product->is_free)
                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fw-bold">@lang('Price')(@lang('Regular License'))</span>
                                        <span>{{ showAmount($product->price) }}</span>
                                    </li>
                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fw-bold">@lang('Price')(@lang('Commercial License'))</span>
                                        <span>{{ showAmount($product->price_cl) }}</span>
                                    </li>
                                @else
                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fw-bold">@lang('Price')</span>
                                        <span class="badge badge--success">@lang('Free')</span>
                                    </li>
                                @endif
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Status')</span>
                                    <br />
<b>Warning</b>:  Undefined variable $product in <b>/var/www/html/core/resources/views/reviewer/product/details.blade.php</b> on line <b>85</b><br />
<br />
<b>Warning</b>:  Attempt to read property "statusBadge" on null in <b>/var/www/html/core/resources/views/reviewer/product/details.blade.php</b> on line <b>85</b><br />
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Update Status')</span>
                                    <br />
<b>Warning</b>:  Undefined variable $product in <b>/var/www/html/core/resources/views/reviewer/product/details.blade.php</b> on line <b>89</b><br />
<br />
<b>Warning</b>:  Attempt to read property "updateStatusBadge" on null in <b>/var/www/html/core/resources/views/reviewer/product/details.blade.php</b> on line <b>89</b><br />
                                </li>
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Demo')</span>
                                    @if (@$product->category->file_type == 'audio')
                                        <a href="{{ asset(getFilePath('previewFile')) . '/' . productFilePath($product, 'temp_audio_file') . '/' . @$product->audio_temp_file }}" download="">@lang('Download Preview')</a>
                                    @else
                                        <a href="{{ $product->demo_url }}" target="_blank">
                                            {{ @$product->demo_url }}
                                        </a>
                                    @endif
                                </li>
                                @foreach ($product->attribute_info as $info)
                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fw-bold">@lang($info->name)</span>
                                        @if (is_array($info->value))
                                            <div>
                                                @foreach ($info->value as $val)
                                                    <span>{{ $val }}</span>
                                                    @if (!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach
                                            </div>
                                        @else
                                            <span>{{ @$info->value }}</span>
                                        @endif
                                    </li>
                                @endforeach
                                <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                    <span class="fw-bold">@lang('Tags')</span>
                                    <div>
                                        @forelse ($product->tags ?? [] as $tag)
                                            <span class="badge badge--primary mb-2">{{ $tag }}</span>
                                        @empty
                                            <span class="text-secondary">@lang('No Tags')</span>
                                        @endforelse
                                    </div>
                                </li>
                                @if (@$product->category->file_type !== 'audio')
                                    <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap">
                                        <span class="fw-bold">@lang('Video Preview')</span>
                                        <div id="previewVideo">
                                            @if (!empty($product->preview_video) && file_exists(getFilePath('previewVideo') . '/' . productFilePath($product, 'preview_video')))
                                                <a href="{{ getImage(getFilePath('previewVideo') . '/' . productFilePath($product, 'preview_video')) }}"
                                                   class="btn btn--primary" id="showPreviewVideo">
                                                    <i class="las la-play"></i>
                                                    @lang('Watch Video')
                                                </a>
                                            @else
                                                <span class="text-secondary">@lang('No Video Preview')</span>
                                            @endif
                                        </div>
                                    </li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row gy-3 mt-3">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="mb-4 border-bottom pb-2">@lang('Activity Log')</h3>
                            <div class="product-response__content">
                                @forelse ($activities as $activity)
                                    <div class="product-response__item activity">
                                        <div class="product-response-info mb-2">
                                            <div class="product-response-info__thumb">
                                                @if ($activity->user)
                                                    <x-author-avatar :author="$activity->user" />
                                                @else
                                                    <img src="{{ getImage(getFilePath('reviewerProfile') . '/' . @$activity->reviewer->image, getFileSize('reviewerProfile')) }}"
                                                         alt="@lang('Reviewer Image')">
                                                @endif
                                            </div>
                                            <div class="product-response-info__content">
                                                <h6 class="product-response-info__name">
                                                    {{ $activity->user->fullname ?? $activity->reviewer->name }}
                                                    - [{{ $activity->user_id ? __('Author') : __('You') }}]
                                                </h6>
                                                <span class="product-response-info__date">
                                                    {{ showDateTime($activity->created_at, 'd M Y ') }}
                                                    @lang('at')
                                                    {{ showDateTime($activity->created_at, 'H:ma') }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="product-response-list mb-3">
                                            <p>{{ $activity->message }}</p>
                                        </div>
                                    </div>
                                @empty
                                    <div class="w-100 text-center">
                                        <x-empty-list title="This product has no activities" />
                                    </div>
                                @endforelse
                            </div>

                            {{ paginateLinks($activities) }}

                            @if ($activities->count() > 0)
                                <div class="d-flex align-items-center">
                                    <div class="me-2">
                                        <div class="product-response-info__thumb">
                                            <img src="{{ getImage(getFilePath('reviewerProfile') . '/' . auth()->guard('reviewer')->user()->image, getFileSize('reviewerProfile')) }}"
                                                 alt="image"></span>
                                        </div>
                                    </div>
                                    <div class="w-100">
                                        <p class="mb-2 fw-bold">@lang('Message to Author')</p>
                                        <form action="{{ route('reviewer.product.activities.reply', $product->id) }}"
                                              method="POST">
                                            @csrf
                                            <div class="input-group w-100">
                                                <input type="text" class="form-control w-100" name="message"
                                                       placeholder="@lang('You can reply to the author')" style="flex: 1">
                                                <button type="submit"
                                                        class="btn btn--primary flex-shrink-1">@lang('Submit')</button>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-confirmation-modal />

    {{-- reject modal --}}
    <div id="rejectModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Confirmation Alert!')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form action="" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="reason" class="form-label  reson-message">@lang('Reason for rejection')</label>
                            <textarea name="reason" id="reason" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn--dark" data-bs-dismiss="modal">@lang('No')</button>
                        <button type="submit" class="btn btn--primary">@lang('Yes')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        "use strict";
        (function($) {
            $('.rejectBtn').on('click', function() {
                var modal = $('#rejectModal');
                modal.find('.modal-title').text($(this).data('title'));
                modal.find('form').attr('action', $(this).data('action'));
                modal.find('.reson-message').text($(this).data('reject-label') || "@lang('Reason for rejection')");
                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush



@push('breadcrumb-plugins')
    <div class="text-end">
        @if ($product->assigned_to == 0)
            <button data-action="{{ route('reviewer.product.assign', $product->slug) }}"
                    class="btn btn-sm btn-outline--primary confirmationBtn" data-question="@lang('Are you sure to assign this product for review?')">
                <i class="las la-play"></i>@lang('Start Review')
            </button>
        @else
            @if (!$hiddenForever)
                @if ($product->status == Status::PRODUCT_APPROVED)
                    @if ($product->product_updated)
                        <button class="btn btn-sm btn-outline--success confirmationBtn" data-question="@lang('Are you sure to approve the update?')"
                                data-action="{{ route('reviewer.product.update.approve', ['id' => $product->id]) }}">
                            <i class="las la-check"></i>@lang('Update Approve')
                        </button>
                        <button class="btn btn-sm btn-outline--warning rejectBtn" data-question="@lang('Are you sure to soft reject this product')?"
                                data-action="{{ route('reviewer.product.update.reject', ['id' => $product->id, 'type' => Status::PRODUCT_UPDATE_SOFT_REJECT]) }}"><i
                               class="las la-times-circle"></i>
                            @lang('Update Soft Reject')
                        </button>
                        <button class="btn btn-sm btn-outline--danger rejectBtn" data-question="@lang('Are you sure to reject the update?')"
                                data-action="{{ route('reviewer.product.update.reject', ['id' => $product->id, 'type' => Status::PRODUCT_UPDATE_HARD_REJECT]) }}">
                            <i class="las la-ban"></i>@lang('Update Hard Reject')
                        </button>
                    @else
                        <button class="btn btn-sm btn-outline--warning rejectBtn" data-title="@lang('Are you sure to soft reject this product')?"
                                data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_SOFT_REJECTED]) }}">
                            <i class="las la-times-circle"></i> @lang('Soft Reject')
                        </button>
                        <button class="btn btn-sm btn-outline--danger confirmationBtn" data-question="@lang('Are you sure to hard reject this product?')"
                                data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_HARD_REJECTED]) }}"
                                @disabled(Status::PRODUCT_HARD_REJECTED == $product->status)>
                            <i class="las la-ban"></i>@lang('Hard Reject')
                        </button>
                    @endif
                    <button class="btn btn-sm btn-outline--warning rejectBtn" data-reject-label="@lang('Disable Reason')"
                            data-question="@lang('Are you sure to soft disable product?')"
                            data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_DOWN]) }}">
                        <i class="las la-ban"></i>
                        @lang('Soft Disable')
                    </button>
                    <button data-reject-label="@lang('Disable Reason')" class="btn btn-sm btn-outline--danger rejectBtn"
                            data-title="@lang('Are you sure to permanently disable this product')?"
                            data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_PERMANENT_DOWN]) }}"
                            @disabled(Status::PRODUCT_PERMANENT_DOWN == $product->status)>
                        <i class="las la-times"></i>
                        @lang('Permanent Disable')
                    </button>
                @else
                    <button class="btn btn-sm btn-outline--success confirmationBtn" data-question="@lang('Are you sure to approve the product?')"
                            data-action="{{ route('reviewer.product.approve', $product->id) }}">
                        <i class="las la-check"></i>@lang('Approve')
                    </button>
                    <button class="btn btn-sm btn-outline--warning rejectBtn" data-title="@lang('Are you sure to soft reject this product')?"
                            data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_SOFT_REJECTED]) }}">
                        <i class="las la-times-circle"></i> @lang('Soft Reject')
                    </button>
                    <button class="btn btn-sm btn-outline--danger confirmationBtn" data-question="@lang('Are you sure to hard reject this product?')"
                            data-action="{{ route('reviewer.product.reject', ['id' => $product->id, 'type' => Status::PRODUCT_HARD_REJECTED]) }}"
                            @disabled(Status::PRODUCT_HARD_REJECTED == $product->status)>
                        <i class="las la-ban"></i>@lang('Hard Reject')
                    </button>
                @endif
            @endif
        @endif
    </div>
@endpush

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/vendor/magnific-popup.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/wavesurfer.min.js') }}"></script>
    <script src="{{ asset($activeTemplateTrue . 'js/vendor/jquery.magnific-popup.min.js') }}"></script>
@endpush

@push('script')
    <script>
        (function($) {
            $(document).ready(function() {

                if ($('#waveform').length) {
                    var wavesurfer = WaveSurfer.create({
                        container: '#waveform',
                        waveColor: 'rgba(0, 0, 0, 0.7)',
                        progressColor: '#4634FF',
                        backend: 'MediaElement',
                        audioContext: new(window.AudioContext || window.webkitAudioContext)(),
                        height: 100,
                        barWidth: 2
                    });

                    var audioElement = $('#audio')[0];

                    wavesurfer.load(
                        '{{ asset(getFilePath('previewFile') . productFilePath($product, 'temp_audio_file') . $product->audio_temp_file) }}'
                    );


                    $('#play-button').on('click', function() {
                        if (wavesurfer.isPlaying()) {
                            wavesurfer.pause();
                            $(this).html('<i class="fas fa-play"></i>');
                        } else {
                            wavesurfer.play();
                            $(this).html('<i class="fas fa-pause"></i>');
                        }
                    });

                    $(audioElement).on('play', function() {
                        wavesurfer.play();
                        $('#play-button').html('<i class="fas fa-pause"></i>');
                    });

                    $(audioElement).on('pause', function() {
                        wavesurfer.pause();
                        $('#play-button').html('<i class="fas fa-play"></i>');
                    });

                    $(audioElement).on('seeked', function() {
                        wavesurfer.seekTo(audioElement.currentTime / audioElement.duration);
                    });

                    wavesurfer.on('finish', function() {
                        $('#play-button').html('<i class="fas fa-play"></i>');
                    });

                    wavesurfer.on('ready', function() {
                        var totalTime = wavesurfer.getDuration();
                        $('#total-time').text(formatTime(totalTime));
                    });

                    wavesurfer.on('audioprocess', function() {
                        var currentTime = wavesurfer.getCurrentTime();
                        $('#current-time').text(formatTime(currentTime));
                    });

                    function formatTime(seconds) {
                        var minutes = Math.floor(seconds / 60);
                        var seconds = Math.floor(seconds % 60);
                        return (minutes < 10 ? '0' : '') + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
                    }
                }

            });

            $('#showPreviewVideo').on('click', function(event) {
                event.preventDefault();

                $('#previewVideo').magnificPopup({
                    delegate: 'a',
                    type: 'iframe',
                    gallery: {
                        enabled: true
                    }
                }).magnificPopup('open');
            });

        })
        (jQuery);
    </script>
@endpush


@push('style')
    <style>
        .audio-player-wrapper {
            min-height: 163px !important;
        }

        .audio-card .product-card__thumb::before {
            display: none;
        }


        .list-view .audio-player-wrapper {
            min-height: 163px !important;
            width: 306px;
        }

        .audio-player-wrapper {
            min-height: 163px !important;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 0px 10px;
        }

        .audio-player-wrapper .play-button {
            width: 30px;
            height: 30px;
            background-color: #1801ff !important;
            border-radius: 3px;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .audio-player-left {
            width: 80px;
            flex-shrink: 0;
            font-size: 12px;
        }

        .audio-player-time {
            width: 50px;
            font-size: 12px;
            flex-shrink: 0;
        }

        .audio-player-middle {
            width: 100%;
        }

        .product-card.audio-card .product-card__thumb {
            border: 1px solid hsl(var(--border-color) / 0.45);
            border-bottom: none;
            border-radius: 8px 8px 0px 0px;
        }


        .product-details__inner.audio-card .product-details__thumb {
            background: #fff;
            border-radius: 12px;
        }

        .product-details__inner.audio-card .audio-player-wrapper {
            border: 1px solid hsl(var(--border-color));
            border-radius: 12px 12px 0px 0px;
            overflow: hidden;
        }


        .product-details__inner.audio-card .audio-player-wrapper.border-radius-add {
            border-radius: 12px;
        }
    </style>
@endpush