@extends ('layouts.web')

@section('body_class', 'signup')

@section ('content')

<div class="container">
    <div class="row">
        <div class="col">

            <div class="card">
                <div class="card-header">Sign up</div>
                <div class="card-body">
                    @include('shared.alerts')

                    <form action="{{ route('signup.store', $product) }}" method="POST">
                        @csrf

                        <div class="form-group row">
                            <label class="col-3 col-form-label">
                                Vælg hold
                            </label>
                            <div class="col-9">
                                <select name="team_id" class="form-control">
                                @foreach ($teams as $team)
                                    <option value="{{ $team->id }}">{{ $team->school->name }} - {{ $team->name }} - {{ $team->start->format('j F Y H:i') }}</option>
                                @endforeach
                                </select>
                            </div>
                        </div>

                        @include('shared.input', ['label' => 'Navn', 'name' => 'name', 'value' => old('name')])

                        @include('shared.input', ['label' => 'E-mail', 'name' => 'email', 'value' => old('email'), 'type' => 'email'])

                        @include('shared.input', ['label' => 'CPR nr.', 'name' => 'cpr', 'value' => old('cpr')])

                        @include('shared.input', ['label' => 'Mobil nr.', 'name' => 'mobile', 'value' => old('mobile')])

                        <div class="form-group row">
                            <label class="col-3 col-form-label">
                                Betaling
                            </label>
                            <div class="col-9">
                                <div class="row">
                                    <div class="col-6">
                                        <div class="card border">
                                            <label class="card-body" style="cursor: pointer">
                                                <input type="radio" name="payment" value="1" {{ old('payment', 1) == '1' ? 'checked' : '' }} onchange="checkPayment()" class="mr-4">
                                                Betal nu DKK {{ $product->price }}
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="card border">
                                            <label class="card-body" style="cursor: pointer">
                                                <input type="radio" name="payment" value="2" {{ old('payment') == '2' ? 'checked' : '' }} onchange="checkPayment()" class="mr-4">
                                                Betal senere
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="payment-info" class="{{ old('payment') == '2' ? 'd-none' : '' }}">
                            <hr>

                            @include('shared.input', ['label' => 'Adresse', 'name' => 'address', 'value' => old('address')])

                            @include('shared.input', ['label' => 'Adresse linie 2', 'name' => 'address2', 'value' => old('address2')])

                            @include('shared.input', ['label' => 'Postnr', 'name' => 'zipcode', 'value' => old('zipcode')])

                            @include('shared.input', ['label' => 'By', 'name' => 'city', 'value' => old('city')])

                            @include('shared.input', ['label' => 'Land', 'name' => 'country', 'value' => old('country')])

                            @include('shared.input', ['label' => 'Forældre e-mail (valgfri)', 'name' => 'email_alt', 'value' => old('email_alt')])

                        </div>

                        <div class="form-group row">
                            <div class="col-3">
                            </div>
                            <div class="col-9">
                                <button type="submit" class="btn btn-primary btn-lg">Tilmeld</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script>
function checkPayment() {
    let value = $('input[name=payment]:checked').val();

    if (value == '2') {
        $('#payment-info').addClass('d-none');
    } else {
        $('#payment-info').removeClass('d-none');
    }
}
</script>
@endsection