@php
    $version = EcommerceHelper::getAssetVersion();
    Theme::asset()->add('front-review-css', 'vendor/core/plugins/ecommerce/css/front-review.css', version: $version);
    Theme::asset()->add('ecommerce-review-css', 'vendor/core/plugins/ecommerce/css/review.css', version: $version);
    Theme::asset()->container('footer')->add('ecommerce-review-js', 'vendor/core/plugins/ecommerce/js/review.js', ['jquery'], version: $version);
@endphp

<x-core::form :url="route('public.reviews.create')" method="post" class="ecommerce-form-review-product product-review-container" :files="true">
    <input name="product_id" type="hidden" value="{{ $product ? $product->id : '' }}">

    <div class="mb-4">
        <h2 class="fs-5 fw-semibold ecommerce-product-name mb-3" id="product-review-modal-label">
            {!! BaseHelper::clean($product ? $product->name : '') !!}
        </h2>

        <div class="d-flex align-items-center mb-3">
            <label class="form-label mb-0 required" for="rating">{{ trans('plugins/ecommerce::customer-dashboard.your_rating') }}</label>
            <div class="form-rating-stars ms-2">
                @for ($i = 5; $i >= 1; $i--)
                    <input
                        class="btn-check"
                        id="rating-star-{{ $i }}"
                        name="star"
                        type="radio"
                        value="{{ $i }}"
                        @checked($i === 5)
                    >
                    <label for="rating-star-{{ $i }}" title="{{ $i }} stars">
                        <x-core::icon name="ti ti-star-filled" />
                    </label>
                @endfor
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mb-3">
            <x-core::form.label for="txt-comment" class="required">
                {{ trans('plugins/ecommerce::customer-dashboard.review') }}
            </x-core::form.label>
            <x-core::form.textarea
                id="txt-comment"
                name="comment"
                :required="true"
                rows="5"
                :placeholder="trans('plugins/ecommerce::customer-dashboard.write_your_review')"
                aria-describedby="review-help"
            />
            <x-core::form.helper-text id="review-help">
                {{ trans('plugins/ecommerce::customer-dashboard.share_experience_help_others') }}
            </x-core::form.helper-text>
        </div>
        @if (EcommerceHelper::isCustomerReviewImageUploadEnabled())
            <div class="col-12 mb-3">
                <x-core::form.label class="mb-2">
                    {{ trans('plugins/ecommerce::customer-dashboard.photos') }} <span class="text-muted">({{ trans('plugins/ecommerce::customer-dashboard.optional') }})</span>
                </x-core::form.label>

                <x-core::custom-template id="ecommerce-review-image-template">
                    <span class="ecommerce-image-viewer__item" data-id="__id__">
                        <img src="{{ RvMedia::getDefaultImage() }}" alt="{{ trans('plugins/ecommerce::customer-dashboard.preview') }}" class="img-responsive d-block">
                        <span class="ecommerce-image-viewer__icon-remove image-viewer__icon-remove" title="{{ trans('plugins/ecommerce::customer-dashboard.remove_image') }}">
                            <x-core::icon name="ti ti-x" class="ecommerce-icon" />
                        </span>
                    </span>
                </x-core::custom-template>

                <div class="ecommerce-image-upload__viewer d-flex">
                    <div class="ecommerce-image-viewer__list position-relative">
                        <div class="ecommerce-image-upload__uploader-container">
                            <div class="d-table">
                                <div class="ecommerce-image-upload__uploader border border-2 border-dashed rounded p-4 text-center">
                                    <x-core::icon name="ti ti-photo-plus" class="ecommerce-icon ecommerce-image-upload__icon mb-2 text-muted" style="font-size: 2rem;" />
                                    <div class="ecommerce-image-upload__text fw-medium mb-1">{{ trans('plugins/ecommerce::customer-dashboard.upload_photos') }}</div>
                                    <input
                                        class="ecommerce-image-upload__file-input"
                                        name="images[]"
                                        data-max-files="{{ EcommerceHelper::reviewMaxFileNumber() }}"
                                        data-max-size="{{ EcommerceHelper::reviewMaxFileSize(true) }}"
                                        data-max-size-message="{{ trans('validation.max.file', ['attribute' => '__attribute__', 'max' => '__max__']) }}"
                                        type="file"
                                        accept="image/png,image/jpeg,image/jpg"
                                        multiple="multiple"
                                        aria-label="{{ trans('plugins/ecommerce::customer-dashboard.upload_review_photos') }}"
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <x-core::form.helper-text class="mt-2">
                    {{ trans('plugins/ecommerce::customer-dashboard.upload_photos_limit', [
                        'total' => EcommerceHelper::reviewMaxFileNumber(),
                        'max' => EcommerceHelper::reviewMaxFileSize(true),
                    ]) }}
                </x-core::form.helper-text>
            </div>
        @endif
        <div class="col-12 mb-3">
            <div class="alert alert-warning alert-message d-none" role="alert"></div>
        </div>

        <div class="col-12">
            <button
                class="btn btn-primary px-4 py-2 d-flex align-items-center gap-2 mb-3"
                type="submit"
            >
                <x-core::icon name="ti ti-send" />
                <span>{{ trans('plugins/ecommerce::customer-dashboard.submit_review') }}</span>
            </button>

            <div class="text-muted small mt-2 mt-sm-0">
                <x-core::icon name="ti ti-info-circle" class="me-1" />
                {{ trans('plugins/ecommerce::customer-dashboard.email_not_published') }}
            </div>
        </div>
    </div>
</x-core::form>