@extends('layouts.site')

@section('content')

<section class="wrapper bg-white py-14 xl:py-20 relative">
    <div class="container">
        <div class="row align-items-center mb-12">
            <div class="col-lg-8 mx-auto text-center">
                <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-100 text-orange-600 text-sm font-bold mb-4">
                    <i class="uil uil-shield-check text-lg"></i>
                    {!! t('256-Bit SSL Güvenli Ödeme') !!}
                </div>
                <h1 class="display-3 font-bold text-slate-800 mb-3">{!! $page->title !!}</h1>
                <p class="lead text-slate-500 max-w-2xl mx-auto">{!! $page->excerpt ?? t('Kredi kartınızla hızlı, kolay ve güvenli ödeme yapın.') !!}</p>
            </div>
        </div>

        @if(session('success'))
        <div class="row mb-8">
            <div class="col-lg-8 mx-auto">
                <div class="alert alert-success bg-green-100 text-green-700 border-green-200 rounded-xl p-4 flex items-center gap-3">
                    <i class="uil uil-check-circle text-2xl"></i>
                    <div>
                        <h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarılı!') !!}</h4>
                        <p>{!! session('success') !!}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if(session('error'))
        <div class="row mb-8">
            <div class="col-lg-8 mx-auto">
                <div class="alert alert-danger bg-red-100 text-red-700 border-red-200 rounded-xl p-4 flex items-center gap-3">
                    <i class="uil uil-exclamation-triangle text-2xl"></i>
                    <div>
                        <h4 class="font-bold text-lg mb-1">{!! t('Ödeme Başarısız!') !!}</h4>
                        <p>{!! session('error') !!}</p>
                    </div>
                </div>
            </div>
        </div>
        @endif

        @if($errors->any())
        <div class="row mb-8">
            <div class="col-lg-8 mx-auto">
                <div class="alert alert-danger p-4 rounded-xl border border-red-200 bg-red-50" style="background-color: #fef2f2 !important; border-color: #fecaca !important;">
                    <div class="flex items-center gap-3 mb-2" style="color: #dc2626 !important;">
                        <i class="uil uil-exclamation-triangle text-2xl"></i>
                        <h4 class="font-bold text-lg mb-0" style="color: #dc2626 !important;">{!! t('Lütfen Bilgileri Kontrol Ediniz') !!}</h4>
                    </div>
                    <ul class="list-disc pl-10 mb-0 font-medium" style="color: #dc2626 !important;">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        @endif

        <div class="row justify-content-center">
            <div class="col-lg-10 col-xl-9">
                @if(isset($paytr_token))
                <div class="card shadow-lg border-0 rounded-3xl overflow-hidden relative" style="min-height: 500px;">
                     <!-- Üst Turuncu Çizgi -->
                     <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-500 to-amber-500"></div>
                     <div class="card-body p-4 bg-white">
                        <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({},'#paytriframe');</script>
                     </div>
                </div>
                @else
                <div class="card shadow-lg border-0 rounded-3xl overflow-hidden relative">
                    <!-- Üst Turuncu Çizgi -->
                    <div class="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-orange-500 to-amber-500"></div>

                    <div class="card-body p-0">


                        <form action="{{ route('payment.process') }}" method="POST">
                            @csrf
                            <input type="hidden" name="payment_type" value="online">

                            <div class="row g-0">
                                <!-- Sol Taraf: Ödeme Formu -->
                                <div class="col-lg-7 p-8 md:p-10 bg-white">
                                    <h3 class="h4 mb-6 text-slate-800 font-bold flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 text-sm">1</div>
                                        {!! t('Kart Sahibi Bilgileri') !!}
                                    </h3>

                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="name" class="form-label text-slate-700 font-bold mb-2">{!! t('Adınız') !!}</label>
                                                <input type="text" name="name" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('name') border-red-500 @enderror" id="name" placeholder="{!! t('Adınızı Giriniz') !!}" value="{{ old('name') }}">
                                                @error('name') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="surname" class="form-label text-slate-700 font-bold mb-2">{!! t('Soyadınız') !!}</label>
                                                <input type="text" name="surname" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('surname') border-red-500 @enderror" id="surname" placeholder="{!! t('Soyadınızı Giriniz') !!}" value="{{ old('surname') }}">
                                                @error('surname') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="email" class="form-label text-slate-700 font-bold mb-2">{!! t('E-Posta Adresi') !!}</label>
                                                <input type="email" name="email" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('email') border-red-500 @enderror" id="email" placeholder="{!! t('E-Posta Adresinizi Giriniz') !!}" value="{{ old('email') }}">
                                                @error('email') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="phone" class="form-label text-slate-700 font-bold mb-2">{!! t('Telefon Numarası') !!}</label>
                                                <input type="tel" name="phone" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('phone') border-red-500 @enderror" id="phone" placeholder="{!! t('Telefon Numaranızı Giriniz') !!}" value="{{ old('phone') }}">
                                                @error('phone') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="address" class="form-label text-slate-700 font-bold mb-2">{!! t('Ödeme Açıklaması / Not') !!}</label>
                                                <textarea name="address" class="form-control bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-3 @error('address') border-red-500 @enderror" id="address" placeholder="{!! t('Varsa notunuzu buraya yazabilirsiniz...') !!}" style="height: 100px;">{{ old('address') }}</textarea>
                                                @error('address') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="mt-8 pt-6 border-t border-slate-100">
                                        <div class="form-check">
                                            <input class="form-check-input border-slate-300 checked:bg-orange-500 checked:border-orange-500 focus:ring-orange-200 @error('agreement') border-red-500 @enderror" type="checkbox" name="agreement" value="1" id="policyCheck" {{ old('agreement') ? 'checked' : '' }}>
                                            <label class="form-check-label text-sm text-slate-500" for="policyCheck">
                                                {!! t('<a href="#" class="text-orange-600 hover:text-orange-700 font-medium">Mesafeli Satış Sözleşmesi</a>\'ni okudum, onaylıyorum.') !!}
                                            </label>
                                            @error('agreement') <div class="text-red-600 text-sm mt-1 font-medium">{{ $message }}</div> @enderror
                                        </div>
                                    </div>
                                </div>

                                <!-- Sağ Taraf: Özet ve Tutar -->
                                <div class="col-lg-5 bg-slate-50 p-8 md:p-10 border-l border-slate-100 flex flex-col justify-between">
                                    <div>
                                        <h3 class="h4 mb-6 text-slate-800 font-bold flex items-center gap-2">
                                            <div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 text-sm">2</div>
                                            {!! t('Ödeme Tutarı') !!}
                                        </h3>
                                        
                                        <div class="bg-white p-6 rounded-2xl border border-slate-200 shadow-sm text-center mb-6">
                                            <label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">{!! t('TOPLAM TUTAR') !!}</label>
                                            <div class="relative inline-block w-full">
                                                <span class="absolute left-4 top-1/2 -translate-y-1/2 text-2xl font-bold text-orange-500">₺</span>
                                                <input type="number" step="0.01" min="1" name="price" class="form-control border-0 bg-transparent text-center text-4xl font-bold text-slate-800 p-0 focus:ring-0 focus:shadow-none w-full @error('price') text-red-500 @enderror" placeholder="0.00" id="amount" value="{{ old('price') }}">
                                            </div>
                                            @error('price') <div class="text-red-600 text-xs mt-1 font-medium">{{ $message }}</div> @enderror
                                        </div>

                                        <div class="space-y-3 opacity-70">
                                            <div class="flex items-center gap-3 text-sm text-slate-600">
                                                <i class="uil uil-check-circle text-green-500 text-lg"></i>
                                                <span>{!! t('Komisyonsuz İşlem') !!}</span>
                                            </div>
                                            <div class="flex items-center gap-3 text-sm text-slate-600">
                                                <i class="uil uil-check-circle text-green-500 text-lg"></i>
                                                <span>{!! t('3D Secure ile Maksimum Güvenlik') !!}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mt-8">
                                        <button type="submit" class="btn w-full rounded-xl py-3 px-6 text-white font-bold text-lg shadow-lg hover:-translate-y-1 transition-all duration-300 flex items-center justify-center gap-2" style="background-color: #dc2626 !important; color: #ffffff !important; box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.5);">
                                            <i class="uil uil-padlock"></i>
                                            <span>{!! t('ÖDEMEYİ TAMAMLA') !!}</span>
                                        </button>
                                        
                                        <div class="mt-6 flex justify-center gap-4 opacity-50 grayscale hover:grayscale-0 transition-all duration-300">
                                            <i class="uil uil-master-card text-3xl"></i>
                                            <i class="uil uil-visa text-3xl"></i>
                                            <i class="uil uil-card-atm text-3xl"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                @endif

                @if($page->content)
                <div class="mt-14 text-center">
                    <div class="prose max-w-3xl mx-auto text-slate-600">
                        {!! $page->content !!}
                    </div>
                </div>
                @endif
                
            </div>
        </div>
    </div>
</section>

@endsection