@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" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <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;
        }

        /* dropdown */

        .ui-timepicker-container {
            position: absolute;
            overflow: hidden;
            box-sizing: border-box
        }

        .ui-timepicker,
        .ui-timepicker-viewport {
            box-sizing: content-box;
            height: 205px;
            display: block;
            margin: 0
        }

        .ui-timepicker {
            list-style: none;
            padding: 0 1px;
            text-align: center
        }

        .ui-timepicker-viewport {
            padding: 0;
            overflow: auto;
            overflow-x: hidden
        }

        .ui-timepicker-standard {
            font-size: 12px;
            font-family: sans-serif;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border-radius: 0 0 3px 3px;
            box-shadow: 0 0 0 .75px #bbb, 2px 1.5px 3px rgba(0, 0, 0, .16);
            margin: 0;
            padding: 0;
        }

        .ui-timepicker-standard a {
            display: block;
            background: transparent;
            filter: none;
            border: none;
            width: 100%;
            text-align: left;
            border-radius: 0;
            font-size: 11.5px;
            padding: 5px 10px;
            line-height: 18px;
            white-space: nowrap;
            text-decoration: none;
            color: inherit;
        }

        /*Note: do not delete - breaks arrow keys (wut wut) */
        .ui-timepicker-standard .ui-state-hover {
            box-shadow: none;
            border: none;
            text-decoration: none;
            background-color: #555;
            color: #fff;
        }

        .ui-timepicker-standard .ui-menu-item {
            margin: 0;
            padding: 0
        }

        .ui-timepicker-hidden {
            display: none
        }

        .ui-timepicker-no-scrollbar .ui-timepicker {
            border: none
        }

        .container-fluid {
            padding: 0px !important;
        }
    </style>
@section('content')
    <!-- ======= Coming Soon ======= -->
    <section style="background-image: url({{ '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">
                    Priest Request 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('PriestForm-submitPriestRequest') }}" class="contact-form shadow-lg"
                        method="post" enctype="multipart/form-data">
                        @csrf

                        {{-- <!--