@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>
                                            <?php
                                    $GetState = GetState();
                                    $keys = array_column($GetState, 'refDataName');
                                    array_multisort($keys, SORT_ASC, $GetState);

                                    foreach ($GetState as $state) { ?>
                                            <option value="<?= @$state->refDataName ?>"><?= @$state->refDataName ?>
                                            </option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">City</legend>
                                    <div class="input-group">
                                        <select class="form-control select2 border-0 form-select" name="city"
                                            id="city">
                                            <option value="" selected disabled>Select City</option>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Zipcode</legend>
                                    <div class="input-group">
                                        <i class="fa fa2 fa-file"></i>
                                        <input type="text" class="form-control border-0" name="zipcode"
                                            placeholder="Zipcode" maxlength="6" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Volunteer Area</legend>
                                    <div class="input-group">
                                        <select name="VolunteerArea" id="VolunteerArea"
                                            class="form-control select2 border-0 form-select">
                                            <option value=" " selected disabled>Select Volunteer Area</option>
                                            <?php $VolunteerTypes = VolunteerTypes() ;

                                    foreach($VolunteerTypes as $item){ ?>
                                            <option value="<?= $item->refDataName ?>"><?= $item->refDataName ?></option>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Date of Birth</legend>
                                    <div class="input-group">
                                        <labe class="fa fa-calendar" for="dob"></labe>
                                        <input type="text" name="dob" id="dob"
                                            class="form-control datepicker border-0" placeholder="MM/DD/YYYY"
                                            aria-label="dob" aria-describedby="basic-addon1" autocomplete="off">
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-4">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Select Gender</legend>
                                    <div class="input-group">
                                        <div class="asdfradio">
                                            <label for="male">Male</label>
                                            <input id="male" type="radio" name="gender" value="MALE"
                                                checked="" style="margin-left:5px">
                                            <label for="female" style="margin-left:20px">Female</label>
                                            <input id="female" type="radio" name="gender" value="FEMALE"
                                                style="margin-left:5px">
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-7">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">How many hours per week are you
                                        committed to
                                        volunteer?</legend>
                                    <div class="input-group">
                                        <input type="number" class="form-control border-0" name="hours"
                                            placeholder="Hrs Per Week" />
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-md-5">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Add IDcard</legend>
                                    <div class="input-group">

                                        <input type="file" name="idcard" class="form-control border-0" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Notes</legend>
                                    <div class="input-group">
                                        <textarea name="notes" class="form-control border-0" placeholder="Notes"></textarea>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <!-- Modal T&C -->
                        <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
                            aria-hidden="true">
                            <div class="modal-dialog modal-dialog-scrollable">
                                <div class="modal-content">
                                    <div class="modal-header" style="border-top:0">
                                        <h5 class="modal-title fw-bold text-center" id="exampleModalScrollableTitle">SSVT
                                            VOLUNTEER CODE OF CONDUCT</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                            aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">

                                        <section>
                                            <!-- <h6 class="fw-bold">2. Donations and Sponsorships</h6 class="fw-bold"> -->
                                            <p style="font-size: 14px!important;text-align: justify;">Volunteers are at the
                                                heart of SSVT. Outstanding Volunteerism is what makes SSVT a temple
                                                that is loved by all devotees. SSVT’s volunteers exemplify the sentiments in
                                                Bhagavad Gita 5.8
                                                that talks about humble and selfless Karma Yogi. SSVT appreciates the time
                                                volunteers put in
                                                to serve the temple and acknowledges that their selfless service has
                                                sustained
                                                the temple
                                                operations and makes it one of the leading temples in the region. We thank
                                                you
                                                for your great
                                                service. We request the volunteers to abide by the temple code of conduct
                                                and
                                                sign this form for
                                                our record.</p>
                                            <strong style="font-size: 14px!important;text-align: justify;"
                                                class="fw-bold">I,
                                                <span class="v_name fw-bold"></span>, want to serve the Devatas at SSVT,
                                                and the devotee community at SSVT as a Seva. I recognize that my primary
                                                responsibility is to project a positive, professional image and provide the
                                                best
                                                possible
                                                assistance and information to the devotees, public, staff and other
                                                volunteers
                                                at all times
                                                (including through verbal and electronic communications). I understand that
                                                I
                                                will be
                                                held to each of the following:
                                            </strong>
                                        </section>
                                        <section>
                                            <!-- <h6 class="fw-bold">1. Acceptance of Terms</h6 class="fw-bold"> -->
                                            <ol>
                                                <li>
                                                    <strong>Mutual Respect, Integrity and Courtesy</strong><br>
                                                    <span style="text-align: justify;">● As a Volunteer, I will treat each
                                                        other, devotees and employees (staff & Priests) of SSVT with
                                                        respect,
                                                        trust, integrity and dignity.</span><br>
                                                    <span style="text-align: justify;">● I will abide by the following
                                                        creed,
                                                        <strong>“CARE” - C(Courteous) A(Attentive) R(Responsive) and
                                                            E(Empathetic)”</strong> while working with devotees, other
                                                        volunteers, and employees</span><br>
                                                    <span style="text-align: justify;">● I understand anger, outbursts, and
                                                        abusive behavior are a poison for spirituality; such unbecoming
                                                        behavior
                                                        will not be tolerated in the temple, and by the Board of
                                                        Trustees</span>
                                                </li>
                                                <li><strong>Use of Respectful Language</strong><br>
                                                    <span style="text-align: justify;">● I will abide by the following
                                                        creed,
                                                        <strong>“CARE” - C(Courteous) A(Attentive) R(Responsive) and
                                                            E(Empathetic)”</strong> while working with devotees, other
                                                        volunteers, and employees</span><br>
                                                    <span style="text-align: justify;">● I understand anger, outbursts, and
                                                        abusive behavior are a poison for spirituality; such unbecoming
                                                        behavior
                                                        will not be tolerated in the temple, and by the Board of
                                                        Trustees</span>
                                                </li>

                                                <li>
                                                    <strong>Reporting Protocols</strong><br>
                                                    <span style="text-align: justify;">● Differences of opinion shall be
                                                        resolved with mutual and cordial discussions and by following
                                                        appropriate reporting protocols.
                                                    </span><br>
                                                    <span style="text-align: justify;">
                                                        ● If the differences cannot be resolved with mutual discussions,
                                                        then I
                                                        will escalate the issue to the General Manager or Vice Chair of
                                                        Operations.
                                                    </span><br>
                                                    <span style="text-align: justify;">● Any violation of the code of
                                                        conduct
                                                        by the volunteer will result in a warning notice that will be sent
                                                        by
                                                        the Vice Chair of Operations to the volunteer.</span><br>
                                                    <span style="text-align: justify;">● Second such incident will result
                                                        in a
                                                        referral of the incident to the Ombudsperson by the
                                                        Chairperson.</span>
                                                </li>
                                            </ol>
                                            <strong class="mb-4">I have read the SSVT Volunteer Code of Conduct and
                                                understand that I will be held accountable for my actions. </strong>

                                            <div class="row">
                                                <div class="col-md-6">
                                                    <span>Accepted: <span class="v_name fw-bold"></span></span>
                                                </div>
                                                <div class="col-md-6">
                                                    <span>Date:<?= date('m/d/Y') ?></span>
                                                </div>
                                            </div>
                                        </section>

                                        <!-- Add more sections for other terms and conditions as needed -->
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-success" id="accept"
                                            style="padding: 0px 9px;color: white;">Accept</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Modal T&C Close -->

                        <div class="row">
                            <div class="col-md-12">
                                <style type="text/css">
                                    .tacbox {
                                        display: block;
                                        padding: 1em;
                                        border: 3px solid #ddd;
                                        background-color: #eee;
                                        max-width: 100%;
                                    }

                                    .tnc {
                                        height: 2em;
                                        width: 2em;
                                        vertical-align: middle;
                                    }
                                </style>
                                <div class="tacbox">
                                    <input id="TermConditions" type="checkbox" class="tnc TermConditions" required />
                                    <label for="checkbox" class="TermConditions"><a href="javascript:void(0)"
                                            class="text-danger">Please Accept Our Terms and Conditions.</a></label>
                                </div>
                            </div>
                        </div>

                        <div class="submit-button-wrapper">
                            <input type="submit" value="SUBMIT" class="btn btn-success mx-3 mt-4" />
                            <input type="reset" value="CANCEL" class="btn btn-cancel mx-3 mt-4"
                                style="background: gray;" />
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- End Coming Soon -->
@endsection
<script src="{{ asset('assets/js/jquery-3.6.0.min.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function() {
        // Listen for the click event on the "Accept" button
        $('#accept').click(function() {
            // Close the modal
            $('#exampleModal').modal('hide');
            // Check the checkbox
            $('.TermConditions').prop('checked', true);
        });


    });

    $(document).ready(function() {
        // Listen for the change event of the checkbox
        $('.TermConditions').change(function() {
            //alert();
            var full_name = $("#fname").val() + ' ' + $("#lname").val();
            $(".v_name").text(full_name);
            // Check if the checkbox is checked
            if ($(this).is(':checked')) {
                // alert();
                $('.TermConditions').prop('checked', false);
                // Show the modal when the checkbox is checked
                $('#exampleModal').modal('show');
            }
        });
    });

    $(document).on('focus', '.datepicker', function() {
        $(this).datepicker({
            dateFormat: "mm/dd/yy",
            changeMonth: true,
            changeYear: true,
            yearRange: "-70:+0",
            maxDate: new Date(),
            onSelect: function(dateText) {
                console.log("Selected date:", dateText);
                console.log(dateText);
                $(this).val(dateText);
            },
            autocomplete: "off" // Turn off auto-suggestion
        });
    });

    $(document).ready(function() {
        function phone_formatting(ele, restore) {
            var new_number,
                selection_start = ele.selectionStart,
                selection_end = ele.selectionEnd,
                number = ele.value.replace(/\D/g, "");
            if (number.length > 2) {
                new_number = number.substring(0, 3) + "-";
                if (number.length === 4 || number.length === 5) {
                    new_number += number.substr(3);
                } else if (number.length > 5) {
                    new_number += number.substring(3, 6) + "-";
                }
                if (number.length > 6) {
                    new_number += number.substring(6);
                }
            } else {
                new_number = number;
            }
            ele.value = new_number.length > 12 ? new_number.substring(12, 0) : new_number;
            document.getElementById("msg").innerHTML = "<p>Selection is: " + selection_end +
                " and length is: " + new_number
                .length + "</p>";

            if ((new_number.slice(-1) === "-" && restore === false && new_number.length === 8 &&
                    selection_end === 7) || (
                    new_number.length === 4 && selection_end === 3)) {
                selection_start = new_number.length;
                selection_end = new_number.length;
            } else if (restore === "revert") {
                selection_start--;
                selection_end--;
            }
            ele.setSelectionRange(selection_start, selection_end);
        }

        function phone_number_check(field, e) {
            var key_code = e.keyCode,
                key_string = String.fromCharCode(key_code),
                press_delete = false,
                dash_key = 189,
                delete_key = [8, 46],
                direction_key = [33, 34, 35, 36, 37, 38, 39, 40],
                selection_end = field.selectionEnd;

            // delete key was pressed
            if (delete_key.indexOf(key_code) > -1) {
                press_delete = true;
            }

            // only force formatting is a number or delete key was pressed
            if (key_string.match(/^\d+$/) || press_delete) {
                phone_formatting(field, press_delete);
            }
            // do nothing for direction keys, keep their default actions
            else if (direction_key.indexOf(key_code) > -1) {
                // do nothing
            } else if (dash_key === key_code) {
                if (selection_end === field.value.length) {
                    field.value = field.value.slice(0, -1);
                } else {
                    field.value = field.value.substring(0, selection_end - 1) + field.value.substr(
                        selection_end);
                    field.selectionEnd = selection_end - 1;
                }
            }
            // all other non numerical key presses, remove their value
            else {
                e.preventDefault();
                //    field.value = field.value.replace(/[^0-9\-]/g,'')
                phone_formatting(field, "revert");
            }
        }

        document.getElementById("volunteerPhone").onkeyup = function(e) {
            phone_number_check(this, e);
        };

        document.getElementById("Emrg_Contact_Number").onkeyup = function(e) {
            phone_number_check(this, e);
        };
    });


    // Attach event handler to the "volunteerPhone" input field
    $(document).ready(function() {

    });


    // Attach event handler to the "Emrg_Contact_Number" input field
    $(document).ready(function() {

    });



    $(document).ready(function() {
        $('#stateSelect').change(function() {

            var stateCode = $(this).val();
            // alert(stateCode);
            $.ajax({
                url: "{{ url('getcity') }}",
                type: "POST",
                // dataType: "json",
                data: {
                    'stateCode': stateCode
                },
                success: function(data) {
                    $("#city").html(data);
                }
            });

        });
    });

    $(document).ready(function() {

        $('#stateSelect, #city, #VolunteerArea').select2()

    });

    $(document).ready(function() {
        window.scrollTo({
            top: 215,
            behavior: "smooth"
        });
    });
</script>
