{{ header }} 
<style>

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  display: none;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}
</style>

{{ column_left }}

<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="summit" form="form-facility" class="btn btn-primary"><i class="fa fa-save"></i> {{ button_save }}</button>
                <a href="{{ cancel }}" class="btn btn-default"><i class="fa fa-reply"></i> {{ button_cancel }}</a>
            </div>
            <h1>{{ heading_title }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li>
                        <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <div class="container-fluid">
        {% if error_warning %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }} </h3>
            </div>
            <div class="panel-body">
                <form action="{{ action }}" method="post" enctype="multipart/form-data" id="form-facility" class="form-horizontal">
                    <input type="hidden" name="store_id" value="{{ store_id }}">
                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-facility_name">{{ entry_facility_name }}</label>
                        <div class="col-sm-5">
                            <input type="text" name="facility_name" class="form-control" id="input-facility_name" placeholder="{{ entry_facility_name }}" value="{{ facility_name }}">
                            {% if error_facility_name %}
                                <div class="text-danger">{{ error_facility_name }}</div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-status">{{ entry_facility_status }}</label>
                        <div class="col-sm-5">
                            <select name="facility_status" id="input-status" class="form-control">
                                <option value="1" {{ facility_status=='1'?'selected':'' }}>Enabled</option>
                                <option value="0" {{ facility_status=='0'?'selected':'' }}>Disabled</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group required">
                        <label class="col-sm-2 control-label" for="input-available">{{ entry_facility_available }}</label>
                        <div class="col-sm-5">
                            <select name="facility_available" id="input-available" class="form-control">
                                <option value="1" {{ facility_available=='1'?'selected':'' }}>All Day</option>
                                <option value="0" {{ facility_available=='0'?'selected':'' }}>Specific Day & Time</option>
                            </select>
                        </div>
                    </div>

                    <div id="facility_availabilities"  style="{{ facility_available=='1'?'display:none;':'' }}">
                    {% for facility_availability_time in facility_availability_times %}
                    

                    {% if (facility_availability_time.times is not empty) and (facility_id is not empty ) %}
                    <div class="col-sm-12" style="width:100%;">

                        <div class="col-sm-2" style="text-align:right;"> 
                        <h3>{{facility_availability_time.clinical_day}}</h3>
                        <label class="switch" >
                        <input type="checkbox" name="facility_availabilities[{{facility_availability_time.clinical_day}}][check_day]" id="check_{{facility_availability_time.clinical_day}}" {% if (facility_availability_time.times is not empty) %} checked="checked" {% endif %}>
                        <span class="slider"></span>
                        </label>
                        </div>
                        <div class="col-sm-10"> 

                        </div>
                    </div>
                    {% elseif (facility_id is not empty ) %}
                    <div class="col-sm-12" style="width:100%;">

                        <div class="col-sm-2" style="text-align:right;"> 
                        <h3>{{facility_availability_time.clinical_day}}</h3>
                        <label class="switch" >
                        <input type="checkbox" name="facility_availabilities[{{facility_availability_time.clinical_day}}][check_day]" id="check_{{facility_availability_time.clinical_day}}" >
                        <span class="slider"></span>
                        </label>
                        </div>
                        <div class="col-sm-10"> 

                        </div>
                    </div>
                    {% elseif (facility_availability_time.check_day is not empty ) %}
                    <div class="col-sm-12" style="width:100%;">

                        <div class="col-sm-2" style="text-align:right;"> 
                        <h3>{{facility_availability_time.clinical_day}}</h3>
                        <label class="switch" >
                        <input type="checkbox" name="facility_availabilities[{{facility_availability_time.clinical_day}}][check_day]" id="check_{{facility_availability_time.clinical_day}}" checked="checked" >
                        <span class="slider"></span>
                        </label>
                        </div>
                        <div class="col-sm-10"> 

                        </div>
                    </div>
                    {% else %}
                    <div class="col-sm-12" style="width:100%;">

                        <div class="col-sm-2" style="text-align:right;"> 
                        <h3>{{facility_availability_time.clinical_day}}</h3>
                        <label class="switch" >
                        <input type="checkbox" name="facility_availabilities[{{facility_availability_time.clinical_day}}][check_day]" id="check_{{facility_availability_time.clinical_day}}" >
                        <span class="slider"></span>
                        </label>
                        </div>
                        <div class="col-sm-10"> 

                        </div>
                    </div>
                    {% endif %}

                    <div name="availability[{{facility_availability_time.clinical_day}}][days]" id="{{facility_availability_time.clinical_day}}" style="display:none;" >
                        <div class="col-sm-2">
                        </div>
                        <div class="col-sm-10">
                        <table id="availability-time-{{facility_availability_time.clinical_day}}" class="table table-striped table-bordered table-hover ">
                            <thead>
                                <tr>
                                    <td>{{ column_start_time }}</td>
                                    <td>{{ column_end_time }}</td>
                                    <td style="width:8%;"></td>
                                </tr>
                            </thead>
                            <tbody>
              				<input type="hidden" class="count_{{facility_availability_time.clinical_day}}" data-add-count="{% if product_count %}{{ product_count }}{% else %}0{% endif %}" data-remove-count="{% if product_count %}{{ product_count }}{% else %}0{% endif %}" data-original-count="0">
                        <input type="hidden" name="facility_availabilities[{{facility_availability_time.clinical_day}}][clinical_day]" id="clinical_day_{{facility_availability_time.clinical_day}}" value="{{facility_availability_time.clinical_day}}">

                                {% for id,time in facility_availability_time.times %}
                                    <tr id="availability-row{{ id }}">
                                    
                                    <td>
                                        <div class="input-group time">
                                            <input type="text" name="facility_availabilities[{{ facility_availability_time.clinical_day }}][times][{{ id }}][start_time]" class="form-control" value="{{ time.start_time }}" placeholder="{{ entry_start_time }}" data-date-format="LT">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </div>
                                        {% if error_start_time['facility_availabilities'][facility_availability_time.clinical_day][id] %}
                                            <div class="text-danger">{{error_start_time['facility_availabilities'][facility_availability_time.clinical_day][id] }}</div>
                                        {% endif %}
                                    </td>

                                    <td>
                                        <div class="input-group time">
                                            <input type="text" name="facility_availabilities[{{ facility_availability_time.clinical_day }}][times][{{ id }}][end_time]" class="form-control" value="{{ time.end_time }}" placeholder="{{ entry_end_time }}" data-date-format="LT">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </div>
                                        {% if error_end_time['facility_availabilities'][facility_availability_time.clinical_day][id] %}
                                            <div class="text-danger">{{ error_end_time['facility_availabilities'][facility_availability_time.clinical_day][id] }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button type="button" onclick="$('#availability-row{{ id }}').remove();" class="btn btn-danger"><i class="fa fa-minus-circle"></i> {{ button_remove }}</button>
                                    </td>
                                </tr>
                                
                                {% endfor %}
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="2"></td>
                                    <td>
                                        <a onclick="addAvailabilityTime('{{facility_availability_time.clinical_day}}');" class="btn btn-primary"><i class="fa fa-plus-circle"></i> {{ button_add }}</a>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                        </div>
                    </div>
                    {% endfor %}
                    </div>


                    <!--<table id="facility_availabilities" class="table table-striped table-bordered table-hover" style="{{ facility_available=='1'?'display:none;':'' }}">
                        <thead>
                            <tr>
                                <td>{{ column_day }}</td>
                                <td>{{ column_start_time }}</td>
                                <td>{{ column_end_time }}</td>
                                <td width="8%"></td>
                            </tr>
                        </thead>
                        <tbody>
                            {% set id = 0 %}
                            {% for availability in facility_availabilities %}
                                <tr id="availability-row{{ id }}">
                                    <td>
                                        <select name="facility_availabilities[{{ id }}][day]" class="form-control">
                                            <option value="">{{ text_select }}</option>
                                            <option value="Sunday" {{ availability.day == 'Sunday' ? 'selected' : ''}}>{{ text_sunday}}</option>
                                            <option value="Monday" {{ availability.day == 'Monday' ? 'selected' : '' }}>{{ text_monday }}</option>
                                            <option value="Tuesday" {{ availability.day == 'Tuesday' ? 'selected' : '' }}>{{ text_tuesday }}</option>
                                            <option value="Wednesday" {{ availability.day == 'Wednesday' ? 'selected' : '' }} >{{ text_wednesday }}</option>
                                            <option value="Thursday" {{ availability.day == 'Thursday' ? 'selected' : ''}}>{{ text_thursday }}</option>
                                            <option value="Friday" {{ availability.day == 'Friday' ? 'selected' : '' }}>{{ text_friday }}</option>
                                            <option value="Saturday {{ availability.day == 'Saturday' ? 'selected' : ''}}">{{ text_saturday }}</option>
                                        </select>
                                        {% if error_day['facility_availabilities'][id] %}
                                            <div class="text-danger">{{error_day['facility_availabilities'][id] }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <div class="input-group time">
                                            <input type="text" name="facility_availabilities[{{ id }}][start_time]" class="form-control" value="{{ availability.start_time }}" placeholder="{{ entry_start_time }}" data-date-format="LT">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </div>
                                        {% if error_start_time['facility_availabilities'][id] %}
                                            <div class="text-danger">{{error_start_time['facility_availabilities'][id] }}</div>
                                        {% endif %}
                                    </td>

                                    <td>
                                        <div class="input-group time">
                                            <input type="text" name="facility_availabilities[{{ id }}][end_time]" class="form-control" value="{{ availability.end_time }}" placeholder="{{ entry_end_time }}" data-date-format="LT">
                                            <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
                                            </span>
                                        </div>
                                        {% if error_end_time['facility_availabilities'][id] %}
                                            <div class="text-danger">{{ error_end_time['facility_availabilities'][id] }}</div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button type="button" onclick="$('#availability-row{{ id }}').remove();" class="btn btn-danger"><i class="fa fa-minus-circle"></i> {{ button_remove }}</button>
                                    </td>
                                </tr>
                                {% set id = id + 1 %}
                            {% endfor%}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="3"></td>
                                <td>
                                    <a onclick="addAvailabilityTime();" class="btn btn-primary"><i class="fa fa-plus-circle"></i> {{ button_add }}</a>
                                </td>
                            </tr>
                        </tfoot>
                    </table>-->
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $('.time').datetimepicker({
            pickDate: false
        });

    $(document).ready(function(){
            if ($('#check_Monday').is(':checked')) {
                $('#Monday').slideDown();
            }

            if ($('#check_Tuesday').is(':checked')) {
                $('#Tuesday').slideDown();
            }

            if ($('#check_Wednesday').is(':checked')) {
                $('#Wednesday').slideDown();
            }

            if ($('#check_Thursday').is(':checked')) {
                $('#Thursday').slideDown();
            }

            if ($('#check_Friday').is(':checked')) {
                $('#Friday').slideDown();
            }

            if ($('#check_Saturday').is(':checked')) {
                $('#Saturday').slideDown();
            }

            if ($('#check_Sunday').is(':checked')) {
                $('#Sunday').slideDown();
            }
        $("#check_Monday").change(function(){
            if($(this).prop("checked")){
            $("#Monday").slideDown();
            }
            else{
            $("#Monday").slideUp();
            }
        });

        $("#check_Tuesday").change(function(){
            if($(this).prop("checked")){
            $("#Tuesday").slideDown();
            }
            else{
            $("#Tuesday").slideUp();
            }
        });

        $("#check_Wednesday").change(function(){
            if($(this).prop("checked")){
            $("#Wednesday").slideDown();
            }
            else{
            $("#Wednesday").slideUp();
            }
        });

        $("#check_Thursday").change(function(){
            if($(this).prop("checked")){
            $("#Thursday").slideDown();
            }
            else{
            $("#Thursday").slideUp();
            }
        });

        $("#check_Friday").change(function(){
            if($(this).prop("checked")){
            $("#Friday").slideDown();
            }
            else{
            $("#Friday").slideUp();
            }
        });

        $("#check_Saturday").change(function(){
            if($(this).prop("checked")){
            $("#Saturday").slideDown();
            }
            else{
            $("#Saturday").slideUp();
            }
        });

        $("#check_Sunday").change(function(){
            if($(this).prop("checked")){
            $("#Sunday").slideDown();
            }
            else{
            $("#Sunday").slideUp();
            }
        });

        $("#check_Monday").change(function(){
            if($(this).prop("checked")){
            $("#Monday").slideDown();
            }
            else{
            $("#Monday").slideUp();
            }
        });

        
    });

        $(document).ready(function(){
            $("#input-available").change(function(){
                if($(this).val() == '1'){
                    $("#facility_availabilities").fadeOut();
                }
                else{
                    $("#facility_availabilities").fadeIn();
                }
            });
        });

            
        function addAvailabilityTime(day){

            var count = $('.count_'+day).attr('data-add-count');


            html = '<tr id="availability-time-row' + count + '">';
                html += '<td><div class="input-group time"><input type="text" name="facility_availabilities['+day+'][times][' + count + '][start_time]" class="form-control" value="" placeholder="{{ entry_start_time }}" data-date-format="LT"><span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span></div></td>';
                html += '<td><div class="input-group time"><input type="text" name="facility_availabilities['+day+'][times][' + count + '][end_time]" class="form-control" value="" placeholder="{{ entry_end_time }}" data-date-format="LT"><span class="input-group-btn"><button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button></span></div></td>';
                html += '<td><button type="button" onclick="$(\'#availability-time-row' + count + '\').remove();" class="btn btn-danger"><i class="fa fa-minus-circle"></i> {{ button_remove }}</button></td>';
                html += '</tr>';

            $('#availability-time-'+day+' tbody').append(html);
                    $('.time').datetimepicker({
                pickDate: false
            });               
            count++;
            $(".count_"+day).attr({'data-add-count': count});
        }
    </script>
</div>
{{  footer }}