<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<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: var(--main-color-new-theme);
    }

    .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
}
</style>
<main id="main">
    <!-- ======= Coming Soon ======= -->
    <section style="background-image: url(<?=base_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;">
                    Priest  Request Form<br />
                    <img src="<?= base_url('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">
                    <?php

                    if ($this->session->flashdata('failure')) {
                        echo $this->session->flashdata('failure');
                    }
                    if ($this->session->flashdata('success')) {
                        echo $this->session->flashdata('success');
                    } ?>
                   <form action="<?=base_url('PriestForm/submitPriestRequest')?>" class="contact-form shadow-lg" method="post" enctype="multipart/form-data"> 

                    <!-- <?php echo form_open_multipart('Forms/AddVolunteers', 'class="contact-form shadow-lg"'); ?> -->


                    <div class="row">
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">Specify Purpose<span class="mandate">*</span></legend>
                                <div class="input-group">

                                    <input type="text" class="form-control border-0" placeholder=" Enter Specify Purpose" name="specify" required />
                                </div>
                            </fieldset>
                        </div>

                        <div class="col-md-6">
                            <fieldset class="border">

                                <legend class="legend-inner float-none w-auto">Specialization Detail
                                    <span class="mandate">*</span></legend>
                                <div class="input-group">

                                    <input type="text" class="form-control border-0" placeholder=" Enter Specialization Detail" name="sd" required />

                                </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">Event<span class="mandate">*</span></legend>
                                    
                                    <div class="input-group">
                                        <input type="Text" class="form-control border-0" id="Event" name="Event" placeholder="Enter Event"  required/>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">No of Priest</legend>
                                <div class="input-group">

                                    <select id="priest" name="priestname" style="color:black!important;" class="form-control rounded  form-select border-0" data-gtm-form-interact-field-id="0">
                                        <option value=" " selected="" disabled="">No of Priest</option>
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>

                                    </select>
                                </div>
                            </fieldset>
                        </div>

                    </div>

                    <!-- start date -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="col-md-12">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Start Date</legend>
                                    <div class="input-group">

                                        <input type="text" class="form-control border-0"  name="startDailyDate" id="startDailyDate" placeholder="Start Date" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">End Date</legend>
                                <div class="input-group">

                                    <input type="text" class="form-control border-0" name="endDailyDate" id="endDailyDate"  placeholder="End Date" />

                                </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">Start Time</legend>
                                    <div class="input-group" style="padding:5px">

                                        <input type="text" id="eventTime" name="eventTime" type="text" class="hasTimepicker start border-0"  placeholder="Start Time" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">End Time</legend>
                                <div class="input-group" style="padding:5px">
                                    <input type="text" id="eventEndTime" name="eventEndTime"  class="hasTimepicker end border-0"  placeholder="End Time" />

                                </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">Location<span class="mandate">*</span></legend>
                                    
                                    <div class="input-group">

                                        <input type="text" class="form-control border-0" id="Location" name="Location" placeholder="Enter Location" required />

                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">Language</legend>
                                <div class="input-group">
                                    <input type="text" class="form-control border-0" id="Language" name="Lanuage" placeholder="Enter  Language" />
                                </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">Contract Agreement</legend>
                                    <div class="input-group">

                                        <input type="file" class="form-control border-0" id="Img" name="ContractAgreementDoc" required>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">salary Info</legend>
                                <div class="input-group">
                                    <input type="text" class="form-control border-0" id="SalleryInfo" name="Sallery" placeholder="Enter Sallery Info" />
                                </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">Upload Resume</legend>
                                    <div class="input-group">

                                        <input type="file" class="form-control border-0" id="Img" name="uploadresume" placeholder="Enter Upload Resume" required />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                            <legend class="legend-inner float-none w-auto">Contact Name<span class="mandate">*</span></legend>
                           
                                
                                <div class="input-group">
                                    <input type="text" class="form-control border-0" id="ContactName" name="cname" placeholder="Enter Contact Name" required />
                                </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">Email<span class="mandate">*</span></legend>         
                                    
                                    <div class="input-group">

                                        <input type="email" class="form-control border-0" id="email" name="email" placeholder="Enter your Email"  oninput="this.value = this.value.toLowerCase();"/>
                                    </div>
                                </fieldset>
                            </div>
                        </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">
                                    <input type="text" class="form-control border-0" id="volunteerPhone"
                                     name="Phone" placeholder="Phone Number" required />
                                </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">Temple Name</legend>
                                    <div class="input-group">

                                        <input type="Text" class="form-control border-0" id="Tname" name="tname" placeholder="Enter Temple Name" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">Temple Address</legend>
                                <div class="input-group">
                                    <input type="Text" class="form-control border-0" id="tampleAddress" name="templeAddress" placeholder="Enter Temple Address" />
                                </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">Accommodation Provided </legend>
                                    <div class="input-group">
                                        <select class="form-control select2 border-0 form-select" name="AccommodationProvided" id="AccommodationProvided">
                                            <option value="" selected disabled>Enter Accommodation Provided</option>
                                            <option value="YES">YES</option>
                                            <option value="NO">NO</option>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="col-md-12">
                                <fieldset class="border">
                                    <legend class="legend-inner float-none w-auto">Travel Expense Include </legend>
                                    <div class="input-group">
                                        <select class="form-control select2 border-0 form-select" name="TravelExpenseInclude" id="TravelExpenseInclude">
                                            <option value="" selected disabled>Enter Travel Expense Include</option>
                                            <option value="YES">YES</option>
                                            <option value="NO">NO</option>
                                        </select>
                                    </div>
                                </fieldset>
                            </div>
                        </div>

                    


                    <!-- Modal T&C -->

                    <!-- Modal T&C Close -->



                    <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 -->
