@inject('carbon', 'Carbon\Carbon')
@section('title', 'Bekijk offerte')
<div class="container mx-auto">
	
	<div>
		@php
            //cache the logo setting to reduce calling the database
            $loginLogo = Cache::rememberForever('loginLogo', function () {
                return \App\Models\Setting::where('key', 'loginLogo')->value('value');
            });

            $loginLogoDark = Cache::rememberForever('loginLogoDark', function () {
                return \App\Models\Setting::where('key', 'loginLogoDark')->value('value');
            });
        @endphp

        @if (storage_exists($loginLogo))
            <picture>
                <source srcset="{{ storage_url($loginLogoDark) }}" media="(prefers-color-scheme: dark)">
                <img src="{{ storage_url($loginLogo) }}" alt="{{ config('app.name') }}">
            </picture>
        @else
            {{ config('app.name') }}
        @endif
	</div>

    <div class="clearfix"></div>
	
	
	
	<div class="grid grid-cols lg:grid-cols-4 lg:gap-6">
        <div class="col-span-2">
            <div class="card">
				<h3>{{ $ownSettings['company_name'] }}</h3>
				<strong>BTW:</strong> {{ $ownSettings['company_vat'] }} <br><br>
				{{ $ownSettings['company_address'] }} <br>
				{{ $ownSettings['company_city'] }} <br>
				{{ $ownSettings['company_country'] }} <br>
				<br>
				<strong>IBAN</strong>: {{ $ownSettings["company_bank"] }}<br>
				<strong>BIC:</strong> {{ $ownSettings["company_bic"] }}<br>
			</div>
		</div>
		<div class="col-span-2">
			<div class="card">
				<h3>{{ companyByID($companyInfo->id) }}</h3>
				<strong>BTW:</strong> {{ $companyInfo->btw }} <br><br>
				{{ $companyInfo->address_street }} {{ $companyInfo->address_number }} <br>
				{{ $companyInfo->address_zip }} {{ $companyInfo->address_city }} <br>
				{{ $companyInfo->address_country }}
			</div>		
		
		</div>
		
	</div>	
    
	<div class="p-5">
		<h2>Offerte: {{ $offerteInfo->offertenummer }}</h2>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-4 lg:gap-6">
        <div>
            <div class="card">
				<h3>Inhoud van de offerte</h3>
				@php $i = 0; @endphp
				@foreach($offertedelenPrice as $offertedeel)
					@php $i++; @endphp
					<a href="#deel-{{ $offertedeel->id }}">{{ $i }}. {{ $offertedeel->titel }}</a><br>
				@endforeach
					@php $i++; @endphp
					<a href="#totaal">{{ $i }}. Totaalbedrag</a><br>
					@php $i++; @endphp
					<a href="#akkoord">{{ $i }}. Offerte ondertekenen</a><br>
				@foreach($offertedelenText as $offertedeel)
					@php $i++; @endphp
					<a href="#deel-{{ $offertedeel->id }}">{{ $i }}. {{ $offertedeel->titel }}</a><br>
				@endforeach
				
			</div>
			
		</div>
		<div class="lg:col-span-3 mt-5">
				<div>
				<table>
					<thead>
						<th width="50%">Onderdeel</th>
						<th width="10%">Aantal</th>
						<th width="15%">Eenheidsprijs</th>
						<th width="10%">BTW</th>
						<th width="15%">Totaal excl.</th>
					</thead>
					<tbody>
					@foreach($offertedelenPrice as $offertedeel)

					<tr id="deel-{{ $offertedeel->id }}">
						<td><h4>{{ $offertedeel->titel }}</h4></td>
						<td style="text-align:center;">{{ $offertedeel->aantal }}</td>
						<td>€ {{ DotToComma($offertedeel->prijs) }}</td>
						<td>{{ $offertedeel->btw_type }}%</td>
						<td>€ {{ DotToComma($offertedeel->totaalprijsexcl) }}</td>
						
					<tr>
						<td colspan="5" style="border-top: 0; padding-top: 0;">
						{!! $offertedeel->uitleg !!}
						</td>	
					</tr>

						
					</tr>
					
				   	@endforeach	
					</tbody>
				</table>	
				</div>
				
				<table id="totaal">
					<tr>
						<td width="50%"></td>
						<td width="35%" style="text-align:right; font-weight: bold;">Totaal excl. btw:</td>
						<td width="15%">€ {{ offertePriceEx($offerteInfo->id) }}</td>
					</tr>
					<tr>
						<td width="50%"></td>
						<td width="35%" style="text-align:right;">21% btw op € {{ offertePriceEx($offerteInfo->id) }}:</td>
						<td width="15%">€ {{ offertePriceBtw($offerteInfo->id) }}</td>
					</tr>
					<tr>
						<td width="50%"></td>
						<td width="35%" style="text-align:right; font-weight: bold; background-color: rgb(229 231 235);">Totaal te betalen:</td>
						<td width="15%" style="font-weight: bold; background-color: rgb(229 231 235);">€ {{ offertePrice($offerteInfo->id) }}</td>
					</tr>
					<tr>
						<td colspan="3" class="mt-5">
							{!! $offertedelenAkkoord->uitleg !!}
						</td>
					</tr>
					<tr >
						<td colspan="3">
							
						
						
						<div class="grid grid-cols-1 md:grid-cols-4 mt-4" id="akkoord">
							
							@if($offerteInfo->verzenddatum != NULL)	
							
							<div class="col-span-2">
								Namens {{ $ownSettings['company_name'] }} <br>
								<strong>{{ $ownSettings['company_rep'] }}</strong> <br>
								Ondertekend op {{ Carbon\Carbon::parse($offerteInfo->verzenddatum)->format('d-m-Y') ?? date('d-m-Y') }}<br>
								
								@if($ownSignature != '')
								<img src="{{ $ownSignature }}" alt="Handtekening" style="height:175px" />
								@endif
								
							</div>
							
							<div class="col-span-2">
								Namens {{ companyById($offerteInfo->company_id) }} <br>
								
								
								@if($this->date_signed == NULL)
								
								<x-form wire:submit.prevent="update" method="put">
									<input type="hidden" wire:model="uuid" name="uuid" value="{{ $this->uuid }}">
									
									<div wire:loading.remove.delay.longer>
									
										<div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mt-4">
											<div class="col-span-2">
												<x-form.input wire:model="signer_firstname" label="Voornaam" name="signer_firstname">{{ $companyInfo->first_name }}</x-form.input>
											</div>
											<div class="col-span-2">
												<x-form.input wire:model="signer_lastname" label="Achternaam" name="signer_lastname">{{ $companyInfo->last_name }}</x-form.input>
											</div>
										</div>

										<label for="signature" class="block mb-2 font-bold text-sm text-gray-600 dark:text-gray-200">Uw handtekening</label>
										<x-form.signature wire:model="signature" width="400" height="200"/>
									
									
										<button class="btn btn-primary" type="submit" wire:loading.attr="disabled">Offerte Ondertekenen</button>
									</div>
									<div class="alert alert-primary" wire:loading.delay.longer>
											<i class="fa fa-spinner fa-fw fa-xl margin-right-md fa-spin" style="color: var(--white); --fa-animation-duration: 2s;"></i> Een ogenblik geduld, we verwerken uw handtekening ...
									</div>


								</x-form>
								
								@else
								<strong>{{ $this->signer_firstname }} {{ $this->signer_lastname }}</strong> <br>
								Ondertekend op {{ Carbon\Carbon::parse($this->date_signed)->format('d-m-Y H:i') }}<br>
								
								<img src="{{ $this->signature }}" alt="Handtekening" style="height:175px" />
								
								@endif
								
								@include('errors.messages')
								
							</div>
							
							@else
							De offerte is nog niet finaal verzonden. Zodra deze verzonden wordt, kan deze ondertekend worden.
							@endif	
						</div>
							
						</td>
						
					</tr>
					
				</table>
	


				
				
				<table>
					@foreach($offertedelenText as $offertedeel)
					<tr id="deel-{{ $offertedeel->id }}">
						<td>
							<h3>{{ $offertedeel->titel }}</h3>
							{!! $offertedeel->uitleg !!}	
						</td>
					</tr>
					@endforeach
				</table>
				
		
		</div>
	</div>

</div>