<?php $this->load->view('includes/head') ?>
<?php $this->load->view('includes/topbar') ?>
<?php $this->load->view('includes/header') ?>
<link href="<?=base_url('assets/css/select2.min.css');?>" rel="stylesheet" />
<script src="<?=base_url('assets/js/select2.min.js');?>"></script>
<link rel="stylesheet" type="text/css" href="<?=base_url('assets/css/priest-request-form.css');?>">
<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="text-danger">*</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="text-danger">*</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<span class="mandate">*</span></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<span class="mandate">*</span></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="text-danger" >*</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</legend>
                                    <div class="input-group">

                                        <input type="email" class="form-control border-0" id="email" name="email" placeholder="Enter your Email" />
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <fieldset class="border">
                                <legend class="legend-inner float-none w-auto">Phone number
                                <span class="text-danger">*</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') ?>