@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <div class="offer-details">
                <div class="d-flex justify-content-between mb-3">
                    <h3 class="d-flex align-items-center mr-3">Offer Details</h3>
                    <div class="d-flex btn-container">
                        @auth
                            @if($offer->status === \App\Enum\OfferStatus::IN_PROGRESS->value && (isset($offer->price) || !is_null($offer->price)))
                                <form action="/offers/decline" class="d-inline-flex" method="POST">
                                    @csrf
                                    <input type="hidden" name="offer_id" value="{{ $offer->id }}">
                                    <br>
                                    <button type="submit" class="me-2 btn btn-danger">Decline Offer</button>
                                </form>
                            @endif

                            @if(Auth::user()->type === \App\Enum\UserType::ORGANIZER->value && $offer->status === \App\Enum\OfferStatus::IN_PROGRESS->value && (isset($offer->price) || !is_null($offer->price)))
                                <form action="/offers/accept" class="d-inline-flex" method="POST">
                                    @csrf
                                    <input type="hidden" name="offer_id" value="{{ $offer->id }}">
                                    <br>
                                    <button type="submit" class="btn btn-success">Accept Offer</button>
                                </form>
                            @endif
                        @endauth
                    </div>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th scope="col">Property</th>
                        <th scope="col">Value</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><strong>From Organizer</strong></td>
                        <td>{{ $offer->event->organizer->user->name }}</td>
                    </tr>
                    <tr>
                        <td><strong>To Artist</strong></td>
                        <td>{{ $offer->artist->user->name }}</td>
                    </tr>
                    <tr>
                        <td><strong>For Event</strong></td>
                        <td>
                            <a href="/events/{{ $offer->event->slug }}">
                                {{ $offer->event->title }}
                            </a>
                        <td>
                    </tr>
                    <tr>
                        <td><strong>Current Offer Status</strong></td>
                        @if($offer->status === \App\Enum\OfferStatus::IN_PROGRESS->value)
                            <td><p class="badge bg-warning">In Progress</p></td>
                        @elseif($offer->status === \App\Enum\OfferStatus::COMPLETED->value)
                            <td><p class="badge bg-success">Completed</p></td>
                        @elseif($offer->status === \App\Enum\OfferStatus::DECLINED->value)
                            <td><p class="badge bg-danger">Declined</p></td>
                        @elseif($offer->status === \App\Enum\OfferStatus::WAITING_FOR_PAYMENT->value)
                            <td><p class="badge bg-warning">Waiting for payment</p></td>
                        @endif
                    </tr>
                    <tr>
                        <td><strong>Current Offer Price (USD)</strong></td>
                        <td>@if($offer->price != null)
                                @currency($offer->price)
                            @else
                                Not yet defined
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Created At</strong></td>
                        <td>{{ $offer->created_at->isoFormat('dddd, DD-MMM-Y H:mm') }}</td>
                    </tr>
                    <tr>
                        <td><strong>Last Updated/Modified At</strong></td>
                        <td>
                            @if($offer->updated_at != null)
                                {{ $offer->updated_at->isoFormat('dddd, DD-MMM-Y H:mm') }}
                            @else
                                Never
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Completed At</strong></td>
                        <td>
                            @if($offer->completed_at != null)
                                {{ $offer->completed_at->isoFormat('dddd, DD-MMM-Y H:mm') }}
                            @else
                                Not yet completed
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Payment Type</strong></td>
                        <td>{{ $offer->payment_type }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        @auth
            @if(Auth::user()->type === \App\Enum\UserType::ORGANIZER->value)
                @if(!is_null($offer->price))
                    <div class="row">
                        <div class="col-lg-6">
                            <h3 class="mb-3 mt-5">Proposed price</h3>
                            <h4>@currency($offer->price)</h4>
                        </div>

                        @if($offer->status === \App\Enum\OfferStatus::WAITING_FOR_PAYMENT->value)
                            <div class="col-lg-6 stripe-payment">
                                <h3 class="mb-3 mt-5">Payment</h3>
                                <form method="POST" action="{{ route('payments.purchase', $offer->id) }}"
                                      class="card-form mt-3 mb-3">
                                    @csrf
                                    <input type="hidden" name="payment_method" class="payment-method">
                                    <input class="StripeElement mb-3" name="card_holder_name"
                                           placeholder="Card holder name"
                                           required>
                                    <div class="col-lg-4 col-md-6">
                                        <div id="card-element"></div>
                                    </div>
                                    <div id="card-errors" role="alert"></div>
                                    <div class="form-group mt-3">
                                        <button type="submit" class="btn btn-primary pay">
                                            Pay
                                        </button>
                                    </div>
                                </form>
                            </div>
                        @endif

                        @if($offer->status === \App\Enum\OfferStatus::COMPLETED->value)
                            @php
                                $invoice = Auth::user()->findInvoice($offer->transactions->get(0)->invoice_id);
                            @endphp
                            <div class="col-lg-6">
                                <h3 class="mb-3 mt-5">Invoice</h3>
                                <a href="/invoices/{{ $invoice->id }}">
                                    <button type="button" class="btn btn-primary">Download</button>
                                </a>
                            </div>
                        @endif
                    </div>
                @endif
            @endif

            @if(Auth::user()->type !== \App\Enum\UserType::ORGANIZER->value && $offer->status === \App\Enum\OfferStatus::IN_PROGRESS->value)
                <div class="row justify-content-center">
                    <h3 class="mb-3 mt-5">Propose new price</h3>
                    <form action="/offers/set-price" method="POST">
                        @csrf
                        <input type="hidden" name="offer_id" value="{{ $offer->id }}">

                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="price-input">USD $</span>
                            </div>
                            <input type="number" name="price" class="form-control"
                                   value="{{ $offer->price ?? '' }}" placeholder="Enter value"
                                   aria-label="Price" aria-describedby="price-input">
                        </div>
                        <br>
                        <button type="submit" class="btn btn-primary">Propose price</button>
                    </form>
                </div>
            @endif
        @endauth

        <div class="row justify-content-center">
            <div class="offer-discussion">
                <h3 class="mb-3 mt-5">Offer discussion</h3>
                <form action="/offers/reply" method="POST">
                    @csrf
                    <input type="hidden" name="offer_id" value="{{ $offer->id }}">
                    <textarea name="comment" id="" cols="30" rows="5" placeholder="Reply to thread..."
                              class="form-control mb-3 w-100"></textarea>
                    <button type="submit" class="btn btn-success">Reply to thread</button>
                </form>

                @if(count($offer->comments) > 0)
                    <table class="table mt-4">
                        <thead>
                        <tr>
                            <th><strong>Comment</strong></th>
                            <th><strong>Posted By</strong></th>
                            <th><strong>Role</strong></th>
                            <th><strong>Created At</strong></th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($offer->comments as $comment)
                            <tr>
                                <td>
                                    {{ $comment->content }}
                                </td>
                                <td>
                                    {{ $comment->author->name }}
                                </td>
                                <td>
                                    <span
                                        class="badge bg-success">as {{ ucfirst(strtolower($comment->author->type)) }}</span>
                                </td>
                                <td>
                                    {{ $comment->created_at->isoFormat('dddd, DD-MMM-Y H:mm') }}
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                @endif
            </div>
        </div>
    </div>

    @auth
        @if (Auth::user()->type === \App\Enum\UserType::ORGANIZER->value && $offer->status === \App\Enum\OfferStatus::WAITING_FOR_PAYMENT->value)
            <style>
                .StripeElement {
                    box-sizing: border-box;
                    height: 40px;
                    padding: 10px 12px;
                    width: 100%;
                    border: 1px solid transparent;
                    border-radius: 4px;
                    background-color: white;
                    box-shadow: 0 1px 3px 0 #e6ebf1;
                    -webkit-transition: box-shadow 150ms ease;
                    transition: box-shadow 150ms ease;
                }

                .StripeElement--focus {
                    box-shadow: 0 1px 3px 0 #cfd7df;
                }

                .StripeElement--invalid {
                    border-color: #fa755a;
                }

                .StripeElement--webkit-autofill {
                    background-color: #fefde5 !important;
                }

                .stripe-payment .col-lg-4.col-md-6 {
                    width: 100% !important;
                }
            </style>

            <script src="https://js.stripe.com/v3/"></script>
            <script>
                let stripe = Stripe("{{ env('STRIPE_KEY') }}")
                let elements = stripe.elements()
                let style = {
                    base: {
                        color: '#32325d',
                        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                        fontSmoothing: 'antialiased',
                        fontSize: '16px',
                        '::placeholder': {
                            color: '#aab7c4'
                        }
                    },
                    invalid: {
                        color: '#fa755a',
                        iconColor: '#fa755a'
                    }
                }
                let card = elements.create('card', {style: style})
                card.mount('#card-element')
                let paymentMethod = null
                $('.card-form').on('submit', function (e) {
                    $('button.pay').attr('disabled', true)
                    if (paymentMethod) {
                        return true
                    }
                    stripe.confirmCardSetup(
                        "{{ $intent->client_secret }}",
                        {
                            payment_method: {
                                card: card,
                                billing_details: {name: $('.card_holder_name').val()}
                            }
                        }
                    ).then(function (result) {
                        if (result.error) {
                            $('#card-errors').text(result.error.message)
                            $('button.pay').removeAttr('disabled')
                        } else {
                            paymentMethod = result.setupIntent.payment_method
                            $('.payment-method').val(paymentMethod)
                            $('.card-form').submit()
                        }
                    })
                    return false
                })
            </script>
        @endif
    @endauth
@endsection