@extends('layouts.app')

@section('content')

<div class="text-center mt-4 font-size-big fw-bold">
  {{-- {!! __('user.payment.pay.title') !!} --}}
</div>

<div class="yellow-box yellow-box-medium">
    <div class="container yellow-box-container mt-4 mb-5">
        <div class="row">
            <div class="col d-none d-lg-block m-0 p-0">
              <div class="yellow-box-img d-flex px-5 mx-4">
                    <div class="align-self-center">
                        @include('video.layout.howto')
                    </div>                    
                </div>
            </div>
            <div class="col m-0 p-0">

                <div class="container card m-0 p-4 px-5 h-100" style="border-start-start-radius: 0px; border-bottom-left-radius: 0px;">
                    <div class="row justify-content-center">
                        <div class="col-md-12">

                            <div class="mb-3">
                                <div class="text-center mt-2 mb-4 font-size-h1 text-uppercase fw-bold">{!! __('user.payment.pay.title') !!}</div>

                                @if(Session::has('success_profileUpdate_message'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {!! Session::get('success_profileUpdate_message') !!}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif
                                @if(Session::has('error_profileUpdate_message'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    {!! Session::get('error_profileUpdate_message') !!}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                                @endif

                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.registration.videoName') !!}</div> 
                                  <div class="fw-bold">{!! $video->name !!}</div>
                                </div>
                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.registration.videoUrl') !!}</div> 
                                  <div class="fw-bold"><a href="https://{!! $video->url !!}" target="_blank">{!! $video->url !!}</a></div>
                                </div>
                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.registration.videoCategory') !!}</div>
                                  <div><div class="video-category category_2 d-inline-block">{!! __($video->category->name) !!}</div></div>
                                </div>
                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.competitionCycle') !!}</div>
                                  <div class="fw-bold">{!! $competition->start_date !!} - {!! $competition->end_date !!}</div>
                                </div>
                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.registration.fee') !!}</div> 
                                  <div class="fw-bold">{!! $amount !!} {!! $currency !!}</div>
                                </div>
                                <div class="mb-3">
                                  <div class="font-size-h2 text-uppercase mb-2 fw-bold">{!! __('content.payment.paymentMethod') !!}</div>
                                  <div>
                                    <div class="btn-group" data-toggle="buttons">
                                      <label class="active">
                                          <input type="radio" name="pay_type" id="pay_type1" value="" autocomplete="off" onclick="$('.paypal-btn').addClass('d-none');$('.stripe-btn').removeClass('d-none');" checked> {!! __('content.payment.paymentMethod.cardButton') !!}
                                      </label>
                                      <label class="ms-4">
                                          <input type="radio" name="pay_type" id="pay_type2" value="" autocomplete="off" onclick="$('.paypal-btn').removeClass('d-none');$('.stripe-btn').addClass('d-none');"> {!! __('content.payment.paymentMethod.paypalButton') !!}
                                      </label>
                                    </div>

                                  </div>
                                </div>

                                <div class="form-group m-0 p-0">
                                  <label class="d-block font-size-h2 text-uppercase mb-2 fw-bold" >{!! __('form.video.statement.title') !!}</label>
                                  <div class="form-check d-inline-block me-4">
                                      <input type="checkbox" class="form-check-input" id="terms" name="agreements[terms]" onclick="statement()" required>
                                      <label class="form-check-label font-size-small" for="terms">{!! __('form.video.terms',['terms_url_start'=>'<a href="'.route('terms', app()->getLocale()).'" target="_blank">', 'terms_url_end'=>'</a>', 'gdpr_url_start'=>'<a href="'.route('gdpr', app()->getLocale()).'" target="_blank">', 'gdpr_url_end'=>'</a>']) !!}</label>
                                  </div>
                                  <div class="form-check d-inline-block me-4">
                                      <input type="checkbox" class="form-check-input" id="owner" name="agreements[owner]" onclick="statement()" required>
                                      <label class="form-check-label font-size-small" for="owner">{!! __('form.video.owner') !!}</label>
                                  </div>
                                  <div class="form-check d-inline-block me-4">
                                      <input type="checkbox" class="form-check-input" id="rule" name="agreements[rule]" onclick="statement()" required>
                                      <label class="form-check-label font-size-small" for="rule">{!! __('form.video.rule', ['url_start'=>'<a href="'.route('rules', app()->getLocale()).'" target="_blank">', 'url_end'=>'</a>']) !!}</label>
                                  </div>
                                  <div class="form-check d-inline-block me-4">
                                      <input type="checkbox" class="form-check-input" id="promotion" name="agreements[promotion]" onclick="statement()" required>
                                      <label class="form-check-label font-size-small" for="promotion">{!! __('form.video.promotion') !!}</label>
                                  </div>
                                </div>

                                <div class="row">
                                  <div class="col-12 col-sm-4 mt-3">
                                    <button onclick="window.location='{{ route('user.registration.edit', ['locale' => app()->getLocale(), 'id' => $registration->id]) }}'" class="w-100 btn btn-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrow-left-short" viewBox="0 0 16 16">
                                      <path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5z"/>
                                    </svg></button>
                                  </div>
              
                                  <div class="col-12 col-sm-8 payment-btn-group d-flex justify-content-center mt-3">
                                    {{-- <button class="btn btn-primary" id="payButton">{!! __('button.pay') !!}</button> --}}
                                      <form class="stripe-btn w-100" action="{{ route('user.payment.create', ['locale' => app()->getLocale(), 'id' => $video->id]) }}" method="POST">
                                        @csrf
                                        <button type="submit" id="checkout-button" class="btn btn-primary w-100 d-flex justify-content-center text-capitalize" disabled>{{--<img src="{{ asset('/images/stripe_logo.png') }}" height="16" style="filter: brightness(0) invert(1); margin-right: 5px;" class="mt-1">--}} {!! __('button.pay') !!}</button>
                                      </form>
                                      {{-- PayPal fizetés --}}
                                      <button type="button" id="checkout-button" onclick="window.location='{{ route('user.payment.create_paypal', ['locale' => app()->getLocale(), 'id' => $video->id]) }}'" class="paypal-btn btn btn-primary w-100 d-none" style="" disabled>
                                        {{-- <svg style="margin-right: 5px;" xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" class="bi bi-paypal text-capitalize" viewBox="0 0 16 16">
                                          <path d="M14.06 3.713c.12-1.071-.093-1.832-.702-2.526C12.628.356 11.312 0 9.626 0H4.734a.7.7 0 0 0-.691.59L2.005 13.509a.42.42 0 0 0 .415.486h2.756l-.202 1.28a.628.628 0 0 0 .62.726H8.14c.429 0 .793-.31.862-.731l.025-.13.48-3.043.03-.164.001-.007a.351.351 0 0 1 .348-.297h.38c1.266 0 2.425-.256 3.345-.91.379-.27.712-.603.993-1.005a4.942 4.942 0 0 0 .88-2.195c.242-1.246.13-2.356-.57-3.154a2.687 2.687 0 0 0-.76-.59l-.094-.061ZM6.543 8.82a.695.695 0 0 1 .321-.079H8.3c2.82 0 5.027-1.144 5.672-4.456l.003-.016c.217.124.4.27.548.438.546.623.679 1.535.45 2.71-.272 1.397-.866 2.307-1.663 2.874-.802.57-1.842.815-3.043.815h-.38a.873.873 0 0 0-.863.734l-.03.164-.48 3.043-.024.13-.001.004a.352.352 0 0 1-.348.296H5.595a.106.106 0 0 1-.105-.123l.208-1.32.845-5.214Z"/>
                                        </svg> --}}
                                      {!! __('button.pay') !!}</button>
                                  </div>
                                </div>
                            </div>

                            


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

            </div>
        </div>
    </div>
</div>
@push('scripts')
{{-- Stripe --}}
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src="https://js.stripe.com/v3/"></script>
<script>
  $(document).ready( function () {
      window.statement = function() {
          if($('#terms').prop('checked') && $('#owner').prop('checked') && $('#rule').prop('checked') && $('#promotion').prop('checked'))
              $('.payment-btn-group button').attr('disabled', false)
          else 
              $('.payment-btn-group button').attr('disabled', true)
      }
  });
  </script>
@endpush
@endsection