<script src="<?= asset_url('assets/js/backend_services_helper.js') ?>"></script>
<script src="<?= asset_url('assets/js/backend_categories_helper.js') ?>"></script>
<script src="<?= asset_url('assets/js/backend_services.js') ?>"></script>
<script>
    var GlobalVariables = {
        csrfToken     : <?= json_encode($this->security->get_csrf_hash()) ?>,
        baseUrl       : <?= json_encode($base_url) ?>,
        dateFormat    : <?= json_encode($date_format) ?>,
        timeFormat    : <?= json_encode($time_format) ?>,
        services      : <?= json_encode($services) ?>,
        categories    : <?= json_encode($categories) ?>,
        user          : {
            id        : <?= $user_id ?>,
            email     : <?= json_encode($user_email) ?>,
            role_slug : <?= json_encode($role_slug) ?>,
            privileges: <?= json_encode($privileges) ?>
        }
    };

    $(document).ready(function() {
        BackendServices.initialize(true);
    });
</script>

<div id="services-page" class="container-fluid backend-page">
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#services" aria-controls="services" role="tab" data-toggle="tab"><?= lang('services') ?></a></li>
       <!-- <li role="presentation"><a href="#categories" aria-controls="categories" role="tab" data-toggle="tab"><?= lang('categories') ?></a></li>-->
    </ul>

    <div class="tab-content">

        <!-- SERVICES TAB -->

        <div role="tabpanel" class="tab-pane active" id="services">
            <div class="row">
                <div id="filter-services" class="filter-records column col-xs-12 col-sm-5">
                    <form>
                        <div class="input-group">
                            <input type="text" class="key form-control">

                            <span class="input-group-addon">
                        <div>
                            <button class="filter btn btn-default" type="submit" title="<?= lang('filter') ?>">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                            <button class="clear btn btn-default" type="button" title="<?= lang('clear') ?>">
                                <span class="glyphicon glyphicon-repeat"></span>
                            </button>
                        </div>
                    </span>
                        </div>
                    </form>

                    <h3><?= lang('services') ?></h3>
                    <div class="results"></div>
                </div>

                <div class="record-details column col-xs-12 col-sm-5">
                    <div class="btn-toolbar">
                        <div class="add-edit-delete-group btn-group">
                            <button id="add-service" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus"></span>
                                <?= lang('add') ?>
                            </button>
                            <button id="edit-service" class="btn btn-default" disabled="disabled">
                                <span class="glyphicon glyphicon-pencil"></span>
                                <?= lang('edit') ?>
                            </button>
                            <button id="delete-service" class="btn btn-default" disabled="disabled">
                                <span class="glyphicon glyphicon-remove"></span>
                                <?= lang('delete') ?>
                            </button>
                        </div>

                        <div class="save-cancel-group btn-group" style="display:none;">
                            <button id="save-service" class="btn btn-primary">
                                <span class="glyphicon glyphicon-ok"></span>
                                <?= lang('save') ?>
                            </button>
                            <button id="cancel-service" class="btn btn-default">
                                <span class="glyphicon glyphicon-ban-circle"></span>
                                <?= lang('cancel') ?>
                            </button>
                        </div>
                    </div>

                    <h3><?= lang('details') ?></h3>

                    <div class="form-message alert" style="display:none;"></div>

                    <input type="hidden" id="service-id">

                    <div class="form-group">
                        <label for="service-name"><?= lang('name') ?> *</label>
                        <input id="service-name" class="form-control required" maxlength="128">
                    </div>

                    <div class="form-group">
                        <label for="service-duration"><?= lang('duration_minutes') ?> *</label>
                        <input id="service-duration" class="form-control required" type="number" min="15">
                    </div>

                    <div class="form-group">
                        <label for="service-price"><?= lang('price') ?> *</label>
                        <input id="service-price" class="form-control required">
                    </div>

                    <div class="form-group">
                        <label for="service-currency"><?= lang('currency') ?></label>
                        <input id="service-currency" class="form-control" maxlength="32">
                    </div>

                    <div class="form-group" style="display:none">
                        <!--<label for="service-category"><?= lang('category') ?></label>-->
                        <select id="service-category" class="form-control"></select>
                    </div>

                    <div class="form-group">
                       <label for="service-availabilities-type">Time Slot Intervals</label>
                        <select id="service-availabilities-type" class="form-control" hidden>
                            <option value="<?= AVAILABILITIES_TYPE_FLEXIBLE ?>">
                                Flexible (every 15 mins *adjusts upon booking)
                            </option>
                            <option value="<?= AVAILABILITIES_TYPE_FIXED ?>">
                                Fixed (matches Duration time)
                            </option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="service-attendants-number"><?= lang('attendants_number') ?> *</label>
                        <input id="service-attendants-number" class="form-control required" type="number" min="1">
                    </div>
                    
                                        <div class="form-group">
                        <label for="service-description"><?= lang('description') ?></label>
                        <textarea id="service-description" rows="4" class="form-control"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="service-checkboxterms">Service Checkbox Verbiage</label>
                        <input id="service-checkboxterms" class="form-control" type="text">
                    </div>
                    
<br><strong><h5 >WAITLIST FUNCTION </h5></strong><br>


                    <div class="form-group">
                        <label for="service-waitlistonofffunction">Waitlist Functionality * </label>
                        <select id="service-waitlistonofffunction" class="form-control">
                                                        <option value="OFF" name="OFF">OFF</option>
                            <option value="ON" name="ON" required>ON</option>
                        </select>
                    </div>
                
            
    
                    <!-- DONT PROVIDE THIS ANYMORE START --> 
                    <div class="form-group">
                        <label for="service-waitlist_confirm_email_header" hidden>Waitlist Confirm Email Header </label>
                        <textarea id="service-waitlist_confirm_email_header" rows="4" class="form-control" style="display:none;"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="service-waitlist_confirm_email_desc" hidden>Waitlist Confirm Email Description </label>
                        <textarea id="service-waitlist_confirm_email_desc" rows="4" class="form-control" style="display:none;"></textarea>
                    </div>
                    <!-- DONT PROVIDE THIS ANYMORE END  --> 

                    

                    <div class="form-group">
                        <label for="service-waitlist_doses" id="service-waitlist_doseslabel">Waitlist Service Dose Inventory - What is your inventory starting on the waitlist service doses date below? * </label>
                        <input type="number" id="service-waitlist_doses" name="service-waitlist_doses" class="form-control">
                    </div>
                    
                    <div class="form-group">
                        <label for="service-waitlist_doses_date" id="service-waitlist_doses_datelabel">Waitlist Service Doses Date - yyyy-mm-dd **date system starts counting appointments for dose inventory *</label>
                        <input type="date" name="service-waitlist_doses_date" id="service-waitlist_doses_date" class="form-control">
                    </div> 
                    
                    <div class="form-group">
                        <label for="service-waitlist_doses_percentage" id="service-waitlist_doses_percentagelabel">Waitlist Doses Multiplier The following number is a multiplier for the number of doses. (e.g. if you have 20 available doses and the number below is 1, it will send out 20 emails. 
                        If you want it to send out 40 emails, the number below would be set to 2. Please set the number to what you are comfortable with.)* </label>
                        <input type="number" id="service-waitlist_doses_percentage" name="service-waitlist_doses_percentage" class="form-control">

                    </div>
                    
                    <div class="form-group">
                        <label for="service-waitlist_time_to_book" id="service-waitlist_time_to_booklabel">IN MINUTES: This is how long you want to give your patients to book an appointment before the appointment is available to others. WE DO NOT RECOMMEND MAKING THIS LOWER THAN 12 - 24  HOURS DUE TO POTENTIAL DELAYS IN EMAILS BEING SENT *</label>
                        <input type="number" id="service-waitlist_time_to_book" name="service-waitlist_time_to_book" class="form-control">

                    </div>
                    
                    
                    
                    <div class="form-group">
                        <label for="service-waitlist_reminder_email_header" id="service-waitlist_reminder_email_headerlabel">Waitlist Reminder Email Subject (what you want the subject of the email to be when telling customers there are more doses) *</label>
                        <textarea id="service-waitlist_reminder_email_header" rows="4" class="form-control"></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="service-waitlist_reminder_email_desc" id="service-waitlist_reminder_email_desclabel">Waitlist Reminder Email Body (what you want the body of the email to say when telling the customers there are more doses) *</label>
                        <textarea id="service-waitlist_reminder_email_desc" rows="4" class="form-control"></textarea>
                    </div>

<!-- Service Link fields 1-->

<strong><h5 >FORMS FOR FRONTEND - **show up on success page after booking an appointment </h5></strong><br>
             
                    <div class="form-group">
                        <label for="service-linkdescription"  title="<?= lang('manage_appointment_record_hint') ?>">Service Link Description Form 1</label>
                        <textarea id="service-linkdescription" rows="4" class="form-control"></textarea>       
                    </div>

                    <div class="form-group">
                        <label for="service-linkname">Service Link Name Form 1</label>
                        <textarea id="service-linkname" rows="4" class="form-control"></textarea>       
                    </div>
                    
                                        <div class="form-group">
                        <label for="service-link">Service Link Form 1</label>
                        <textarea id="service-link" rows="4" class="form-control"></textarea>       
                        
                    </div>
                    
<!-- Service Link fields 2-->
                    

                    <div class="form-group">
                        <label for="service-linkdescription2">Service Link Description Form 2</label>
                        <textarea id="service-linkdescription2" rows="4" class="form-control"></textarea>       
                    </div>

                    <div class="form-group">
                        <label for="service-linkname2">Service Link Name Form 2</label>
                        <textarea id="service-linkname2" rows="4" class="form-control"></textarea>       
                    </div>
                    
                    
                    <div class="form-group">
                        <label for="service-link2">Service Link Form 2</label>
                        <textarea id="service-link2" rows="4" class="form-control"></textarea>       
                        
                    </div>
                    
<!-- Service Link fields 3-->
                    

                    <div class="form-group">
                        <label for="service-linkdescription3">Service Link Description Form 3</label>
                        <textarea id="service-linkdescription3" rows="4" class="form-control"></textarea>       
                    </div>

                    <div class="form-group">
                        <label for="service-linkname3">Service Link Name Form 3</label>
                        <textarea id="service-linkname3" rows="4" class="form-control"></textarea>       
                    </div>
                    
                    
                    <div class="form-group">
                        <label for="service-link3">Service Link Form 3</label>
                        <textarea id="service-link3" rows="4" class="form-control"></textarea>       
                        
                    </div>
                    


                    


                    <p id="form-message" class="text-danger">
                        <em><?= lang('fields_are_required') ?></em>
                    </p>
                </div>
            </div>
        </div>

        <!-- CATEGORIES TAB -->

        <div role="tabpanel" class="tab-pane" id="categories">
            <div class="row">
                <div id="filter-categories" class="filter-records column col-xs-12 col-sm-5">
                    <form class="input-append">
                        <div class="input-group">
                            <input type="text" class="key form-control">

                            <span class="input-group-addon">
                        <div>
                            <button class="filter btn btn-default" type="submit" title="<?= lang('filter') ?>">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                            <button class="clear btn btn-default" type="button" title="<?= lang('clear') ?>">
                                <span class="glyphicon glyphicon-repeat"></span>
                            </button>
                        </div>
                    </span>
                        </div>
                    </form>

                    <h3><?= lang('categories') ?></h3>
                    <div class="results"></div>
                </div>

                <div class="record-details col-xs-12 col-sm-5">
                    <div class="btn-toolbar">
                        <div class="add-edit-delete-group btn-group">
                            <button id="add-category" class="btn btn-primary">
                                <span class="glyphicon glyphicon-plus glyphicon glyphicon-white"></span>
                                <?= lang('add') ?>
                            </button>
                            <button id="edit-category" class="btn btn-default" disabled="disabled">
                                <span class="glyphicon glyphicon-pencil"></span>
                                <?= lang('edit') ?>
                            </button>
                            <button id="delete-category" class="btn btn-default" disabled="disabled">
                                <span class="glyphicon glyphicon-remove"></span>
                                <?= lang('delete') ?>
                            </button>
                        </div>

                        <div class="save-cancel-group btn-group" style="display:none;">
                            <button id="save-category" class="btn btn-primary">
                                <span class="glyphicon glyphicon-ok glyphicon glyphicon-white"></span>
                                <?= lang('save') ?>
                            </button>
                            <button id="cancel-category" class="btn btn-default">
                                <span class="glyphicon glyphicon-ban-circle"></span>
                                <?= lang('cancel') ?>
                            </button>
                        </div>
                    </div>

                    <h3><?= lang('details') ?></h3>

                    <div class="form-message alert" style="display:none;"></div>

                    <input type="hidden" id="category-id">

                    <div class="form-group">
                        <label for="category-name"><?= lang('name') ?> *</label>
                        <input id="category-name" class="form-control required">
                    </div>

                    <div class="form-group">
                        <label for="category-description"><?= lang('description') ?></label>
                        <textarea id="category-description" rows="4" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
