<cfinclude template="header.cfm">
     <link href="../plugins/bower_components/datatables/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />

<link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

  <div id="page-wrapper">
    <div class="container-fluid">
      <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
          <h4 class="page-title">Family Fun</h4>
        </div>
      
        <!-- /.col-lg-12 -->
      </div>
      <!-- /row -->
      <div class="row">
                <div class="col-sm-12">
          <div class="white-box">



<Cfif parameterexists(url.submit)>
        <cfquery name="updateRecord" datasource="#ds#">
        UPDATE familyfun_organizations
        SET
            organization_name = <cfqueryparam value="#form.organization_name#" cfsqltype="cf_sql_varchar" maxlength="255">,
            address = <cfqueryparam value="#form.address#" cfsqltype="cf_sql_varchar" maxlength="255">,
            address2 = <cfqueryparam value="#form.address2#" cfsqltype="cf_sql_varchar" maxlength="255">,
            city = <cfqueryparam value="#form.city#" cfsqltype="cf_sql_varchar" maxlength="100">,
            state = <cfqueryparam value="#form.state#" cfsqltype="cf_sql_varchar" maxlength="100">,
            zip = <cfqueryparam value="#form.zip#" cfsqltype="cf_sql_varchar" maxlength="20">,
            email = <cfqueryparam value="#form.email#" cfsqltype="cf_sql_varchar" maxlength="255">,
            submitting_personnel_title = <cfqueryparam value="#form.submitting_personnel_title#" cfsqltype="cf_sql_varchar" maxlength="100">,
            phone_number = <cfqueryparam value="#form.phone_number#" cfsqltype="cf_sql_varchar" maxlength="20">,
            website_social_media = <cfqueryparam value="#form.website_social_media#" cfsqltype="cf_sql_varchar" maxlength="255">,
            c3_number = <cfqueryparam value="#form.c3_number#" cfsqltype="cf_sql_varchar" maxlength="50">,
            is_title1_school = <cfqueryparam value="#form.is_title1_school#" cfsqltype="cf_sql_varchar" maxlength="3">,
            age_range = <cfqueryparam value="#form.age_range#" cfsqltype="cf_sql_varchar" maxlength="100">,
            adult_child_ratio = <cfqueryparam value="#form.adult_child_ratio#" cfsqltype="cf_sql_varchar" maxlength="50">        WHERE
            id = <cfqueryparam value="#url.id#" cfsqltype="cf_sql_integer">
    </cfquery>
    <cflocation url="familyfun-organization.cfm" addtoken="no" statuscode="301">
    <cfelse>


<cfquery name="getrecord" datasource="#ds#">
    SELECT * FROM familyfun_organizations
    WHERE id = <cfqueryparam value="#url.id#" cfsqltype="cf_sql_integer">
</cfquery>
<Cfoutput>
<form class="mb-0" action="familyfun-organization-edit.cfm?id=#url.id#&submit=on" method="post">

    <div class="row">
        <div class="col-12 form-group">
            <label for="organization-name">What is the full name of the organization? <small>*</small></label>
            <input type="text" id="organization-name" name="organization_name" value="#getrecord.organization_name#" class="form-control required">
        </div>

        <div class="col-12 form-group">
            <label for="organization-address">What is the full address and contact information of the organization?</label>
            <input type="text" id="organization-address" name="address" value="#getrecord.address#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label for="organization-address2">Address 2</label>
            <input type="text" id="organization-address2" name="address2" value="#getrecord.address2#" class="form-control">
        </div>

        <div class="col-12 col-md-6 form-group">
            <label for="organization-city">City</label>
            <input type="text" id="organization-city" name="city" value="#getrecord.city#" class="form-control">
        </div>

        <div class="col-12 col-md-6 form-group">
            <label for="organization-state">State</label>
            <input type="text" id="organization-state" name="state" value="#getrecord.state#" class="form-control">
        </div>

        <div class="col-12 col-md-6 form-group">
            <label for="organization-zip">Zip</label>
            <input type="text" id="organization-zip" name="zip" value="#getrecord.zip#" class="form-control">
        </div>

        <div class="col-12 col-md-6 form-group">
            <label for="organization-email">Email</label>
            <input type="email" id="organization-email" name="email" value="#getrecord.email#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label for="submitting-personnel-title">Title of submitting personnel</label>
            <input type="text" id="submitting-personnel-title" name="submitting_personnel_title" value="#getrecord.submitting_personnel_title#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label for="organization-phone">Phone Number of organization</label>
            <input type="text" id="organization-phone" name="phone_number" value="#getrecord.phone_number#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label for="organization-website-social">What is the website and social media of the organization?</label>
            <input type="text" id="organization-website-social" name="website_social_media" value="#getrecord.website_social_media#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label for="organization-c3-number">What is the 501C3 number of the organization (if applicable and a copy of your designation may be requested)</label>
            <input type="text" id="organization-c3-number" name="c3_number" value="#getrecord.c3_number#" class="form-control">
        </div>

        <div class="col-12 form-group">
            <label>Are you a Title 1 school? (if applicable)</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="is_title1_school" id="title1-school-yes" value="Yes" <cfif getrecord.is_title1_school eq "Yes">checked</cfif>>
                <label class="form-check-label" for="title1-school-yes">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="is_title1_school" id="title1-school-no" value="No" <cfif getrecord.is_title1_school eq "No">checked</cfif>>
                <label class="form-check-label" for="title1-school-no">No</label>
            </div>
        </div>
        <div class="col-12 form-group">
    <label for="organization-mission">What is the organization’s mission / focus?</label>
    <textarea class="form-control" id="organization-mission" name="mission_focus" rows="5">#getrecord.mission_focus#</textarea>
