@props(['product'])

@php $oldRating = (int) old('rating', 0); @endphp

<form
    method="POST"
    action="{{ route('product.reviews.store', ['locale' => app()->getLocale(), 'product' => $product['id']]) }}"
    class="flex flex-col gap-8 mt-10"
    data-controller="star-rating"
    data-star-rating-rating-value="{{ $oldRating }}"
    data-action="submit->star-rating#validate"
>
    @csrf

    {{-- Rating --}}
    <x-ui.field :label="__('storefront.review.rating')" for="rating" :required="true" :error="$errors->first('rating')">
        <div
            id="rating"
            class="flex items-center gap-1.5 text-brand"
            role="radiogroup"
            aria-label="{{ __('storefront.review.rating') }}"
            aria-required="true"
            aria-describedby="rating-client-error"
        >
            <input type="hidden" name="rating" value="{{ $oldRating }}" data-star-rating-target="input">
            @for($i = 1; $i <= 5; $i++)
                <button
                    type="button"
                    data-star-rating-target="star"
                    data-value="{{ $i }}"
                    data-action="click->star-rating#select mouseenter->star-rating#hover mouseleave->star-rating#leave"
                    aria-label="{{ trans_choice('storefront.review.stars_count', $i, ['count' => $i]) }}"
                    aria-pressed="{{ $i === $oldRating ? 'true' : 'false' }}"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 23 21"
                        fill="none"
                        stroke="currentColor"
                        class="w-6 h-6"
                        aria-hidden="true"
                    >
                        <path d="m15.054 0 .689 4.894 5.057-.883-2.435 4.348L23 10.5l-4.635 2.141 2.435 4.348-5.061-.883L15.054 21 11.5 17.43 7.946 21l-.689-4.894-5.057.883 2.438-4.348L0 10.5l4.635-2.141L2.2 4.011l5.061.883L7.946 0 11.5 3.57Z"/>
                        <path d="m14.34389687 2.13050652-2.84388733 2.85695266-2.84390736-2.85695076-.55294228 3.92571163-4.0049181-.69867801 1.93777848 3.45510769L2.38412858 10.5l3.6518917 1.68735027-1.9377842 3.4551077 4.00493431-.69867802.55292607 3.92570781L11.5 16.01253891l2.84389782 2.85694885.55294228-3.92570781 4.00492382.69867801-1.9377842-3.45510769L20.61587142 10.5l-3.6518917-1.68735027 1.9377842-3.4551077-4.00492382.69867802-.55294323-3.92571353M7.94631004 0l3.5536995 3.5699997L15.05368996 0l.68924999 4.89351082 5.06075954-.88287163-2.43848037 4.34787083L23 10.5l-4.63478088 2.14148998 2.43848037 4.34787083-5.06075954-.88286972L15.05368995 21 11.5 17.4300003 7.94629955 21l-.6892395-4.89350891-5.06075954.88286972 2.43848037-4.34787083L0 10.5l4.63478088-2.14148998-2.43847084-4.34787083 5.06075001.88287163L7.94631005 0Z"/>
                    </svg>
                </button>
            @endfor
        </div>
        <p id="rating-client-error" data-star-rating-target="error" class="text-sm text-red-600" role="alert" hidden>{{ __('storefront.review.rating_required') }}</p>
    </x-ui.field>

    <x-ui.field :label="__('storefront.review.write_label')" for="review-content" :required="true" :error="$errors->first('content')">
        <x-ui.textarea id="review-content" name="content" :required="true" :rows="6">{{ old('content') }}</x-ui.textarea>
    </x-ui.field>

    <x-ui.field :label="__('storefront.review.name')" for="review-name" :labelDescription="__('storefront.review.name_optional')" :error="$errors->first('name')">
        <x-ui.input id="review-name" name="name" autocomplete="name" :value="old('name')" />
    </x-ui.field>

    <x-ui.field :label="__('storefront.review.email')" for="review-email" :required="true" :labelDescription="__('storefront.review.email_not_published')" :error="$errors->first('email')">
        <x-ui.input id="review-email" name="email" type="email" :required="true" autocomplete="email" :value="old('email')" />
    </x-ui.field>

    <div>
        <x-ui.button type="submit">{{ __('storefront.review.submit') }}</x-ui.button>
    </div>

</form>