@extends('layouts.base')
@section('content')
    <style>
        .form-label {
            font-weight: 500;
            margin-bottom: 0px;
            font-size: 14px;
        }

        .form-control {
            font-size: 16px !important;
            padding: 15px;
            margin: 7px 0 20px;
            border: 1px solid transparent;
            background-color: #f2f6f9;
            border-radius: 12px;
            color: #313336;
            font-weight: 400;
            box-shadow: none;
        }

        .form-control:focus {
            box-shadow: none;
            border: 1px solid #FF603C;
            color: #313336;
        }

        .send-review {
            width: auto;
        }

        .contact-form {
            box-shadow: 0px 0px 10px 0px #f1f1f1;
            border: 1px solid #EDEDED;
            border-radius: 10px;
            max-width: 1100px;
            padding: 35px 30px;
            margin: 30px auto 0;
        }

        .form-label.required:after {
            content: "*";
            color: #ff603c;
            top: -2px;
            right: -11px;
            opacity: 1;
        }

        .review-block {
            max-width: 33%;
            cursor: auto;
            margin-top:20px;
        }

        @media only screen and (max-width: 998px) {
            h1 {
                margin-top: 25px;
            }
            .review-block {
            max-width: 100%;
            cursor: auto;
        }
        }

        .accordion-item {
            background-color: inherit;
            border: none;
            border-top: 1px solid #e1e6ef !important;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        .accordion-button {
            color: #333 !important;
            font-weight: 600;
            background-color: inherit !important;
            box-shadow: none !important;
            transition: 0.2s;
            font-size: 17px;
        }

        .accordion-button:hover {
            color: #ff603c !important;
        }

        .accordion-button:not(.collapsed) {
            color: #ff603c !important;
        }

        .accordion-body {
            color: #333;
            font-size: 15px;
        }

        .accordion-button:not(.collapsed)::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236d768b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
        }

        .accordion__question-mark {
            margin-left: 2px;
            margin-right: 10px;
            position: relative;
            font-size: 18px;
            color: #fff;
            min-width: 29px;
            height: 29px;
            border-radius: 50%;
            background-color: #ff603c;
        }

        .accordion__question-mark span {
            font-family: "Source Sans Pro";
            position: absolute;
            display: block;
            top: 15%;
            left: 35%;
        }

        .accordion a {
            color: #ff603c;
        }

        .accordion-body {
            padding-bottom: 30px;
        }



    </style>
    <header class="header section app-landing-2-header" style="background-color:white !important;" data-aos="fade-up">
        <div class="shapes-container">
            <!-- diagonal shapes -->
            <div class="shape shape-animated" data-aos="fade-down-right" data-aos-duration="1500" data-aos-delay="100"></div>
            <div class="shape shape-animated" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100"></div>
            <div class="shape shape-animated" data-aos="fade-up-left" data-aos-duration="500" data-aos-delay="200"></div>
            <div class="shape shape-animated" data-aos="fade-up" data-aos-duration="500" data-aos-delay="200"></div>
            <!-- static shapes -->
            <div class="static-shape shape-ring shape-ring-1">
                <div class="animation animation--rotating"></div>
            </div>
            <div class="static-shape shape-ring shape-ring-2">
                <div class="animation animation--rotating-clockwise"></div>
            </div>
            <div class="static-shape pattern-dots-1"></div>
            <!-- main shape -->

        </div>
        <div class="container">
            <div class="gap-y align-items-center text-center header-main">
                <h1 style="font-weight:600;">{{__('Customer Reviews & Feedback')}} <span style="font-size:23px;">😄</span></h1>
                <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">{{__('Read our honest customer reviews & feedback. You can')}} <a href="#add-rev" style="color:#FF603C;">{{__('submit your own review')}}</a>.</p>
            </div>
            <div class="row" style="padding-top:50px;">
                @foreach ($reviews as $r)
                    <div class="review-block">
                        <div class="review__header">
                            <div class="review__stars"><svg width="22" height="20" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m11.133 0 3.281 6.625 7.219 1-5.25 5.125L17.564 20l-6.431-3.375L4.702 20l1.18-7.25-5.25-5.125 7.22-1L11.132 0Z"
                                        fill="#FF603C"></path>
                                </svg><svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m11.133 0 3.281 6.625 7.219 1-5.25 5.125L17.564 20l-6.431-3.375L4.702 20l1.18-7.25-5.25-5.125 7.22-1L11.132 0Z"
                                        fill="#FF603C"></path>
                                </svg><svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m11.133 0 3.281 6.625 7.219 1-5.25 5.125L17.564 20l-6.431-3.375L4.702 20l1.18-7.25-5.25-5.125 7.22-1L11.132 0Z"
                                        fill="#FF603C"></path>
                                </svg><svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m11.133 0 3.281 6.625 7.219 1-5.25 5.125L17.564 20l-6.431-3.375L4.702 20l1.18-7.25-5.25-5.125 7.22-1L11.132 0Z"
                                        fill="#FF603C"></path>
                                </svg><svg width="22" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="m11.133 0 3.281 6.625 7.219 1-5.25 5.125L17.564 20l-6.431-3.375L4.702 20l1.18-7.25-5.25-5.125 7.22-1L11.132 0Z"
                                        fill="#FF603C"></path>
                                </svg></div>
                            <p class="review__text">{{$r->review}}</p>
                            <p class="review__autor" data-bs-toggle="tooltip" data-bs-placement="top"
                                title="Ověřený zákazník">{{$r->name}} <svg width="15" height="14" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M13.107 8.621 15 6.984 13.12 5.28a.36.36 0 0 1-.108-.352l.545-2.27-2.466-.41a.376.376 0 0 1-.276-.202L9.81 0 7.702 1.042a.377.377 0 0 1-.331.004L5.186.007l-.941 2.085a.368.368 0 0 1-.287.214l-2.524.374.575 2.34a.355.355 0 0 1-.116.359L0 7.016 1.88 8.72a.36.36 0 0 1 .108.352l-.545 2.272 2.466.408c.12.02.223.095.276.202L5.19 14l2.105-1.042a.387.387 0 0 1 .333-.004l2.185 1.039.941-2.085a.369.369 0 0 1 .287-.214l2.524-.374-.575-2.34a.355.355 0 0 1 .116-.359Z"
                                        fill="#5395E9"></path>
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M11 5.18 6.538 11 4 7.498l.832-1.148 1.73 2.385L10.191 4 11 5.18Z"
                                        fill="#FAFAFA">
                                    </path>
                                </svg></p>
                            <div class="review__quote review__quote--down"><svg width="30" height="26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M12.422 5.077V0C5.262.625 1.13 4.765 1.13 11.795v9.7h11.293L10.63 14.83l-3.817-3.27c0-4.14 1.476-6.092 5.61-6.483ZM27.668 5.077V0c-7.517.625-11.857 4.765-11.857 11.795v9.7h11.857l-1.881-6.665-4.009-3.27c0-4.14 1.55-6.092 5.89-6.483Z"
                                        fill="#E2E5EC"></path>
                                    <path
                                        d="M8.878 25.137a2.839 2.839 0 0 1-2.874-.01l-3.597-2.126a2.84 2.84 0 0 1-1.394-2.453l.013-4.31a2.838 2.838 0 0 1 1.41-2.444l3.609-2.103a2.839 2.839 0 0 1 2.874.009l3.596 2.126a2.84 2.84 0 0 1 1.394 2.453l-.013 4.311a2.838 2.838 0 0 1-1.41 2.444l-3.608 2.103ZM23.955 25.137a2.839 2.839 0 0 1-2.874-.01l-3.596-2.126a2.84 2.84 0 0 1-1.394-2.453l.013-4.31a2.838 2.838 0 0 1 1.41-2.444l3.608-2.103a2.839 2.839 0 0 1 2.875.009l3.596 2.126a2.84 2.84 0 0 1 1.394 2.453l-.013 4.311a2.838 2.838 0 0 1-1.41 2.444l-3.609 2.103Z"
                                        fill="#E2E5EC"></path>
                                </svg></div>
                            <div class="review__quote review__quote--up"><svg width="30" height="26" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M17.578 20.923V26c7.16-.625 11.293-4.765 11.293-11.795v-9.7H17.578l1.792 6.665 3.817 3.27c0 4.14-1.476 6.092-5.61 6.483ZM2.332 20.923V26c7.517-.625 11.858-4.765 11.858-11.795v-9.7H2.332l1.882 6.665 4.008 3.27c0 4.14-1.55 6.092-5.89 6.483Z"
                                        fill="#E2E5EC"></path>
                                    <path
                                        d="M21.122.863a2.839 2.839 0 0 1 2.874.01l3.597 2.126a2.84 2.84 0 0 1 1.394 2.452l-.013 4.312a2.838 2.838 0 0 1-1.41 2.443l-3.609 2.103a2.84 2.84 0 0 1-2.874-.009l-3.596-2.126A2.84 2.84 0 0 1 16.09 9.72l.013-4.311a2.838 2.838 0 0 1 1.41-2.444L21.121.863ZM6.045.863a2.839 2.839 0 0 1 2.874.01l3.596 2.126a2.84 2.84 0 0 1 1.394 2.452l-.013 4.312a2.838 2.838 0 0 1-1.41 2.443L8.879 14.31a2.839 2.839 0 0 1-2.875-.009l-3.596-2.126A2.84 2.84 0 0 1 1.013 9.72l.013-4.311a2.838 2.838 0 0 1 1.41-2.444L6.045.863Z"
                                        fill="#E2E5EC"></path>
                                </svg></div>
                        </div>
                    </div>
                @endforeach

            </div>
            <div class="gap-y align-items-center text-center" style="margin-top:70px;" id="add-rev">
                <h3 style="font-weight:600;">{{__('Submit your review')}}</h3>
                <p style="font-weight:400; max-width:600px; color: #62676c; font-size:16px; margin:0 auto;">{{__('If you have made a purchase with us, the review will show up immediately on this page.')}}</p>
            </div>
            <div class="review-form" style="display:block; margin-top:30px;">
                    <form id="reviewForm" action="/submit-review" method="POST">

                        <div class="row">
                            <div class="alert alert-success review-sent text-center">{{__('Your review has been submitted.')}}</div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="prezdivka" class="form-label">{{__('Your Name')}}</label>
                                    <input type="text" placeholder="{{__('Your Name')}}" class="form-control" id="prezdivka"
                                        required>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">{{__('Your E-mail')}}</label>
                                    <input type="email" placeholder="your@gmail.com" class="form-control" id="email"
                                        required>
                                </div>
                                <div class="mb-3" style="display:flex; justify-content:left;">
                                    <div style="margin-top:12px; margin-right:10px; font-size:14px;">{{__('Your rating')}}</div>
                                    <div class="rating"><input type="radio" name="rating" value="5" id="5"
                                            required><label for="5">☆</label> <input type="radio" name="rating" value="4"
                                            id="4"><label for="4">☆</label> <input type="radio" name="rating" value="3"
                                            id="3"><label for="3">☆</label> <input type="radio" name="rating" value="2"
                                            id="2"><label for="2">☆</label> <input type="radio" name="rating" value="1"
                                            id="1"><label for="1">☆</label> </div>


                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="rate-text" class="form-label">{{__('Your review')}}</label>
                                    <textarea class="form-control" id="rate-text" style="height:150px;" rows="6"
                                        placeholder="{{__('Write some review...')}}" required></textarea>
                                </div>
                                <div class="mb-3" style="text-align:center;">
                                    <button type="submit" class="btn btn-primary send-review">{{__('Submit review')}}</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
        </div>

    </header>
    <x-footer-buy/>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {

            $("#reviewForm").on('submit', function(e) {
                e.preventDefault();
                $(".send-review").attr("disabled", "disabled");
                var name = $("#prezdivka").val();
                var email = $("#email").val();
                var rating = $("input[name=rating]:checked").val();
                var textarea = $("#rate-text").val();

                $.ajax({
                    url: "/submit-review",
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        name: name,
                        email: email,
                        rating: rating,
                        textarea: textarea,
                    },
                    success: function(response) {
                        $(".review-sent").show().delay(3000).fadeOut();
                        $(".send-review").removeAttr("disabled");
                        $("#prezdivka").val("");
                        $("#email").val("");
                        $("#rate-text").val("");
                    },
                });
            });
        });
    </script>
@endsection