@extends('layouts.site')

@section('content')

<style>
    .payment-viewport {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 150px !important;    /* Üstten Header mesafesi */
        padding-bottom: 150px !important; /* Alttan Footer mesafesi */
        background-color: #f8f9fa;        /* Hafif gri arka plan (opsiyonel) */
        width: 100%;
    }
    .payment-card {
        width: 100%;
        max-width: 440px;
        background: #ffffff;
        border-radius: 1.25rem;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border: 1px solid #e5e7eb;
        overflow: hidden;
        position: relative;
    }
    .paytr-input {
        width: 100%;
        padding: 0.875rem 1.25rem;
        background-color: #ffffff;
        border: 1px solid #d1d5db;
        border-radius: 0.75rem;
        font-size: 0.9375rem;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        outline: none;
    }
    .paytr-input:focus {
        border-color: #dc2626; /* Trunçgil Red */
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }
    .error-text {
        color: #dc2626;
        font-size: 0.75rem;
        margin-top: 0.25rem;
        font-weight: 500;
    }
    .tab-active {
        color: #dc2626;
        border-bottom: 3px solid #dc2626;
        font-weight: 700;
    }
    .btn-submit {
        background-color: #dc2626;
        color: #ffffff;
        font-weight: 700;
        padding: 1rem;
        border-radius: 0.75rem;
        width: 100%;
        transition: all 0.2s;
        box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
    }
    .btn-submit:hover {
        background-color: #b91c1c;
        transform: translateY(-1px);
    }
    .btn-submit:active {
        transform: translateY(0);
    }

    /* Custom Round Blue Checkbox */
    .custom-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #d1d5db;
        border-radius: 50% !important;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
        background-color: #fff;
        position: relative;
        flex-shrink: 0;
    }
    .custom-checkbox:checked {
        background-color: #2563eb !important;
        border-color: #2563eb !important;
    }
    .custom-checkbox:checked::after {
        content: '\2713';
        color: white;
        font-size: 14px;
        font-weight: bold;
    }
    .custom-checkbox:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    }

    /* Support for internal PayTR Scroll */
    #paytriframe {
        min-height: 500px;
    }
</style>

<div class="payment-viewport">
    <div class="payment-card">
        
        @if(isset($paytr_token))
            <div class="p-4">
                <script src="https://www.paytr.com/js/iframeResizer.min.js"></script>
                <iframe src="https://www.paytr.com/odeme/guvenli/{!! $paytr_token !!}" id="paytriframe" frameborder="0" scrolling="no" style="width: 100%;"></iframe>
                <script>iFrameResize({log:false},'#paytriframe');</script>
            </div>
        @else
            <!-- Header Section -->
            <div class="flex justify-between items-center px-6 pt-6">
                <div class="flex gap-4 border-b border-gray-100 flex-1">
                    <div class="pb-3 text-sm tab-active cursor-default whitespace-nowrap">
                        {!! t('Kart ile Ödeme') !!}
                    </div>
                    <a href="{{ url('banka-bilgilerimiz') }}" class="pb-3 text-sm text-gray-400 hover:text-gray-600 font-medium whitespace-nowrap transition-colors">
                        {!! t('Havale / EFT (IBAN)') !!}
                    </a>
                </div>
            </div>

            <!-- Global Errors -->
            @if(session('error') || $errors->any())
                <div class="mx-6 mt-4 p-3 bg-red-50 border border-red-100 rounded-lg text-red-700 text-xs">
                    @if(session('error')) {{ session('error') }} @else {!! t('Lütfen formdaki eksikleri tamamlayın.') !!} @endif
                </div>
            @endif

            <div class="px-6 py-5">
                <form action="{{ route('payment.process') }}" method="POST" id="paymentForm" class="space-y-4">
                    @csrf
                    <input type="hidden" name="payment_type" value="online">
                    <input type="hidden" name="surname" value="Kullanıcı">

                    <!-- Inputs -->
                    <div class="flex flex-col gap-6 pb-2">
                        <div>
                            <input type="text" name="name" class="paytr-input @error('name') border-red-500 @enderror" 
                                placeholder="{!! t('Kart Üzerindeki Ad Soyad') !!}" value="{{ old('name') }}" required>
                            @error('name') <div class="error-text px-1">{{ $message }}</div> @enderror
                        </div>

                        <div>
                            <input type="email" name="email" class="paytr-input @error('email') border-red-500 @enderror" 
                                placeholder="{!! t('E-Posta Adresi') !!}" value="{{ old('email') }}" required>
                            @error('email') <div class="error-text px-1">{{ $message }}</div> @enderror
                        </div>

                        <div>
                            <input type="tel" name="phone" class="paytr-input @error('phone') border-red-500 @enderror" 
                                placeholder="{!! t('Telefon Numarası') !!}" value="{{ old('phone') }}" required>
                            @error('phone') <div class="error-text px-1">{{ $message }}</div> @enderror
                        </div>

                        <div>
                            <textarea name="address" class="paytr-input @error('address') border-red-500 @enderror" 
                                placeholder="{!! t('Adres Bilgisi') !!}" rows="3" required>{{ old('address') }}</textarea>
                            @error('address') <div class="error-text px-1">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Agreement Compact -->
                    <div class="flex items-center gap-3 pt-4">
                        <input id="agreement" name="agreement" type="checkbox" value="1" 
                            class="custom-checkbox" 
                            {{ old('agreement') ? 'checked' : '' }} required>
                        <label for="agreement" class="text-[12px] text-gray-700 leading-tight cursor-pointer font-medium select-none">
                            <span class="text-red-600 font-bold hover:underline" onclick="event.preventDefault(); document.getElementById('agreementModal').classList.remove('hidden');">
                                {!! t('Mesafeli Satış Sözleşmesi') !!}</span>{!! t("'ni okudum, onaylıyorum.") !!}
                        </label>
                    </div>
                </form>
            </div>

            <!-- Footer Action -->
            <div class="bg-gray-50/50 p-6 border-t border-gray-100">
                <div class="flex items-center justify-between mb-4 px-1">
                    <span class="text-xs font-bold text-gray-400 uppercase tracking-widest">{!! t('Toplam') !!}</span>
                    <div class="flex items-baseline gap-1">
                        <input type="number" step="0.01" min="1" name="price" form="paymentForm"
                            class="text-right w-20 text-xl font-bold text-gray-900 bg-transparent border-none p-0 focus:ring-0 outline-none" 
                            value="{{ old('price', '0.00') }}" required>
                        <span class="text-sm font-bold text-gray-900 underline decoration-red-500 decoration-2 underline-offset-4">TL</span>
                    </div>
                </div>
                
                <button type="submit" form="paymentForm" class="btn-submit">
                    {!! t('Ödeme Yap') !!}
                </button>
            </div>
        @endif

    </div>
