@extends('layouts.webshop')

@section('main-content')

@if (session('success'))
<div class="d-flex">
    <div class="d-inline-block alert alert-success border-left-success alert-dismissible fade show w-50 mt-4 mx-auto" role="alert">
        {{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
</div>
@endif

@if($rating)

    <form action="" method="post">
        @csrf 
        @method('PATCH')
        <input type="hidden" name="token" id="token" value="{{$token}}">

        @include('webshop.text-block', [
            'background' => '#EEEEEE',
            'label_text' => 'Értékeld szolgáltatásunkat',
            'label_color' => '#000000',
            'text' => '
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                Véleménye fontos számunkra! Kérjük véleményezze weboldalunkat, szolgáltatásunkat mennyire volt elégedett velünk!
                            </div>
                            <div class="col-12">
                                <h4 class="my-4">Kérjük szavazz!</h4>
                                <div class="order-rating my-4" data-rating="0"></div>
                                <input type="hidden" name="rating" id="rating">
                                <textarea name="comment" id="comment" cols="30" rows="10" class="w-100 w-md-50 border-bottom border-dark" maxlength="300" placeholder="Ide írd az észrevételeidet!" style="background-color:#EEEEEE;border: 0px;"></textarea>
                            </div>
                            <div class="col-12">            
                                <button type="submit" class="btn btn-primary my-4 w-100 w-md-50">Küldés</button>
                            </div>
                        </div>
                    </div>
                ',
            'text_align' => 'text-center',
        ])

    </form>

    @push('scripts')
    <script>
    $(".order-rating").starRating({
        totalStars: 5,
        starShape: 'rounded',
        starSize: 40,
        emptyColor: 'lightgray',
        hoverColor: 'salmon',
        activeColor: 'crimson',
        useGradient: false,
        useFullStars: true,
        callback: function(currentRating, $el){
            $('#rating').val(currentRating);
        }
    });
    </script>
    @endpush

@else

    @include('webshop.text-block', [
        'background' => '#EEEEEE',
        'label_text' => 'Értékeld szolgáltatásunkat',
        'label_color' => '#000000',
        'text' => '
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            Értékelés nem elérhető.
                        </div>
                    </div>
                </div>
            ',
        'text_align' => 'text-center',
    ])

@endif

@endsection