@extends('layouts.app')

@section('title', $product->name)

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>{{ $product->name }}</h2>
                    {{-- <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li><a href="{{ route('shop.index') }}">Shop</a></li>
                        <li>{{ $product->name }}</li>
                    </ol> --}}
                </div>
            </div>
        </section>

        <section id="blog" class="blog">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 entries">
                        <article class="entry entry-single">
                            <div class="entry-img">
                                <img src="{{ $product->getPhotoUrl() }}" alt="{{ $product->title }}" class="img-fluid" />
                            </div>
                            <h2 class="entry-title">
                                <a href="#">{{ $product->name }}</a>
                            </h2>
                            <div class="entry-meta">
                                <ul>
                                    <li class="d-flex align-items-center">
                                        <i class="bi bi-currency-dollar"></i>Suggested Amount: ${{ number_format(($product->price / 100), 2, '.', ',') }}
                                    </li>
                                </ul>
                            </div>
                            <div class="entry-content">
                                {!! $product->description !!}
                            </div>
                        </article>
                        <div class="blog-comments">
                            <div class="reply-form">
                                @include('partials.validation-errors', ['displayErrors' => true])
                                <form name="donateForm" id="donateForm" action="{{ route('shop.purchase') }}" method="post" role="form" class="php-email-form">
                                    @csrf
                                    <input type="hidden" name="product_id" value="{{ $product->id }}" />
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="amount">Suggested Amount</label>
                                            @php $productPrice = ($product->price / 100);
                                            $price = number_format((float)$productPrice, 2, '.', '');
                                            $explodedPrice = explode('.', $price);
                                            @endphp
                                            <div class="input-group">
                                                <span class="input-group-text rounded-0">$</span>
                                                <input type="text" name="amount_dollars" value="{{ old('amount_dollars', $explodedPrice[0]) }}" class="form-control @error('amount_dollars') is-invalid @enderror">
                                                <span class="input-group-text">.</span>
                                                <input type="text" name="amount_cents" value="{{ old('amount_cents', $explodedPrice[1]) }}" class="form-control rounded-0 @error('amount_cents') is-invalid @enderror">
                                            </div>
                                            @error('amount_dollars') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                            @error('amount_cents') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="col-md-6"></div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="first_name">First Name</label>
                                            <input type="text"
                                                name="first_name"
                                                class="form-control rounded-0 @error('first_name') is-invalid @enderror"
                                                id="first_name"
                                                value="{{ old('first_name', $user->first_name) }}"
                                                required
                                            />
                                            @error('first_name') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="col-md-6">
                                            <label for="last_name">Last Name</label>
                                            <input type="text"
                                                name="last_name"
                                                class="form-control rounded-0 @error('last_name') is-invalid @enderror"
                                                id="last_name"
                                                value="{{ old('last_name', $user->last_name) }}"
                                                required
                                            />
                                            @error('last_name') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <div class="col-md-6">
                                            <label for="email">Email Address</label>
                                            <input type="text"
                                                name="email"
                                                class="form-control rounded-0 @error('email') is-invalid @enderror"
                                                id="email"
                                                value="{{ old('email', $user->email) }}"
                                                required
                                            />
                                            @error('email') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                        </div>
                                        <div class="col-md-6">
                                            <label for="card-element">Card Information</label>
                                            <input type="hidden" name="stripe_token" id="stripe-token-id">
                                            <div id="card-element" class="form-control rounded-0" style="height:43px;"></div>
                                        </div>
                                    </div>
                                    <div class="text-center mt-3">
                                        <button type="submit" id="pay-btn" class="btn btn-primary rounded-0" onclick="createToken()">Make Purchase</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="sidebar">
                            <h3 class="sidebar-title">Other Products</h3>
                            <div class="sidebar-item recent-posts">
                                @foreach($otherProducts as $otherProduct)
                                    <div class="post-item clearfix">
                                        <img src="{{ $otherProduct->getThumbnailUrl() }}" alt="{{ $otherProduct->name }}" />
                                        <h4>
                                            <a href="{{ route('shop.show', $otherProduct->slug) }}">
                                                {{ $otherProduct->name }}
                                            </a>
                                        </h4>
                                        {{-- <time datetime="{{ ($recentBlog->published_at) ? $recentBlog->published_at->format('Y-m-d') : 'N/A' }}">
                                            {{ ($recentBlog->published_at) ? $recentBlog->startspublished_at_at->format('m/d/y g:ia') : 'N/A' }}
                                        </time> --}}
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection


@push('scripts')
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        $(document).ready(function() {
            let dollars = $('input[name="amount_dollars"]').val();
            let cents = $('input[name="amount_cents"]').val();
            if (dollars == '0' && cents == '00') {
                $('#card-element').hide();
            } else {
                $('#card-element').show();
            }
        });

        let stripe = Stripe('{{ config('services.stripe.key') }}')
        let elements = stripe.elements();
        let cardElement = elements.create('card');
        cardElement.mount('#card-element');

        // On blur if both things are zero then hide crad element
        $(document).on('blur', 'input[name="amount_dollars"]', function() {
            let dollars = $('input[name="amount_dollars"]').val();
            let cents = $('input[name="amount_cents"]').val();
            if (dollars == '0' && cents == '00') {
                $('#card-element').hide();
            } else {
                $('#card-element').show();
            }
        });
        $(document).on('blur', 'input[name="amount_cents"]', function() {
            let dollars = $('input[name="amount_dollars"]').val();
            let cents = $('input[name="amount_cents"]').val();
            if (dollars == '0' && cents == '00') {
                $('#card-element').hide();
            } else {
                $('#card-element').show();
            }
        });

        function createToken() {
            let dollars = $('input[name="amount_dollars"]').val();
            let cents = $('input[name="amount_cents"]').val();
            if (dollars == '0' && cents == '00') {
                document.getElementById('donateForm').submit();
                return;
            }
            document.getElementById('pay-btn').disabled = true;
            stripe.createToken(cardElement).then(function(result) {
                if (typeof result.error != 'undefined') {
                    document.getElementById('pay-btn').disabled = false;
                    alert(result.error.message);
                }
                if (typeof result.token != 'undefined') {
                    document.getElementById('stripe-token-id').value = result.token.id;
                    document.getElementById('donateForm').submit();
                }
            });
        }
    </script>
@endpush