@extends('frontend.layouts.app')

@section('content')
    <style type="text/css">
        .page-header {
            position: relative;
            display: flex;
            align-items: center;
            background-color: wheat;
            background-position: 0 0;
            background-size: 100%;
            min-height: 120px;
            padding: 0
        }

        .head-text {
            margin: 0;
            font-size: 30px
        }
    </style>

    <div class="section-block enq_form pt-4 bg-light">
        <div class="container">
            @if(session()->has('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>Thank You ! </strong> {{ session('success') }}
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            @endif
            <div class="card mb-3">
                <div class="row no-gutters">
                    <div class="col-md-3">
                        <a href="{{ route('product', $product->slug) }}"><img src="{{ Storage::disk('s3')->url($product->thumbnail_img) }}" alt="..."
                                                                              height="450"
                                                                              width="350"></a>
                    </div>
                    <div class="col-md-9">
                        <div class="card-header text-info" style="padding: .75rem 1.25rem !important;">
                            For the product : <a href="{{ route('product', $product->slug) }}">{{  strtoupper($product->name) }}</a>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <form action="{{ route('frontend.review.store', $product) }}" method="post"
                                          enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <label for="name">Product Rating *</label>
                                                <div class="form-field">
                                                    <select id="glsr-ltr" class="star-rating">
                                                        <option value="">Select a rating</option>
                                                        <option value="5">Fantastic</option>
                                                        <option value="4">Great</option>
                                                        <option value="3">Good</option>
                                                        <option value="2">Poor</option>
                                                        <option value="1">Terrible</option>
                                                    </select>
                                                    <input type="hidden" id="rating-value" name="rating">
                                                </div>
                                                @error('rating')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-md-6 mb-3">
                                                <label for="display_name">Enter Name *</label>
                                                <input type="text" placeholder="What should we call you?"
                                                       class="form-control @error('display_name') is-invalid @enderror"
                                                       name="display_name" id="display_name"
                                                       value="{{ old('display_name') }}"/>
                                                @error('display_name')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                            <div class="col-md-6 mb-3">
                                                <label for="heading">Add Heading</label>
                                                <input type="text" placeholder="Enter main heading?"
                                                       class="form-control @error('heading') is-invalid @enderror"
                                                       name="heading" id="heading"
                                                       value="{{ old('heading') }}"/>
                                                @error('heading')
                                                <small class="form-text text-danger">{{ $message }}</small>
                                                @enderror
                                            </div>
                                        </div>
                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <label class="label" for="comment">Write a review</label>
                                                <textarea name="comment"
                                                          class="form-control @error('comment') is-invalid @enderror"
                                                          id="comment"
                                                          placeholder="What did you like/dislike about your product?"></textarea>
                                                @error('comment') <small
                                                    class="form-text text-danger">{{ $message }}</small>@enderror

                                            </div>
                                        </div>

                                        <div class="form-row">
                                            <div class="col-md-12 mb-3">
                                                <label class="label">Add a photo or video</label>
                                                <input type="file" class="form-control" name="photos[]" multiple>
                                                @error('photos.*') <small
                                                    class="form-text text-danger">{{ $message }}</small>@enderror
                                            </div>
                                        </div>


                                        <button class="btn btn-base-1 pull-right" type="submit">Submit form</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{--
            <div class="card  mb-3">
                <div class="card-header text-info" style="padding: .75rem 1.25rem !important;">
                    {{ 'For the product : ' . $product->name }}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-12">
                            <form action="{{ route('frontend.review.store', $product) }}" method="post"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <label for="name">Product Rating *</label>
                                        <div class="form-field">
                                            <select id="glsr-ltr" class="star-rating">
                                                <option value="">Select a rating</option>
                                                <option value="5">Fantastic</option>
                                                <option value="4">Great</option>
                                                <option value="3">Good</option>
                                                <option value="2">Poor</option>
                                                <option value="1">Terrible</option>
                                            </select>
                                            <input type="hidden" id="rating-value" name="rating">
                                        </div>
                                        @error('rating')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label for="display_name">Enter Name *</label>
                                        <input type="text" placeholder="What should we call you?"
                                               class="form-control @error('display_name') is-invalid @enderror"
                                               name="display_name" id="display_name" value="{{ old('display_name') }}"/>
                                        @error('display_name')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="heading">Add Heading *</label>
                                        <input type="text" placeholder="Enter main heading?"
                                               class="form-control @error('heading') is-invalid @enderror" name="heading" id="heading"
                                               value="{{ old('heading') }}"/>
                                        @error('heading')
                                        <small class="form-text text-danger">{{ $message }}</small>
                                        @enderror
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <label class="label" for="comment">Write a review</label>
                                        <textarea name="comment"
                                                  class="form-control @error('comment') is-invalid @enderror"
                                                  id="comment"
                                                  placeholder="What did you like/dislike about your product?"></textarea>
                                        @error('comment') <small
                                            class="form-text text-danger">{{ $message }}</small>@enderror

                                    </div>
                                </div>

                                <div class="form-row">
                                    <div class="col-md-12 mb-3">
                                        <label class="label">Add a photo or video</label>
                                        <input type="file" class="form-control" name="photos[]" multiple>
                                        @error('photos.*') <small
                                            class="form-text text-danger">{{ $message }}</small>@enderror
                                    </div>
                                </div>


                                <button class="btn btn-base-1 pull-right" type="submit">Submit form</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            --}}
        </div>
    </div>

@endsection
@push('css')
    <link type="text/css" href="{{ asset('frontend/rating/star-rating.min.css') }}" rel="stylesheet" media="all">
@endpush
@section('script')
    <script src="{{ asset('js/bs-custom-file-input.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            bsCustomFileInput.init()
        })
    </script>

    <script src="{{ asset('frontend/rating/star-rating.min.js') }}"></script>

    <script type="text/javascript">
        // rating
        const starRating = new StarRating('.star-rating', {
            stars: function (el, item, index) {
                el.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <polygon fill="#ccc" width="35" height="35" points="12 5.375 13.646 10.417 19 10.417 14.665 13.556 16.313 18.625 11.995 15.476 7.688 18.583 9.333 13.542 5 10.417 10.354 10.417"/></svg>';
            },
        });

        $('.gl-star-rating--stars span').click(function () {
            $('#rating-value').val($(this).parent().find('span.gl-active').length)
        })
    </script>
@endsection