</main>
<!-- End #main -->
<script src="<?=base_url('assets/js/jquery-ui.min.js');?>"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.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);
        });

        // Listen for the change event of the checkbox
        $('.TermConditions').change(function() {
            // Check if the checkbox is checked
            if ($(this).is(':checked')) {
                $('.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
        });
    });




    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");
        }
    }

    // Attach event handler to the "volunteerPhone" input field
    document.getElementById("volunteerPhone").onkeyup = function(e) {
        phone_number_check(this, e);
    };

    // Attach event handler to the "Emrg_Contact_Number" input field




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

        var stateCode = $(this).val();
        $.ajax({
            url: "<?= base_url('Home/GetCity') ?>",
            type: "POST",
            // dataType: "json",
            data: {
                'stateCode': stateCode
            },
            success: function(data) {
                $("#city").html(data);
            }
        });

    });

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

    $(document).ready(function() {
        window.scrollTo({
            top: 215,
            behavior: "smooth"
        });
    });
</script>
<script>
    $(function() {
        var dateFormat = "mm/dd/yy",
            from = $("#startDailyDate")
            .datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1
            })
            .on("change", function() {
                var selectedDate = getDate(this);
                if (selectedDate) {
                    selectedDate.setDate(selectedDate.getDate() + 1);
                    to.datepicker("option", "minDate", selectedDate);
                }
            }),
            to = $("#endDailyDate").datepicker({
                defaultDate: "+1w",
                changeMonth: true,
                numberOfMonths: 1
            })
            .on("change", function() {
                from.datepicker("option", "maxDate", getDate(this));
            });

        function getDate(element) {
            var date;
            try {
                date = $.datepicker.parseDate(dateFormat, element.value);
            } catch (error) {
                date = null;
            }

            return date; 
        }
    });

// time picker

var $begin = $('.hasTimepicker.start');
var $end = $('.hasTimepicker.end');
var $input = $('.timeSum');

var timeOptions = {
interval: 15,
dropdown: true,
change: function(time) {
  sumHours();
}
}

$begin.timepicker(timeOptions);

$end.timepicker(timeOptions);

$(document).on('focus', $end, function() {
$(this).select();  // select entire text on focus
});

$begin.on("click, focus", function () {
$(this).select();
});


function sumHours () {

var time1 = $begin.timepicker().getTime();
var time2 = $end.timepicker().getTime();

if ( time1 && time2 ) {

  if ( time1 > time2 ) {
    //Correct the day so second entry is always 
    //after first, as in midnight shift. Use a new 
    //date object so original is not incremented.
    v = new Date(time2);
    v.setDate(v.getDate() + 1);
  } else {
    v = time2;
  }

  var diff = ( Math.abs( v - time1) / 36e5 ).toFixed(2);
  $input.val(diff); 
  
} else {

  $input.val(''); 

}
}

</script>



<?php $this->load->view('includes/footer') ?>
<?php $this->load->view('includes/script') ?>