@inject('carbon', 'Carbon\Carbon')
@section('title', 'Bekijk offerte')
<div>
    <div class="mb-5">
        <a href="{{ route('admin.offertes') }}">Offertes</a>
        <span class="dark:text-gray-200">- Bekijken</span>
    </div>



    <div class="clearfix"></div>
	
	<div>
		@include('errors.messages')
    </div>
	
	<table>
        <thead>
        <tr>
			<th>Offertenummer</th>
			<th>Bedrijf</th>
			<th>Vervaldatum</th>
			<th>Totaalprijs</th>
			<th>Getekend</th>
        </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{ $offerteInfo->offertenummer }}</td>
				<td>{{ companyByID($offerteInfo->company_id) }}</td>
				<td>@if($offerteInfo->vervaldatum == NULL) Nog niet verzonden @endif
					@if($offerteInfo->vervaldatum != NULL) {{ $offerteInfo->vervaldatum }} @endif</td>
				<td>€ {{ offertePrice($offerteInfo->id) }} (excl: € {{ offertePriceEx($offerteInfo->id) }})</td>
				<td>@if($offerteInfo->signature != NULL)  <img src="{{ $offerteInfo->signature }}" alt="Handtekening" style="height:50px" /> @endif </td>
                
            </tr>
        </tbody>
    </table>
	

	<div class="grid grid-cols-1 lg:grid-cols-4 lg:gap-6">
        <div>
            <div class="card">
				<h3>{{ companyByID($companyInfo->id) }}</h3>
				<strong>BTW:</strong> {{ $companyInfo->btw }}


			</div>
			
			<div class="card">
				<h3>Adres</h3>
				{{ $companyInfo->address_street }} {{ $companyInfo->address_number }} <br>
				{{ $companyInfo->address_zip }} {{ $companyInfo->address_city }} <br>
				{{ $companyInfo->address_country }}

			</div>
			
			<div class="card">
				<h3>Contactpersoon</h3>

				{{ $companyInfo->first_name }} {{ $companyInfo->last_name }} <br>
				{{ $companyInfo->email }}

			</div>
		</div>
		<div class="lg:col-span-3">
			<div class="card">
				<h3>Onderdelen van offerte</h3>
				
				@if($offerteInfo->signature == NULL)
				
				<div>
					<livewire:admin.offertes.create-offerte-deel  :offerte="$offerteInfo->id"/>
				</div>
				
				@endif
					
				
					<a href="#" title="Offerte Downloaden" class="btn btn-info" data-original-title="Offerte Downloaden" wire:click="downloadOfferte" style="float:right; margin-bottom:20px;">Download offerte &nbsp;&nbsp;<i class="fas fa-download"></i></a>
				
					<a href="{{ secure_url('/offertes/'.$offerteInfo->uuid) }}" title="" class="btn btn-info" data-original-title="Aanwezigheidslijst" target="_blank" style="float:right; margin-bottom:20px;">Preview offerte &nbsp;&nbsp;<i class="fas fa-download"></i></a>
				
					@if($offerteInfo->signature == NULL)
	
					<x-modal>
                         <x-slot name="trigger">
                              <a href="#"  class="btn btn-info" @click="on = true" style="float:right; margin-bottom:20px; margin-right:10px;"><i class="fa-solid fa-envelope" title="Bedrijf mailen" ></i>&nbsp;&nbsp;Verzend offerte</a>
                         </x-slot>

                         <x-slot name="title">Offerte verzenden naar bedrijf</x-slot>

                         <x-slot name="content">
                              <div class="text-center">

								  		Ben je zeker dat je de offerte wil verzenden naar: <strong>{{ $companyInfo->first_name }} {{ $companyInfo->last_name }}</strong>, contactpersoon bij {{ $companyInfo->name }}, ter definitieve ondertekening?
								  		
								  		
										
                                    </div>
                         </x-slot>

                                <x-slot name="footer">
                                    <button class="btn" >Annuleer</button>
									<form wire:submit.prevent="verzendOfferte"> 
										<div wire:loading.remove>
											<button class="btn btn-green" type="submit" wire:loading.attr="disabled">Verzend e-mail met offerte</button>
										</div>
										<div wire:loading>
											<i class="fa fa-spinner fa-fw fa-xl margin-right-md fa-spin" style="color: var(--white); --fa-animation-duration: 2s;"></i> Offerte verzenden ...
										</div>
									</form>
									
									
	                     </x-slot>
                     </x-modal>
				
					@endif
				
				
				
				
				<table>
					<thead>
					<tr>
						<th></th>
						<th width="40%">Prijsonderdeel</th>
						<th>Aantal</th>
						<th>Prijs (excl)</th>
						<th>BTW</th>
						<th>Totaalprijs (excl)</th>
						<th width="20%"></th>
					</tr>
					</thead>
					<tbody wire:key="pricedeel" wire:sortable="updateDeelOrder" wire:sortable.options="{ animation: 100 }">
						@foreach($offertedelenPrice as $offertedeel)
						<tr id="deel-{{ $offertedeel->id }}" @if($offerteInfo->signature == NULL) wire:sortable.item="{{ $offertedeel->id }}" wire:key="deel-{{ $offertedeel->id }}" @endif>
							<td>@if($offerteInfo->signature == NULL)<i wire:sortable.handle class="fas fa-arrows-alt" style="cursor: pointer;"></i>@endif</td>
							<td>{{ $offertedeel->titel }}</td>
							<td>{{ $offertedeel->aantal }}</td>
							<td>@if($offertedeel->type == 'price')€ {{ DotToComma($offertedeel->prijs) }} @endif</td>
							<td>@if($offertedeel->type == 'price')€ {{ DotToComma($offertedeel->btw) }} @endif</td>
							<td>@if($offertedeel->type == 'price')€ {{ DotToComma($offertedeel->totaalprijsexcl) }} @endif</td>
							<td>@if($offerteInfo->signature == NULL)
								<a href="{{ route('admin.offertes.editoffertedeel', ['offertedeel' => $offertedeel->id, 'offerte' => $offertedeel->offerte]) }}">Bewerk</a> - 
								
								<x-modal>
									<x-slot name="trigger">
										<a href="#" @click="on = true">Verwijder</a>
									</x-slot>

									<x-slot name="title">Verwijderen bevestigen</x-slot>

									<x-slot name="content">
										<div class="text-center">
											Ben je zeker dat je offertedeel <b>{{ $offertedeel->titel }}</b> wil verwijderen? 
										</div>
									</x-slot>

									<x-slot name="footer">
										<button class="btn" @click="on = false">Annuleer</button>
										<button class="btn btn-red" wire:click="deleteOfferteDeel('{{ $offertedeel->id }}')">Verwijder offertedeel</button>
									</x-slot>
								</x-modal>
								@endif
								
								
								
							</td>


						</tr>
						 @endforeach
					</tbody>
				</table>
				<table>
					<thead>
					<tr>
						<th width="32px"></th>
						<th >Vast onderdeel</th>
						<th width="20%"></th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td></td>
						<td>{{ $offertedelenAkkoord->titel }}</td>
						<td>@if($offerteInfo->signature == NULL)<a href="{{ route('admin.offertes.editoffertedeel', ['offertedeel' => $offertedelenAkkoord->id, 'offerte' => $offertedelenAkkoord->offerte]) }}">Bewerk</a>@endif</td>
					</tr>
					</tbody>
				
				<table>
					<thead>
					<tr>
						<th></th>
						<th width="80%">Tekstonderdeel</th>
						<th width="20%"></th>
					</tr>
					</thead>
					<tbody wire:key="textdeel" wire:sortable="updateDeelOrder" wire:sortable.options="{ animation: 100 }">
						@foreach($offertedelenText as $offertedeel)
						<tr id="deel-{{ $offertedeel->id }}" @if($offerteInfo->signature == NULL) wire:sortable.item="{{ $offertedeel->id }}" wire:key="deel-{{ $offertedeel->id }}" @endif>
							<td>@if($offerteInfo->signature == NULL)<i wire:sortable.handle class="fas fa-arrows-alt" style="cursor: pointer;"></i>@endif</td>
							<td>{{ $offertedeel->titel }}</td>
							<td>
								@if($offerteInfo->signature == NULL)
								<a href="{{ route('admin.offertes.editoffertedeel', ['offertedeel' => $offertedeel->id, 'offerte' => $offertedeel->offerte]) }}">Bewerk</a> - 
								
								<x-modal>
									<x-slot name="trigger">
										<a href="#" @click="on = true">Verwijder</a>
									</x-slot>

									<x-slot name="title">Verwijderen bevestigen</x-slot>

									<x-slot name="content">
										<div class="text-center">
											Ben je zeker dat je offertedeel <b>{{ $offertedeel->titel }}</b> wil verwijderen? 
										</div>
									</x-slot>

									<x-slot name="footer">
										<button class="btn" @click="on = false">Annuleer</button>
										<button class="btn btn-red" wire:click="deleteOfferteDeel('{{ $offertedeel->id }}')">Verwijder offertedeel</button>
									</x-slot>
								</x-modal>
								@endif
								
								
							</td>


						</tr>
						 @endforeach
					</tbody>
				</table>
				
			</div>
				
				
			<div class="card">
				
				<div>
					<livewire:admin.offertes.create-offerte-opmerking  :offerte="$offerteInfo->id"/>
				</div>
				
				
				<table>
					<thead>
					<tr>
						<th width="80%">Interne opmerkingen</th>
						<th width="20%"></th>
					</tr>
					</thead>
					<tbody>
						@foreach($offertedelenOpmerking as $offerteopmerking)
						<tr>
							<td><strong>{{ $offerteopmerking->titel }}</strong> (toegevoegd op {{ $offerteopmerking->created_at }})</td>
							<td>

								<a href="{{ route('admin.offertes.editofferteopmerking', ['offerteopmerking' => $offerteopmerking->id, 'offerte' => $offerteopmerking->offerte]) }}">Bewerk</a> - 
								
								<x-modal>
									<x-slot name="trigger">
										<a href="#" @click="on = true">Verwijder</a>
									</x-slot>

									<x-slot name="title">Verwijderen bevestigen</x-slot>

									<x-slot name="content">
										<div class="text-center">
											Ben je zeker dat je interne opmerking <b>{{ $offerteopmerking->titel }}</b> wil verwijderen? 
										</div>
									</x-slot>

									<x-slot name="footer">
										<button class="btn" @click="on = false">Annuleer</button>
										<button class="btn btn-red" wire:click="deleteOfferteOpmerking('{{ $offerteopmerking->id }}')">Verwijder opmerking</button>
									</x-slot>
								</x-modal>
							</td>
						</tr>
						<tr>
							<td colspan="3" style="border-top-width:0; padding-top: 5px;">{!! $offerteopmerking->uitleg !!}</td>
						</tr>
						 @endforeach
					</tbody>
				</table>
					
			</div>	
		
		</div>
	</div>

</div>