</div>

<!-- Agreement Modal -->
<div id="agreementModal" class="fixed inset-0 hidden" style="z-index: 99999;" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="absolute inset-0 bg-black/75 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="document.getElementById('agreementModal').classList.add('hidden')"></div>
    <div class="absolute inset-0 overflow-y-auto">
        <div class="flex min-h-full items-start justify-center p-4 text-center pt-24 sm:pt-32">
            <div class="relative w-full max-w-xl transform overflow-hidden rounded-2xl bg-white text-left shadow-2xl transition-all mb-10">
                <!-- Header -->
                <div class="flex items-center justify-between border-b border-gray-100 bg-gray-50 px-6 py-4">
                    <h3 class="text-lg font-bold leading-6 text-gray-900" id="modal-title">
                        {!! t('Mesafeli Satış Sözleşmesi') !!}
                    </h3>
                    <button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')" class="rounded-full p-1 text-gray-400 hover:bg-gray-200 hover:text-gray-500 focus:outline-none transition-colors">
                        <i class="uil uil-times text-2xl"></i>
                    </button>
                </div>
                <!-- Body -->
                <div class="px-6 py-6">
                    <div class="text-sm text-gray-600 max-h-[60vh] overflow-y-auto space-y-4 pr-2 custom-scrollbar">
                        <p class="font-bold text-gray-900">MADDE 1 – TARAFLAR</p>
                        <p>İşbu Sözleşme aşağıdaki taraflar arasında aşağıda belirtilen hüküm ve şartlar çerçevesinde imzalanmıştır.</p>
                        <p class="font-bold text-gray-900">MADDE 2 – KONU</p>
                        <p>İşbu sözleşmenin konusu, ALICI'nın SATICI'ya ait internet sitesinden elektronik ortamda siparişini yaptığı ürünün satışı ve teslimi ile ilgili hak ve yükümlülüklerin saptanmasıdır.</p>
                        <p class="font-bold text-gray-900">MADDE 3 – CAYMA HAKKI</p>
                        <p>ALICI; 14 gün içerisinde cayma hakkını kullanabilir.</p>
                    </div>
                </div>
                <!-- Footer -->
                <div class="flex flex-col-reverse gap-3 border-t border-gray-100 bg-gray-50 px-6 py-4 sm:flex-row sm:justify-end">
                    <button type="button" onclick="document.getElementById('agreementModal').classList.add('hidden')" 
                        class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto" 
                        style="background-color: #dc2626 !important; color: #ffffff !important; border-radius: 9999px !important;">
                        {!! t('Kapat') !!}
                    </button>
                    <button type="button" onclick="document.getElementById('agreement').checked = true; document.getElementById('agreementModal').classList.add('hidden');" 
                        class="inline-flex w-full justify-center items-center px-6 py-3 text-sm font-bold shadow-md hover:shadow-xl hover:-translate-y-1 focus:outline-none sm:w-auto" 
                        style="background-color: #16a34a !important; color: #ffffff !important; border-radius: 9999px !important;">
                        <i class="uil uil-check mr-2 text-lg"></i>
                        {!! t('Okudum, Onaylıyorum') !!}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection