@extends('layouts.user', ['header' => true, 'nav' => true, 'demo' => true, 'settings' => $settings])

{{-- Custom CSS --}}
@section('css')
<style>
    .filter-blur {
        filter: blur(0.5px);
    }
</style>
@endsection

@section('content')
<div class="page-wrapper">
    <!-- Page title -->
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        {{ __('Overview') }}
                    </div>
                    <h2 class="page-title">
                        {{ __('Choose a Card Type') }}
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-xl">
            <div class="row row-deck row-cards">
                <div class="col-12 col-lg-4">
                    <label class="form-imagecheck mb-2">
                        <input name="card-type" type="radio" value="business" class="form-imagecheck-input"
                            onclick="chooseCardTpe(this)">
                        <span class="form-imagecheck-figure">
                            <img src="{{ asset("backend/img/vCards/template-3.png") }}" alt="{{ __('Business') }}"
                                class="form-imagecheck-image filter-blur">
                        </span>
                        <h1 class="text-center mt-3">{{ __('Business') }}</h1>
                    </label>
                </div>
                <div class="col-12 col-lg-4">
                    <label class="form-imagecheck mb-2">
                        <input name="card-type" type="radio" value="personal" class="form-imagecheck-input"
                            onclick="chooseCardTpe(this)">
                        <span class="form-imagecheck-figure">
                            <img src="{{ asset("backend/img/vCards/personal.png") }}" alt="{{ __('Personal') }}"
                                class="form-imagecheck-image filter-blur">
                        </span>
                        <h1 class="text-center mt-3">{{ __('Personal') }}</h1>
                    </label>
                </div>
                <div class="col-12 col-lg-4">
                    <label class="form-imagecheck mb-2">
                        <input name="card-type" type="radio" value="video" class="form-imagecheck-input"
                            onclick="chooseCardTpe(this)">
                        <span class="form-imagecheck-figure">
                            <img src="{{ asset("backend/img/vCards/personal.png") }}" alt="{{ __('Video') }}"
                                class="form-imagecheck-image filter-blur">
                        </span>
                        <h1 class="text-center mt-3">{{ __('Video') }}</h1>
                    </label>
                </div>
            </div>
        </div>
    </div>
    @include('user.includes.footer')
</div>

{{-- Custom JS --}}
@push('custom-js')
<script>
    function chooseCardTpe(selectedCard) {
    var selectedCardValue = selectedCard.value;
    if (selectedCardValue == "business") {
        window.location = `{{ route('user.create.card', 'type=business') }}`;
    } else if (selectedCardValue == 'personal'){
        window.location = `{{ route('user.create.card', 'type=personal') }}`;
    } else {
        window.location = `{{ route('user.create.card', 'type=video') }}`;
    }
}
</script>
@endpush
@endsection