</div>

<div class="col-12 form-group">
    <label for="organization-age-range">What is the age range for children in the organization?</label>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="age_range[]" id="age-range-0-4" value="0-4yo" <cfif listFind(getrecord.age_range, "0-4yo")>checked</cfif>>
        <label class="form-check-label" for="age-range-0-4">0-4 years old</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="age_range[]" id="age-range-5-10" value="5-10yo" <cfif listFind(getrecord.age_range, "5-10yo")>checked</cfif>>
        <label class="form-check-label" for="age-range-5-10">5-10 years old</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="age_range[]" id="age-range-11-13" value="11-13yo" <cfif listFind(getrecord.age_range, "11-13yo")>checked</cfif>>
        <label class="form-check-label" for="age-range-11-13">11-13 years old</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="age_range[]" id="age-range-14-18" value="14-18yo" <cfif listFind(getrecord.age_range, "14-18yo")>checked</cfif>>
        <label class="form-check-label" for="age-range-14-18">14-18 years old</label>
    </div>
</div>

<div class="col-12 form-group">
    <label for="organization-adult-child-ratio">Adult supervision is required. What is the ratio of adults to kids?</label>
    <input type="text" id="organization-adult-child-ratio" name="adult_child_ratio" value="#getrecord.adult_child_ratio#" class="form-control">
</div>


        <!-- Remaining form fields go here -->

        <div class="col-12 form-group">
            <button class="button button-large button-dark rounded m-0" type="submit" id="template-contactform-submit" name="template-contactform-submit" value="submit">Update</button>
        </div>

    </div>

</form></Cfoutput>
</cfif>

      </div>






      <!-- /.row -->

     <cfinclude template="footer.cfm">

<!-- jQuery -->
<script src="../plugins/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Menu Plugin JavaScript -->
<script src="../plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"></script>

<!--slimscroll JavaScript -->
<script src="js/jquery.slimscroll.js"></script>
<!--Wave Effects -->
<script src="js/waves.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/custom.min.js"></script>
<!-- Plugin JavaScript -->
<script src="../plugins/bower_components/moment/moment.js"></script>
<!-- Clock Plugin JavaScript -->
<script src="../plugins/bower_components/clockpicker/dist/jquery-clockpicker.min.js"></script>
<!-- Color Picker Plugin JavaScript -->
<script src="../plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asColor.js"></script>
<script src="../plugins/bower_components/jquery-asColorPicker-master/libs/jquery-asGradient.js"></script>
<script src="../plugins/bower_components/jquery-asColorPicker-master/dist/jquery-asColorPicker.min.js"></script>
<!-- Date Picker Plugin JavaScript -->
<script src="../plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<!-- Date range Plugin JavaScript -->
<script src="../plugins/bower_components/timepicker/bootstrap-timepicker.min.js"></script>
<script src="../plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script>
// Clock pickers
$('#single-input').clockpicker({
  placement: 'bottom',
  align: 'left',
  autoclose: true,
  'default': 'now'

});

$('.clockpicker').clockpicker({
    donetext: 'Done',

})
  .find('input').change(function(){
    console.log(this.value);
});

$('#check-minutes').click(function(e){
  // Have to stop propagation here
  e.stopPropagation();
  input.clockpicker('show')
      .clockpicker('toggleView', 'minutes');
});
if (/mobile/i.test(navigator.userAgent)) {
  $('input').prop('readOnly', true);
}
// Colorpicker

$(".colorpicker").asColorPicker();
$(".complex-colorpicker").asColorPicker({
    mode: 'complex'
});
$(".gradient-colorpicker").asColorPicker({
    mode: 'gradient'
});
// Date Picker
    jQuery('.mydatepicker, #datepicker').datepicker();
    jQuery('#datepicker-autoclose').datepicker({
        autoclose: true,
        todayHighlight: true
      });

    jQuery('#date-range').datepicker({
        toggleActive: true
      });
    jQuery('#datepicker-inline').datepicker({

        todayHighlight: true
      });

// Daterange picker

$('.input-daterange-datepicker').daterangepicker({
          buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse'
        });
            $('.input-daterange-timepicker').daterangepicker({
                timePicker: true,
                format: 'MM/DD/YYYY h:mm A',
                timePickerIncrement: 30,
                timePicker12Hour: true,
                timePickerSeconds: false,
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse'
            });
            $('.input-limit-datepicker').daterangepicker({
                format: 'MM/DD/YYYY',
                minDate: '06/01/2015',
                maxDate: '06/30/2015',
                buttonClasses: ['btn', 'btn-sm'],
                applyClass: 'btn-danger',
                cancelClass: 'btn-inverse',
                dateLimit: {
                    days: 6
                }
            });
</script>


<!--Style Switcher -->
<script src="../plugins/bower_components/styleswitcher/jQuery.style.switcher.js"></script>
</body>
</html>