@section('header-menu') @include('layouts.partials.home.navbar') @endsection
@section('footer') @include('layouts.partials.home.footer') @endsection

<div class="container mt-4">

	@if ($is_member == 'no')
	<div class="p-3 mb-4" style="box-shadow: 0 0 3px 1px #888;">
		<h5 class="text-center text-uppercase fw-bold"> Rincian Biaya Booking : </h5>
		<table class="table table-hovered table-bordered mt-3 text-center">
			<thead class="bg-secondary text-white">
				<tr>
					<td>Tanggal</td>
					<td>Waktu</td>
					<td>Harga</td>
				</tr>
			</thead>
			<tbody>
				@foreach ($transDetail as $trans)
				<tr>
					<td> {{ Carbon\Carbon::parse($trans->tanggal_booking)->locale('id')->settings(['formatFunction' => 'translatedFormat'])->format('l, d F Y') }} </td>
					<td> {{ $trans->jam_booking }} </td>
					<td> RP. {{ number_format($trans->harga , 0, ',', '.') }} </td>
				</tr>
				@endforeach	
				@if ($this->tambahan == 'ac')
				<tr style="background: #f1f1f1;">
					<td>Tambahan : </td>
					<td class="text-uppercase"> AC </td>
					<td class=""> RP. {{ number_format($price_tambahan , 0, ',', '.') }} </td>
				</tr>
				@endif		
				<tr style="background: #f1f1f1;">
					<td></td>
					<td class="text-uppercase fw-bold">Total Harga : </td>
					<td class="fw-bold"> RP. {{ number_format($harga , 0, ',', '.') }} </td>
				</tr>				
			</tbody>
		</table>
	</div>
	@endif

	<div class="row align-items-center">
		<div class="col-md-6 mb-3">
			<img src="{{ asset('images/icon/booking-success.png') }}" class="img-fluid">
		</div>
		<div class="col-md-6 mb-3 text-center">
			<h3 class="text-capitalize text-bg mb-3"> Booking Lapangan Berhasil </h3>
			<small class="text-capitalize {{ $is_member == 'yes' ? 'text-decoration-line-through' : '' }}" style="font-size: 18px;"> silahkan lakukan pembayaran sebesar :  </small>
			<div class="d-flex justify-content-center my-3">
				<div class="border border-dark p-2 px-5" style="width: fit-content;">
				<h3 class="text-dark {{ $is_member == 'yes' ? 'text-decoration-line-through' : '' }}"> RP.	{{ number_format($this->harga , 0, ',', '.') }} </h3>
				</div>
			</div>

			@if ($is_member == 'no')
			<div>
				<small class="text-capitalize" style="font-size: 18px;"> Pada Rekening :  </small>
				<div class="d-flex flex-column justify-content-center my-3">	
					<div class="d-flex justify-content-center mb-3">
						<img src="{{ asset($bank) }}" style="width: 150px; width: 150px;">
					</div>
					<div class="d-flex justify-content-center mb-1">
						<span class="border-top border-dark pt-2 fw-bold" style="width: fit-content;"> A/N. {{ $atas_nama }} </span>
					</div>
					<div class="d-flex justify-content-center">
						<div class="border border-dark p-2 px-5" style="width: fit-content;">
							<h3 class="text-dark"> {{ $rekening }} </h3>
						</div>
					</div>
				</div>
				<p class="text-capitalize" style="font-size: 18px;"> Dan Upload bukti pembayarannya. </p>
				<a data-bs-toggle="modal" href="#addData" role="button" class="btn nav-bg p-3 text-white"> Upload Bukti Pembayaran </a>
			</div>
			@endif

			@if ($is_member == 'yes')
			<div class="d-flex justify-content-center mb-2">
				<div class="nav-bg rounded-circle p-1" style="border: 5px solid #fff; box-shadow: 0 0 3px 3px #c5c5c5;">
					<div class="nav-bg rounded-circle" style="border: 5px solid #fff;">
						<svg class="text-white" style="height: 80px; width: 80px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
					</div>
				</div>
			</div>	
			<p class="text-capitalize mt-3" style="font-size: 18px;"> Anda Terdaftar Sebagai Member </p>
			<div class="container">
			<p class="text-capitalize mt-3 nav-bg text-white py-2 px-3 mx-5" style="font-size: 18px;"> Anda Tidak Perlu Untuk Membayar Biaya Booking & Dapat Langsung Bermain </p>
			</div>
			@endif
		</div>
	</div>

	@if (session()->has('info-failed'))
	<div class="alert alert-danger block d-flex align-items-center my-3">
		{{ session('info-failed') }}
		<button type="button" class="close ml-auto" data-dismiss="alert" aria-label="Close">
			<span class="font-weight-bold" aria-hidden="true">&times;</span>
		</button>		
	</div>
	@endif

	<!-- Modal Add -->
	<div wire:ignore.self class="modal fade" id="addData" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addData" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-xl">
			<div class="modal-content">
				<div class="modal-header nav-bg text-white px-4">
					<h5 class="modal-title" id="exampleModalToggleLabel">Upload Bukti Pembayaran</h5>
					<button type="button" class="bg-white p-2 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="form-group mb-3">
						<label>Bukti Pembayaran</label>
						<div class="custom-file">
							{{-- <input type="file" wire:model="photo" id="customFile" class="custom-file-input"> --}}
							<input type="file" wire:model="photo" class="form-control" id="inputGroupFile04">
							@error('photo') <small class="text-danger">{{$message}}</small> @enderror
						</div>
						@if ($photo)
							<label class="mt-3"> Preview Image</label>
							<div class="border border-secondary" style="width: 200px; height: auto;">
								<img src="{{ $photo->temporaryUrl() }}" alt="Preview Image" style="height: 100%; width: 100%; object-fit: cover;">
							</div>
						@endif
					</div>      
				</div>
				<div class="modal-footer">
					<button class="btn nav-bg text-white d-flex align-items-center" wire:click.prevent="store()">
						<span> Kirim Bukti </span>
						<svg class="text-white ms-2" style="height: 25px; width: 25px;" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
					</button>
				</div>
			</div>
		</div>
	</div>
	<!-- End Modal Add -->

	<!-- Modal Warning -->
	@if ($is_member == 'no')	
		<div wire:ignore.self class="modal fade" id="paymentWarning" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addData" aria-hidden="true">
			<div class="modal-dialog modal-dialog-centered modal-xl">
				<div class="modal-content">
					<div class="modal-header bg-danger text-white px-4">
						<h5 class="modal-title" id="exampleModalToggleLabel">Peringatan Pembayaran</h5>
						<button type="button" class="bg-white p-2 btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
					</div>
					<div class="modal-body">
						<div class="form-group mb-3">
							<span style="font-size: 16px;"> Pastikan Waktu Pembayaran Tidak Melebihi <b class="text-danger"> 2 x 60 Menit </b> Setelah Melakukan Booking. Jika Waktu Melebihi <b class="text-danger"> 2 x 60 Menit </b>, Maka Booking Anda Akan Otomatis Dibatalkan </span>
						</div>      
					</div>
				</div>
			</div>
		</div>
		<!-- End Modal Warning -->
	</div>

	@section('js')
	<script>
		$(document).ready(function(){
			$("#paymentWarning").modal('show');
		});
	</script>		
	@endsection
@endif