@extends('layouts.app')
@section('title', 'Choose your package | Serengeti Anti-Poaching Run')
@section('robots', 'noindex,nofollow')
@section('content')
@include('partials.pagehead', ['h1' => __('Choose package'), 'lead' => __('Step 2: select your registration package and, optionally, a safari travel package.')])
<section class="sec"><div class="wrap">@include('register.steps', ['step' => 2])
<p class="alert">Runner: <strong>{{ $reg->full_name }}</strong> ({{ $reg->ref }}) &middot; Prices shown in <strong>{{ $cur }}</strong> for {{ $reg->is_vip ? 'VIP runners' : ($reg->nationality->is_ea ? 'East African citizens' : 'non-East African citizens') }}.</p>
@if($errors->any())<div class="alert alert--bad">{{ $errors->first() }}</div>@endif
<form method="post" action="{{ lroute('register.packages.store', $reg->ref) }}" class="form" id="pk">@csrf
<h2>Registration package</h2><div class="grid g3">@foreach($regPackages as $p)<label class="opt"><input type="radio" name="package_id" value="{{ $p->id }}" data-price="{{ $p->priceFor($cur) }}" required @checked(old('package_id', $regPackages->first()->id)==$p->id)><strong>{{ $p->name }}</strong><div class="price">{{ money($p->priceFor($cur), $cur) }}</div><p>{{ $p->description }}</p><ul class="ul-clean">@foreach($p->includes ?? [] as $i)<li>{{ $i }}</li>@endforeach</ul></label>@endforeach</div>
<h2 style="margin-top:30px">Safari + marathon travel (optional)</h2><div class="grid g3"><label class="opt"><input type="radio" name="travel_package_id" value="" data-price="0" checked><strong>No travel package</strong><p>I will arrange my own accommodation and transport.</p></label>
@foreach($travel as $t)<label class="opt"><input type="radio" name="travel_package_id" value="{{ $t->id }}" data-price="{{ $t->priceFor($cur) }}"><strong>{{ $t->name }}</strong> <span class="badge">{{ $t->duration }}</span><div class="price">{{ money($t->priceFor($cur), $cur) }} <small class="mut">/ person</small></div><p>{{ $t->tagline }} ({{ $t->dates }})</p></label>@endforeach</div>
<div style="max-width:260px"><label for="px">Travellers (travel package)</label><select id="px" name="travel_pax">@for($i=1;$i<=7;$i++)<option>{{ $i }}</option>@endfor</select></div>
<div class="card card--hl"><strong>Total: <span id="tot" class="price">-</span></strong></div>
<p><a class="btn btn--ghost" href="{{ lroute('register') }}">&larr; Back</a> <button class="btn btn--gold">{{ __('Next: payment') }} &rarr;</button></p></form></div></section>
@push('scripts')<script>(function(){var f=document.getElementById('pk'),c='{{ $cur }}';function fmt(n){return c+' '+(c==='TZS'?Math.round(n).toLocaleString('en'):n.toLocaleString('en',{minimumFractionDigits:2,maximumFractionDigits:2}))}
function calc(){var r=f.querySelector('[name=package_id]:checked'),t=f.querySelector('[name=travel_package_id]:checked'),n=+f.travel_pax.value||1;document.getElementById('tot').textContent=fmt((r?+r.dataset.price:0)+(t?+t.dataset.price*n:0))}f.addEventListener('change',calc);calc()})();</script>@endpush
@endsection