Fix payment form validation, styling and blog header visibility
This commit is contained in:
Muhammet Güler
@@ -0,0 +1,206 @@
|
||||
@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
|
||||
Reference in New Issue
Block a user