@extends('layouts.master_app')
@section('title') Contacto @endsection
@section('menu_contacts', 'here show')

@section('css')
<link href="/assets/app/plugins/custom/prismjs/prismjs.bundle.css" rel="stylesheet" type="text/css" />
@endsection

@section('content')
	<!--begin::Toolbar-->
	<div class="toolbar py-2" id="kt_toolbar">
		<!--begin::Container-->
		<div id="kt_toolbar_container" class="container-fluid d-flex align-items-center">
			<!--begin::Page title-->
			<div class="flex-grow-1 flex-shrink-0 me-5">
				<!--begin::Page title-->
				<div data-kt-swapper="true" data-kt-swapper-mode="prepend" data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}" class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
					<!--begin::Title-->
					<h1 class="d-flex align-items-center text-dark fw-bold my-1 fs-3">Pago
						<!--begin::Separator-->
						<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
						<!--end::Separator-->
						<!--begin::Description-->
						<small class="text-muted fs-7 fw-semibold my-1 ms-1"><a href="/contacts/{{$payment->client_id}}"> {{ isset($payment->client->person) ? $payment->client->person->name : ''}}  </a> </small>
						<!--end::Description-->
					</h1>
					<!--end::Title-->
				</div>
				<!--end::Page title-->
			</div>
			<!--end::Page title-->
			<!--begin::Action group-->
			<div class="d-flex align-items-center flex-wrap">
				<!--begin::Wrapper-->
				<div class="flex-shrink-0 me-2">
					
				</div>
				<!--end::Wrapper-->
				<!--begin::Wrapper-->
				<div class="d-flex align-items-center">
					
				</div>
				<!--end::Wrapper-->
			</div>
			<!--end::Action group-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Toolbar-->
	
	<!--begin::Content-->
	<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
		<!--begin::Container-->
		<div id="kt_content_container" class="container-xxl">
			<!-- begin::Invoice 1-->
			<div class="card">
				<!-- begin::Body-->
				<div class="card-body py-20">
					<!-- begin::Wrapper-->
					<div class="mw-lg-950px mx-auto w-100">
						<!-- begin::Header-->
						<div class="d-flex justify-content-between flex-column flex-sm-row mb-19">
							<h4 class="fw-bolder text-gray-800 fs-2qx pe-5 pb-7">PAGO  <br>  <div class=" badge py-3 px-4 fs-7 badge-{{$payment->status->color}}">{{$payment->status->name}}</div> </h4>
							<!--end::Logo-->
							<div class="text-sm-end">
								<!--begin::Logo-->
								@if($company->logo != null)
									<img alt="Logo" src="/storage/logos/{{$company->logo}}" style="height: 80px"/>
								@endif
								<!--end::Logo-->
								<!--begin::Text-->
								<div class="text-sm-end fw-semibold fs-4 text-muted mt-7">
									<div>{{$company->address}}</div>
									<div>{{$company->web}}</div>
									<div>{{$company->email}} - {{$company->phone}} </div>
								</div>
								<!--end::Text-->
							</div>
						</div>
						<!--end::Header-->
						<!--begin::Body-->
						<div class="border-bottom pb-12">
							<!--begin::Image-->
							<!--<div class="d-flex flex-row-fluid bgi-no-repeat bgi-position-x-center bgi-size-cover card-rounded h-150px h-lg-250px mb-lg-20" style="background-image: url(assets/media/misc/pattern-4.jpg)"></div>-->
							<!--end::Image-->
							<!--begin::Wrapper-->
							<div class="d-flex justify-content-between flex-column flex-md-row">
								<!--begin::Content-->
								<div class="flex-grow-1 pt-8 mb-13">
									<!--begin::Table-->
									<div class="table-responsive border-bottom mb-14">
										<table class="table">
											<thead>
												<tr class="border-bottom fs-6 fw-bold text-muted text-uppercase">
													<th class="min-w-175px pb-9">Fecha</th>
													<th class="min-w-175px pb-9">Concepto</th>
													<th class="min-w-80px pb-9 text-end">Forma de pago</th>
													<th class="min-w-100px pe-lg-6 pb-9 text-end">Amount</th>
												</tr>
											</thead>
											<tbody>
												<tr class="fw-bold text-gray-700 fs-5 text-end">
													<td class="d-flex align-items-center pt-11">
														<i class="fa fa-genderless text-primary fs-1 me-2"></i>{{$payment->date}}
													</td>
													<td class="pt-11">
														@if(isset($payment->service))
														{{$payment->service->name}}
														@endif
														{{$payment->concept}}
													</td>
													<td class="pt-11">{{isset($payment->payment_method) ? $payment->payment_method->name : ''}}</td>
													<td class="pt-11 fs-5 pe-lg-6 text-dark fw-bolder">${{$payment->amount}}</td>
												</tr>
											</tbody>
										</table>
									</div>
									<!--end::Table-->
									<!--begin::Section-->
									<div class="d-flex flex-column mw-md-300px w-100">
										<!--begin::Label-->
										<div class="fw-semibold fs-5 mb-3 text-dark00">BANK TRANSFER</div>
										<!--end::Label-->
										<!--begin::Item-->
										<div class="d-flex flex-stack text-gray-800 mb-3 fs-6">
											<!--begin::Accountname-->
											<div class="fw-semibold pe-5">Account Name:</div>
											<!--end::Accountname-->
											<!--begin::Label-->
											<div class="text-end fw-norma">Barclays UK</div>
											<!--end::Label-->
										</div>
										<!--end::Item-->
										<!--begin::Item-->
										<div class="d-flex flex-stack text-gray-800 mb-3 fs-6">
											<!--begin::Accountnumber-->
											<div class="fw-semibold pe-5">Account Number:</div>
											<!--end::Accountnumber-->
											<!--begin::Number-->
											<div class="text-end fw-norma">1234567890934</div>
											<!--end::Number-->
										</div>
										<!--end::Item-->
										<!--begin::Item-->
										<div class="d-flex flex-stack text-gray-800 fs-6">
											<!--begin::Code-->
											<div class="fw-semibold pe-5">Code:</div>
											<!--end::Code-->
											<!--begin::Label-->
											<div class="text-end fw-norma">BARC0032UK</div>
											<!--end::Label-->
										</div>
										<!--end::Item-->
									</div>
									<!--end::Section-->
								</div>
								<!--end::Content-->
								<!--begin::Separator-->
								<div class="border-end d-none d-md-block mh-450px mx-9"></div>
								<!--end::Separator-->
								<!--begin::Content-->
								<div class="text-end pt-10">
									<!--begin::Total Amount-->
									<div class="fs-3 fw-bold text-muted mb-3">TOTAL</div>
									<div class="fs-xl-2x fs-2 fw-bolder">${{$payment->amount}}</div>
									<!--<div class="text-muted fw-semibold">Impuestos incluidos</div> -->
									<!--end::Total Amount-->
									<div class="border-bottom w-100 my-7 my-lg-16"></div>
									<!--begin::Invoice To-->
									<div class="text-gray-600 fs-6 fw-semibold mb-3">FACTURA A</div>
									<div class="fs-6 text-gray-800 fw-semibold mb-8">{{$payment->client->person->name}}
									<br />Fredrick Nebraska 20620</div>
									<!--end::Invoice To-->
									<!--begin::Invoice No-->
									<div class="text-gray-600 fs-6 fw-semibold mb-3">FOLIO</div>
									<div class="fs-6 text-gray-800 fw-semibold mb-8">{{$payment->uuid}}</div>
									<!--end::Invoice No-->
									<!--begin::Invoice Date-->
									<div class="text-gray-600 fs-6 fw-semibold mb-3">DATE</div>
									<div class="fs-6 text-gray-800 fw-semibold">{{$payment->date}}</div>
									<!--end::Invoice Date-->
								</div>
								<!--end::Content-->
							</div>
							<!--end::Wrapper-->
						</div>
						<!--end::Body-->
						<!-- begin::Footer-->
						<div class="d-flex flex-stack flex-wrap mt-lg-20 pt-13">
							<!-- begin::Actions-->
							<div class="my-1 me-5">
								<!-- begin::Pint-->
								<button type="button" class="btn btn-success my-1 me-12" onclick="window.print();">Imprimir</button>
								<!-- end::Pint-->
								<!-- begin::Download-->
								<button type="button" class="btn btn-light-success my-1">Descargar</button>
								<!-- end::Download-->
							</div>
							<!-- end::Actions-->
							<!-- begin::Action-->
							<!--<button type="button" class="btn btn-primary my-1">Create Invoice</button> -->
							<!-- end::Action-->
						</div>
						<!-- end::Footer-->
					</div>
					<!-- end::Wrapper-->
				</div>
				<!-- end::Body-->
			</div>
			<!-- end::Invoice 1-->
		</div>
		<!--end::Container-->
	</div>
	<!--end::Content-->
@endsection

@section('js')
<script src="/assets/app/js/custom/confirm_delete.js"></script>
<script src="/assets/app/plugins/custom/datatables/datatables.bundle.js"></script>

<script src="/assets/app/js/custom/apps/user-management/users/list/table.js"></script>
<script src="/assets/app/js/custom/apps/user-management/users/list/add.js"></script>
<script src="/assets/app/js/custom/utilities/modals/create-campaign.js"></script>

<script src="/assets/app/js/custom/documentation/forms/flatpickr.js"></script>
@endsection