@extends('includes.master')
@section('title', 'Rajdhani Mandir')

@section('style-section')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style type="text/css">
        textarea::placeholder {
            color: #008080;
        }

        .form-select {
            color: #2e2e2e;
        }

        .asdfradio {
            --text: #414856;
            --radio: #7C96B2;
            --radio-checked: #0080A1;
            --radio-size: 20px;
            --width: 150px;
            --height: 140px;
            --border-radius: 10px;
            border-radius: var(--border-radius);
            color: var(--text);
            position: relative;
            padding: 6px 0px;
            display: grid;
            grid-template-columns: auto var(--radio-size);
            align-items: center;
            display: -webkit-inline-box;
        }

        .asdfradio label {
            cursor: pointer;
        }

        .asdfradio input[type="radio"] {
            -webkit-appearance: none;
            -moz-appearance: none;
            position: relative;
            height: var(--radio-size);
            width: var(--radio-size);
            outline: none;
            margin: 0;
            cursor: pointer;
            border: 2px solid var(--radio);
            background: transparent;
            border-radius: 50%;
            display: grid;
            justify-self: end;
            justify-items: center;
            align-items: center;
            overflow: hidden;
            transition: border .5s ease;
        }

        .asdfradio input[type="radio"]::before,
        .asdfradio input[type="radio"]::after {
            content: "";
            display: flex;
            justify-self: center;
            border-radius: 50%;
        }

        .asdfradio input[type="radio"]::before {
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--background);
            z-index: 1;
            opacity: var(--opacity, 1);
        }

        .asdfradio input[type="radio"]::after {
            position: relative;
            width: calc(100% /2);
            height: calc(100% /2);
            background: var(--radio-checked);
            top: var(--y, 100%);
            transition: top 0.5s cubic-bezier(0.48, 1.97, 0.5, 0.63);
        }

        .asdfradio input[type="radio"]:checked {
            --radio: var(--radio-checked);
        }

        .asdfradio input[type="radio"]:checked::after {
            --y: 0%;
            animation: stretch-animate .3s ease-out .17s;
        }

        .asdfradio input[type="radio"]:checked::before {
            --opacity: 0;
        }

        .asdfradio input[type="radio"]:checked~input[type="radio"]::after {
            --y: -100%;
        }

        .asdfradio input[type="radio"]:not(:checked)::before {
            --opacity: 1;
            transition: opacity 0s linear .5s;
        }

        @keyframes stretch-animate {
            0% {
                transform: scale(1, 1);
            }

            28% {
                transform: scale(1.15, 0.85);
            }

            50% {
                transform: scale(0.9, 1.1);
            }

            100% {
                transform: scale(1, 1);
            }
        }

        .socials {
            position: fixed;
            display: block;
            left: 20px;
            bottom: 20px;
        }

        .socials>a {
            display: block;
            width: 30px;
            opacity: .2;
            transform: scale(var(--scale, 0.8));
            transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
        }

        .socials>a:hover {
            --scale: 1;
        }

        .select2-container--default .select2-selection--single {
            border: 0px !important;
        }

        .container-fluid {
            padding: 0px !important;
        }

        label {
            color: #6c757d !important;

        }
    </style>
@section('content')
    <!-- ======= Coming Soon ======= -->
    <section
        style="background-image: url({{ asset('assets/img/elegant-background-with-mandala.png') }});background-size: auto;">
        <div class="container-fluid">
            <center>
                <h2 style="font-weight: bold !important; font-size: 35px !important;" class="p-4 bottomborder">
                    Volunteer Registration Form<br />
                    {{-- <img src="{{ asset('assets/img/border.png') }}" class="img-fluid img-responsive" style="width: 20%;" /> --}}
                </h2>
            </center>
            <br />
            <div class="row mb-3">
                <div class="col-md-10 mx-auto d-block">
                    @if (session()->has('failure'))
                        {!! session('failure') !!}
                    @endif

                    @if (session()->has('success'))
                        {!! session('success') !!}
                    @endif
                    <form action="{{ route('add-volunteer') }}" class="contact-form shadow-lg" method="post"
                        enctype="multipart/form-data">
                        @csrf

                        <div class="row">
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">First Name<span class="mandate">*</span>
                                    </legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-user"></i>
                                        <input type="text" class="form-control border-0" placeholder="First Name*"
                                            name="fname" id="fname" required />
                                    </div>
                                </fieldset>
                            </div>

                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Last Name<span class="mandate">*</span>
                                    </legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-user"></i>
                                        <input type="text" class="form-control border-0" placeholder="Last Name*"
                                            name="lname" id="lname" required />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Email<span class="mandate">*</span>
                                    </legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-envelope"></i>
                                        <input type="email" class="form-control border-0" name="email"
                                            placeholder="Email*" required />
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Phone Number<span
                                            class="mandate">*</span>
                                    </legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-phone"></i>
                                        <input type="text" class="form-control border-0" id="volunteerPhone"
                                            name="Phone" placeholder="Phone Number" required />
                                    </div>
                                </fieldset>
                            </div>

                        </div>
                        <div class="row">
                            <span class="reg-form">For Emergency </span>
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Name</legend>
                                    <div class="input-group">
                                        <input type="text" class="form-control border-0" name="Emrg_Contact_Name"
                                            placeholder="Emergency Contact Name" />
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Contact Number</legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-phone"></i>
                                        <input type="text" class="form-control border-0"name="Emrg_Contact_Number"
                                            id="Emrg_Contact_Number" placeholder="Emergency Contact Number" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="col-md-12">
                                    <fieldset class="border">
                                        <legend class="legend-inner float-none w-auto">Address</legend>
                                        <div class="input-group">

                                            <input type="text" class="form-control border-0" id="address"
                                                name="address" placeholder="Address" />
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">County</legend>
                                    <div class="input-group">
                                        <input type="text" class="form-control border-0" id="county"
                                            name="county" placeholder="County" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">State</legend>
                                    <div class="input-group">

                                        <select class="form-control select2 border-0 form-select" name="state"
                                            id="stateSelect">
                                            <option value="" selected disabled>Select State</option>