Muhammet Güler
249 lines
12 KiB
PHP
249 lines
12 KiB
PHP
@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
|