@extends('shop.main')

@section('header')
    @include('shop.components.header')
@endsection

@section('main')
    <div class="payment-modal hidden">

        <div class="container">

            <div class="card-container">

                <div class="front">
                    <div class="image">
                        <img src="{{ asset('shop/images/card/chip.png') }}" alt="">
                        <img src="{{ asset('shop/images/card/visa.png') }}" alt="">
                    </div>
                    <div class="card-number-box">################</div>
                    <div class="flexbox">
                        <div class="box">
                            <span>Nome do titular</span>
                            <div class="card-holder-name">Nome Completo</div>
                        </div>
                        <div class="box">
                            <span>Data de Validade</span>
                            <div class="expiration">
                                <span class="exp-month">MM /</span>
                                <span class="exp-year">AAAA</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="back">
                    <div class="stripe"></div>
                    <div class="box">
                        <span>cvv</span>
                        <div class="cvv-box"></div>
                        <img src="{{ asset('shop/images/card/visa.png') }}" alt="">
                    </div>
                </div>

            </div>

            <form action="">
                <div class="form-payment-body">
                    <div class="inputBox">
                        <span>Número do Cartão</span>
                        <input value="5362682003164890" type="text" maxlength="16" class="card-number-input" name="card_number">
                    </div>
                    <div class="inputBox">
                        <span>Nome do titular</span>
                        <input value="Alison Bucker" type="text" class="card-holder-input" name="card_holder">
                    </div>
                    <div class="flexbox">
                        <div class="inputBox">
                            <span>Mês</span>
                            <select name="card_month" id="" class="month-input">
                                <option value="month" selected disabled>Mês de expiração</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12" selected>12</option>
                            </select>
                        </div>
                        <div class="inputBox">
                            <span>Ano de expiração</span>
                            <select name="card_year" id="" class="year-input">
                                <option value="year" selected disabled>Ano de expiração</option>
                                @for ($i = date('Y'); $i < date('Y')+15; $i++)
                                    <option value="{{ $i }}" >{{ $i }}</option>
                                @endfor
                            </select>
                        </div>
                        <div class="inputBox">
                            <span>cvv</span>
                            <input value="380" type="text" maxlength="4" name="card_cvv" class="cvv-input">
                        </div>
                    </div>
                    <div class="inputBox">
                        <span>Parcelas</span>
                        <select name="installments" id="">
                            @for ($i = 1; $i <= 12; $i++)
                                <option value="{{ $i }}">{{$i}}x de {{formatMoney($orderResum->value_total/$i, true)}} </option>
                            @endfor
                        </select>
                    </div>
                </div>
                <input type="submit" value="Pagar" class="submit-btn" id="btn-pay">
                <div style="text-align: center; padding: 10px;">
                    <a href="#" id="close-modal" style="text-decoration: none; color: #000;">Fechar</a>
                </div>
            </form>

        </div>
    </div>
    <div class="cont">
        <div class="main">
            <h1 class="title-area">Como deseja pagar?</h1>

            <section class="form-area">
                <h2 class="title-section">Qual forma de pagamento você prefere?</h2>

                <div class="payment-methods">
                    <div class="payment-method-item" id="pay_pix">
                        <div class="payment-icon">
                            <img src="{{ asset('shop/images/payments/pix.png') }}" alt="">
                        </div>
                        <span class="payment-method-name">PIX</span>
                    </div>
                    <div class="payment-method-item" id="pay_cc">
                        <div class="payment-icon">
                            <img src="{{ asset('shop/images/payments/credit-card.png') }}" alt="">
                        </div>
                        <span class="payment-method-name">Crédito</span>
                    </div>
                    <div class="payment-method-item">
                        <a class="payment-method-name" href="{{ route('payment.billet', $orderResum->id) }}">
                            <div class="payment-icon">
                                <img src="{{ asset('shop/images/payments/billet.png') }}" id="billet" alt="">
                            </div>
                        </a>
                        <span class="payment-method-name">Boleto</span>
                    </div>
                </div>
            </section>
        </div>
        <div class="secondary">
            @include('shop.components.confirm-order-pay')
        </div>
    </div>
    @csrf
    <input type="hidden" value="{{ $orderResum->id }}" id="ord-id">

    <div class="pix-modal-cover hidden">
        <div class="btn-close" id="close-pix">
            <i class="fas fa-times"></i>
        </div>
        <div class="pix-modal">
            <div class="pix-modal-header">
                <h3>Pagar com PIX</h3>

            </div>
            <div class="pix-modal-content">
                <img src="{{ asset('shop/images/pix/40c06ef5-069a-4639-adff-bfe6f1a0d383.jpg') }}" width="300px" alt="">
                <p class="pix-key">
                    40c06ef5-069a-4639-adff-bfe6f1a0d383
                </p>
                <p>Escaneie esse qr code com o app do seu banco ou utilize a chave acima, para realizar o pagamento via PIX!</p>
                <p>Logo após envie o comprovante do seu pagamento no campo abaixo:</p>
                <div class="total-value">Total: <span>{{ formatMoney($orderResum->value_total, true) }}</span></div>
            </div>
            <div class="pix-modal-footer">
                <form enctype="multipart/form-data" action="{{ route('payment.send.receipt', $orderResum->id) }}" method="POST">
                    <div class="form-row">
                        <label for="comprov">Enviar comprovante</label>
                        <div class="form-button">
                            <input type="file" name="receipt" required>
                            <input id="form-submit" type="submit" value="Enviar comprovante">
                        </div>
                    </div>
                    @csrf

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

@endsection

@section('footer')
    @include('shop.components.footer')
@endsection
@push('css')

    <link rel="stylesheet" href="{{ asset('shop/css/shop-main.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/finish-order.css') }}">
    <link rel="stylesheet" href="{{ asset('shop/css/payments.css') }}">
@endpush
@push('js')
    <script type="text/javascript" src="https://www.boletobancario.com/boletofacil/wro/direct-checkout.min.js"></script>
    <script src="{{ asset('shop/js/payments.js') }}"></script>
    <script>
        payments.init()
    </script>
@endpush