@extends('front.layouts.app')
@push('title', __('Checkout'))
@section('content')
    <section class="py-2 bg-light">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 mb-1">
                    <div class="bg-white rounded-4 p-3 shadow-sm">
                        <div class="page-header">
                            <h2 class="page-title h4 mb-0 d-flex align-items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                    class="bi bi-credit-card-2-front" viewBox="0 0 16 16">
                                    <path
                                        d="M14 3a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h12zM2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2z" />
                                    <path
                                        d="M2 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1zm0 3a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5z" />
                                </svg>
                                {{ __('Checkout Form') }}
                                @guest
                                    <button class="btn btn-sm btn-outline-primary" type="button" data-bs-toggle="modal"
                                        data-bs-target="#loginModal">
                                        {{ __('Are you a member?') }}
                                    </button>
                                @endguest
                            </h2>
                            <small>
                                @auth {{ __('Welcome') }}: {{ Auth::user()->name }} @endauth
                            </small>
                        </div>
                    </div>
                </div>
            </div>

            <form id="form" class="form-inline-block" method="POST" action="{{ route('order.complete') }}">
                @csrf
                <input type="hidden" name="from_cart" value="1">
                <div class="row g-2">
                    <div class="col-lg-7">
                        <div class="card border-0 shadow-sm rounded-4 mb-2">
                            <div class="card-header m-1 text-center rounded-3 border-0">
                                <h5 class="card-title mb-0 ">
                                    {{ __('Billing Details') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row g-1">
                                    <div class="col-sm-6 mb-3">
                                        <label for="firstName" class="form-label">
                                            {{ __('Name') }}*
                                        </label>
                                        <input min="3" name="name" type="text" class="form-control" required
                                            autofocus
                                            @auth value="{{ Auth::user()->name }}" @else value="{{ old('name') }}" @endauth>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label for="lastName" class="form-label">{{ __('Surname') }}*</label>
                                        <input min="3" name="surname" type="text" class="form-control"
                                            @auth value="{{ Auth::user()->surname }}" @else value="{{ old('surname') }}" @endauth
                                            required>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label for="email" class="form-label">{{ __('E-Mail') }}* </label>
                                        <input min="3" name="email" type="email" class="form-control" required
                                            @auth value="{{ Auth::user()->email }}" @else value="{{ old('email') }}" @endauth>
                                    </div>
                                    <div class="col-sm-6 mb-3">
                                        <label for="phone" class="form-label">
                                            {{ __('Mobile Phone') }}*
                                        </label>
                                        <input type="tel" name="phone" class="form-control"
                                            @auth value="{{ Auth::user()->phone }}" @else value="{{ old('phone') }}" @endauth
                                            required>
                                    </div>
                                </div>
                                <div class="mb-1">
                                    <label>
                                        {{ __('Note') }} ({{ __('Optional') }})
                                    </label>
                                    <textarea name="note" maxlength="300" class="form-control" rows="3"
                                        placeholder="{{ Cache::get('checkout_message') }}"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="card border-0 shadow-sm rounded-4 mb-2">
                            <div class="card-header m-1 text-center rounded-3 border-0">
                                <h5 class="card-title mb-0 ">
                                    {{ __('Order Summary') }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="mb-3">
                                    @foreach($cart['items'] as $item)
                                    <div class="d-flex justify-content-between mb-2">
                                        <div class="flex-grow-1">
                                            <strong>{{ $item['qty'] }} x "{{ $item['name'] }}"</strong>
                                        </div>
                                        <small class="text-nowrap">
                                            {{ config('app.currency_symbol') }}{{ money($item['price'] * $item['qty']) }}
                                        </small>
                                    </div>
                                    @endforeach
                                </div>
                                <hr>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="mb-0">
                                        {{ __('Subtotal') }}:
                                    </small>
                                    <div class="d-flex align-items-center">
                                        <h6 class="mb-0">
                                            {{ config('app.currency_symbol') }}{{ money($cart['totals']['subtotal']) }}
                                        </h6>
                                    </div>
                                </div>
                                @if($cart['totals']['discount'] > 0)
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="mb-0">
                                        {{ __('Discount') }}:
                                    </small>
                                    <div class="d-flex align-items-center">
                                        <h6 class="mb-0 text-success">
                                            -{{ config('app.currency_symbol') }}{{ money($cart['totals']['discount']) }}
                                        </h6>
                                    </div>
                                </div>
                                @endif
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0 text-danger">
                                        {{ __('Total') }}:
                                    </h6>
                                    <div class="d-flex align-items-center">
                                        <h5 id="amount_paid_html" class="fw-bold text-danger mb-0">
                                            {{ config('app.currency_symbol') }}{{ money($cart['totals']['total']) }}
                                        </h5>
                                    </div>
                                </div>
                                <div class="col-lg-12 mt-3">
                                    <select class="form-select" name="payment_method" id="payment_method">
                                        @auth
                                            @if (Auth::user()->wallet >= $cart['totals']['total'])
                                                <option value="wallet">{{ __('Pay with wallet balance') }}</option>
                                            @endif
                                        @endauth
                                        @if (Cache::get('paytr_active') == 1)
                                            <option value="paytr">
                                                {{ Cache::get('paytr_name') }}
                                            </option>
                                        @endif
                                        @if (Cache::get('stripe_active') == 1)
                                            <option value="stripe">
                                                {{ Cache::get('stripe_name') }}
                                            </option>
                                        @endif
                                        @if (Cache::get('shopier_active') == 1)
                                            <option value="shopier">
                                                {{ Cache::get('shopier_name') }}
                                            </option>
                                        @endif
                                        @if (Cache::get('papara_active') == 1)
                                            <option value="papara">
                                                {{ Cache::get('papara_name') }}
                                            </option>
                                        @endif
                                        @if (Cache::get('iban_active') == 1)
                                            <option value="iban">
                                                {{ Cache::get('iban_name') }}
                                            </option>
                                        @endif
                                    </select>
                                </div>
                                <div class="text-break mt-2">
                                    {!! Cache::get('agree_message') !!}
                                </div>
                                @if (Cache::get('google_recaptcha_sitekey') && Cache::get('google_recaptcha_secretkey'))
                                    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
                                    <script src="https://www.google.com/recaptcha/api.js?render={{ Cache::get('google_recaptcha_sitekey') }}"></script>
                                    <script>
                                        grecaptcha.ready(function() {
                                            grecaptcha.execute('{{ Cache::get('google_recaptcha_sitekey') }}', {
                                                action: 'contact'
                                            }).then(function(token) {
                                                document.getElementById('g-recaptcha-response').value = token;
                                            });
                                        });
                                    </script>
                                @endif
                                <div class="d-grid mt-3">
                                    <button type="submit" class="btn btn-danger">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-credit-card-fill mb-1" viewBox="0 0 16 16">
                                            <path
                                                d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v1H0V4zm0 3v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7H0zm3 2h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1z" />
                                        </svg>
                                        {{ __('Pay Securely') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection