@extends('layouts.app')

@section('content')
        <div class="container">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-9">
                        Manage Online Form Fields &nbsp;&nbsp;&nbsp;<button id="btn-add-field" type="button" class="btn btn-primary">Add</button>
                    </div>
                    <div class="col-md-3 text-center">
                        <span id="form-fields-alert" style="display: none; font-size: 100%; padding-left: 0.75em; padding-right: 0.75em;" class="badge badge-success">Field deleted successfully!</span>
                    </div>
                </div>
            </div>
            
            <div class="card-body">

                <div class="row text-center pb-3">
                    <div class="col-sm-6">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Section</label>
                            <div class="col-sm-10">
                                <select id="filter-select-section" class="form-control">
                                                                        <!-- <option value="1">Personal Particulars</option>
                                    <option value="2">Residential Address</option> -->
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">Status</label>
                            <div class="col-sm-10">
                                <select id="filter-select-status" class="form-control">
                                    <option value="1">Enabled</option>
                                    <option value="0">Disabled</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <table id="online-form-fields-table" class="table table-hover table-condensed" width="100%">
                    <thead>
                        <tr>
                            <th valign="middle">ID</th>
                            <!-- <th>Section</th> -->
                            <th>Label</th>
                            <th>Type</th>
                            <th>Sort Order</th>
                            <th>Enabled ?</th>
                            <th>Actions</th>
                        </tr>
                        {{ csrf_field() }}
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>

    <div id="editFieldModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 id="modal-heading" class="modal-title">Edit Field</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <form id="form-fields-form" class="form-horizontal px-5 py-3" role="form">
                        {{ csrf_field() }}
                        <input id="txt-id" type="hidden" name="id" class="form-control">

                        <!-- section & type starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="select-section_id">Section&nbsp;<span class="required">*</span></label>
                                <select id="select-section_id" name="section_id" class="form-control">
                                    <option value="">Please select</option>
                                                                    </select>
                                <div id="txt-section_id-error" class="invalid-feedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="select-type">Type&nbsp;<span class="required">*</span></label>
                                <select id="select-type" name="type" class="form-control is-invalid">
                                    <option value="">Please select</option>
                                    <option value="checkbox">Checkbox</option>
                                    <option value="custom_select">Custom Drop Down</option>
                                    <option value="date">Date</option>
                                    <option value="select">Drop Down</option>
                                    <option value="hidden">Hidden Field</option>
                                    <option value="label">Label</option>
                                    <option value="list">List</option>
                                    <option value="radio">Radio</option>
                                    <option value="recaptcha">Recaptcha</option>
                                    <option value="text">Text</option>
                                    <option value="text_area">Text Area</option>
                                </select>
                                <div id="txt-type-error" class="invalid-feedback"></div>
                            </div>
                        </div>
                        <!-- section & type ends -->

                        <!-- name & label starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="txt-name">Name&nbsp;<span class="required">*</span></label>
                                <input id="txt-name" type="text" name="name" class="form-control" placeholder="Name">
                                <div id="txt-name-error" class="invalid-feedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="txt-label">Label&nbsp;<span class="required">*</span></label>
                                <input id="txt-label" type="text" name="label" class="form-control" placeholder="Label">
                                <div id="txt-label-error" class="invalid-feedback"></div>
                            </div>
                        </div>
                        <!-- name & label ends -->

                        <!-- label and sort_order starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="txt-sort-order">Sort Order&nbsp;<span class="required">*</span></label>
                                <input id="txt-sort_order" type="text" name="sort_order" class="form-control" placeholder="Sort Order">
                                <div id="txt-sort_order-error" class="invalid-feedback"></div>
                            </div>
                            <div id="placeholder-div" class="form-group col-md-6">
                                <label for="txt-placeholder">Placeholder</label>
                                <input id="txt-placeholder" type="text" name="placeholder" class="form-control" placeholder="Placeholder">
                                <div id="txt-placeholder-error" class="invalid-feedback"></div>
                            </div>
                        </div>
                        <!-- label and sort_order ends -->

                        <!-- validators starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="txt-error_message">Validation Rules</label>
                                <input id="txt-validators" type="text" name="validators" class="form-control" placeholder="Validators">
                                <div id="txt-validators-error" class="invalid-feedback"></div>
                            </div>
                            <div class="form-group col-md-6">
                            </div>
                        </div>
                        <!-- validators ends -->

                        <!-- error_message / options starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="txt-error_message">Custom Error Message (for Required validation)</label>
                                <textarea id="txt-error_message" name="error_message" class="form-control" placeholder="Error Message" rows="4"></textarea>
                                <div id="txt-error_message-error" class="invalid-feedback"></div>
                            </div>
                            <div id="options-div" class="form-group col-md-6" style="display: none;">
                                <label for="txt-options">Options</label>
                                <textarea id="txt-options" name="options" class="form-control" placeholder="Options" rows="4"></textarea>
                                <div id="txt-options-error" class="invalid-feedback"></div>
                            </div>
                        </div>
                        <!-- error_message / options ends -->

                        <!-- show in where sections starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="chk-show_in_manual_form" class="cursor-pointer">Show in Manual Form?&nbsp;&nbsp;</label>
                                <input id="chk-show_in_manual_form" type="checkbox" name="show_in_manual_form" value="1">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="chk-show_in_myinfo_form" class="cursor-pointer">Show in MyInfo Form?&nbsp;&nbsp;</label>
                                <input id="chk-show_in_myinfo_form" type="checkbox" name="show_in_myinfo_form" value="1">
                            </div>
                        </div>
                        <!-- show in where sections ends -->

                        <!-- enabled / required starts -->
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="chk-is_enabled" class="cursor-pointer">Enabled?&nbsp;&nbsp;</label>
                                <input id="chk-is_enabled" type="checkbox" name="is_enabled" value="1">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="chk-is_required" class="cursor-pointer">Required?&nbsp;&nbsp;</label>
                                <input id="chk-is_required" type="checkbox" name="is_required" value="1">
                            </div>
                        </div>
                        <!-- enabled / required ends -->

                        <!-- lock / unlock starts -->
                        <div class="form-row">
                            <div class="form-group col-md-3">
                                <label for="chk-lock_field" class="cursor-pointer">Lock?&nbsp;&nbsp;</label>
                                <input id="chk-lock_field" type="checkbox" name="lock_field" value="1">
                            </div>
                            <div class="form-group col-md-3">
                                <label id="lbl-sc_lock" for="chk-sc_lock" class="cursor-pointer">Lock for SC?&nbsp;&nbsp;</label>
                                <input id="chk-sc_lock" type="checkbox" name="sc_lock" value="1">
                            </div>
                            <div class="form-group col-md-3">
                                <label id="lbl-pr_lock" for="chk-pr_lock" class="cursor-pointer">Lock for PR?&nbsp;&nbsp;</label>
                                <input id="chk-pr_lock" type="checkbox" name="pr_lock" value="1">
                            </div>
                            <div class="form-group col-md-3">
                                <label id="lbl-fin_lock" for="chk-fin_lock" class="cursor-pointer">Lock for FIN?&nbsp;&nbsp;</label>
                                <input id="chk-fin_lock" type="checkbox" name="fin_lock" value="1">
                            </div>
                        </div>
                        <!-- lock / unlock ends -->

                    </form>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <span class='glyphicon glyphicon-remove'></span> Close
                        </button>
                        <button id="btn-field-modal-save" type="button" class="btn btn-primary">
                            <span class='glyphicon glyphicon-check'></span> Update
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    var oTable;
    var baseUrl = "