@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 Sections &nbsp;&nbsp;&nbsp;<button id="btn-add-section" type="button" class="btn btn-primary">Add</button>
                    </div>
                    <div class="col-md-3 text-center">
                        <span id="form-sections-alert" style="display: none; font-size: 100%; padding-left: 0.75em; padding-right: 0.75em;" class="badge badge-success">Section deleted successfully!</span>
                    </div>
                </div>
            </div>
            
            <div class="card-body">

                <div class="row text-center pb-3">
                    <div class="col-sm-6"></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-field-status" class="form-control">
                                    <option value="1">Enabled</option>
                                    <option value="0">Disabled</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

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

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

                        <div class="form-group row">
                            <label for="txt-name" class="col-sm-2 col-form-label">Name&nbsp;<span class="required">*</span></label>
                            <div class="col-sm-10">
                                <input id="txt-name" type="text" name="name" class="form-control" placeholder="Name">
                                <div id="txt-name-error" class="invalid-feedback"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="txt-short-name" class="col-sm-2 col-form-label">Short Name</label>
                            <div class="col-sm-10">
                                <input id="txt-short_name" type="text" name="short_name" class="form-control" placeholder="Short Name">
                                <div id="txt-short_name-error" class="invalid-feedback"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="txt-subheading" class="col-sm-2 col-form-label">Sub Heading</label>
                            <div class="col-sm-10">
                                <input id="txt-sub_heading" type="text" name="sub_heading" class="form-control" placeholder="Sub Heading">
                                <div id="txt-sub_heading-error" class="invalid-feedback"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="txt-sort-order" class="col-sm-2 col-form-label">Sort Order&nbsp;<span class="required">*</span></label>
                            <div class="col-sm-5">
                                <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>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">&nbsp;</label>
                            <div class="col-sm-4">
                                <input id="chk-show_heading" type="checkbox" name="show_heading" value="1">
                                <label id="lbl-show_heading" for="chk-show_heading" class="cursor-pointer">Show Heading</label>
                            </div>
                            <div class="col-sm-4">
                                <input id="chk-show_sub_heading" type="checkbox" name="show_sub_heading" value="1">
                                <label id="lbl-show_sub_heading" for="chk-show_sub_heading" class="cursor-pointer">Show Sub Heading</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">&nbsp;</label>
                            <div class="col-sm-4">
                                <input id="chk-show_in_manual_form" type="checkbox" name="show_in_manual_form" value="1">
                                <label id="lbl-show_in_manual_form" for="chk-show_in_manual_form" class="cursor-pointer">Show in Manual Form</label>
                            </div>
                            <div class="col-sm-4">
                                <input id="chk-show_in_myinfo_form" type="checkbox" name="show_in_myinfo_form" value="1">
                                <label id="lbl-show_in_myinfo_form" for="chk-show_in_myinfo_form" class="cursor-pointer">Show in MyInfo Form</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 col-form-label">&nbsp;</label>
                            <div class="col-sm-4">
                                <input id="chk-is_surety_section" type="checkbox" name="is_surety_section" value="1">
                                <label id="lbl-is_surety_section" for="chk-is_surety_section" class="cursor-pointer">Is Surety Section?</label>
                            </div>
                            <div class="col-sm-4">
                                
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="txt-sort-order" class="col-sm-2 col-form-label">Slug</label>
                            <div class="col-sm-5">
                                <select id="select-slug" name="slug" class="form-control">
                                    <option value="">Please Select</option>
                                    <option value="cpf_section">CPF Section</option>
                                    <option value="customer_due_dilligence_section">Customer Due Dilligence Section</option>
                                    <option value="fi_section">FI Section</option>
                                    <option value="giro_section">GIRO Section</option>
                                    <option value="income_section">Income Section</option>
                                    <option value="points_section">Declaration Points Section</option>
                                    <option value="property_1_section">Property 1 Section</option>
                                    <option value="property_2_section">Property 2 Section</option>
                                    <option value="reference_section">Reference Section</option>
                                    <option value="cpf_employers_section">CPF Employers Section</option>
                                </select>
                                <div id="txt-slug-error" class="invalid-feedback"></div>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="txt-sort-order" class="col-sm-2 col-form-label">Status</label>
                            <div class="col-sm-5">
                                <select id="select-status" name="status" class="form-control">
                                    <option value="1">Enabled</option>
                                    <option value="0">Disabled</option>
                                </select>
                                <div id="txt-sort_order-error" class="invalid-feedback"></div>
                            </div>
                        </div>
                    </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-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;
    jQuery(document).ready(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        // $.noConflict();
        oTable = $('#online-form-sections-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{{ route('datatable.getFormSections') }}",
                "data": function ( d ) {
                    d.status = $('#filter-select-field-status').val();
                }
            },
            "columns": [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                // {data: 'short_name', name: 'short_name'},
                // {data: 'sub_heading', name: 'sub_heading'},
                {data: 'sort_order', name: 'sort_order'},
                {data: 'status', name: 'status'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ],
            "fnRowCallback": function (nRow, aData, iDisplayIndex) {
                // $(nRow).attr("data-id", aData.id);

                $(nRow).children().each(function (index, td) {
                    $('td:eq(3)', nRow).addClass( "status-column" );
                });                
                return nRow;
            },
        });
    });

    jQuery(document).on('click', '#btn-add-section', function() {
        clearSectionModalForm();
        hideErrorMsgs();

        jQuery('#modal-heading').html('Add Section');
        jQuery('#btn-modal-save').text("Save");

        jQuery('#editSectionModal').modal('show');
    });

    function clearSectionModalForm() {
        $('#form-sections-form').find(':input').each(function() {
            $(this).val('');
        });
        $('#select-status').val(1);

        resetCheckboxes();
    }

    function resetCheckboxes() {
        $('#chk-show_heading').prop('checked', false);
        $('#chk-show_sub_heading').prop('checked', false);
        $('#chk-show_in_manual_form').prop('checked', false);
        $('#chk-show_in_myinfo_form').prop('checked', false);
        $('#chk-is_surety_section').prop('checked', false);
    }

    jQuery(document).on('click', '.edit-section', function() {
        var id = jQuery(this).data('id');

        hideErrorMsgs();

        jQuery('#modal-heading').html('Edit Section');
        jQuery('#btn-modal-save').text("Update");

        resetCheckboxes();

        if (id) {
            jQuery.ajax({
                type: 'GET',
                // url: '' + '/online-form-sections/' + id + '/edit',
                url: BASE_URL + '/online-form-sections/' + id + '/edit',
                data: {},
                success: function(response) {
                    if (response.status) {
                        jQuery('#txt-id').val(response.data.id);
                        jQuery('#txt-name').val(response.data.name);
                        jQuery('#txt-short_name').val(response.data.short_name);
                        jQuery('#txt-sub_heading').val(response.data.sub_heading);
                        jQuery('#txt-sort_order').val(response.data.sort_order);
                        jQuery('#select-slug').val(response.data.slug);
                        jQuery('#select-status').val(response.data.status);

                        if (response.data.show_heading == 1) {
                            $('#chk-show_heading').prop('checked', true);
                        }

                        if (response.data.show_sub_heading == 1) {
                            $('#chk-show_sub_heading').prop('checked', true);
                        }

                        if (response.data.show_in_manual_form == 1) {
                            $('#chk-show_in_manual_form').prop('checked', true);
                        }

                        if (response.data.show_in_myinfo_form == 1) {
                            $('#chk-show_in_myinfo_form').prop('checked', true);
                        }

                        if (response.data.is_surety_section == 1) {
                            $('#chk-is_surety_section').prop('checked', true);
                        }

                        jQuery('#editSectionModal').modal('show');
                    }
                },
                error: function() {

                }
            });
        }
    });

    jQuery(document).on('click', '#btn-modal-save', function() {
        var id = jQuery('#txt-id').val();
        var token = jQuery('meta[name="csrf-token"]').attr('content');

        hideErrorMsgs();

        var formValues = jQuery('#form-sections-form').serialize();
        
        // var saveUrl = '' + '/online-form-sections';
        var saveUrl = BASE_URL + '/online-form-sections';
        var method = 'POST';
        if (parseInt(id) > 0) {
            // saveUrl = '' + '/online-form-sections/' + id;
            // saveUrl = BASE_URL + '/online-form-sections/' + id;
            saveUrl = BASE_URL + '/update-section';
            // method = 'PUT';
        }
        jQuery.ajax({
           type: method,
           url: saveUrl,
           // data: { "_token": token, "id": id, "formData": formValues },
           data: formValues,
           success: function(response) {
                if (response.errors) {
                    var errors = response.errors;

                    for (fieldName in errors) {
                        var error = errors[fieldName].join(',');
                        $("#txt-" + fieldName).addClass('is-invalid');                            
                        $("#txt-" + fieldName + "-error").html(error);
                    }    
                } else {
                    oTable.ajax.reload(null, false);

                    // if (method == "POST") {
                    if (parseInt(id) > 0) {
                    } else {
                        oTable.page('last').draw('page');
                    }

                    // if (response.status) {
                        jQuery('#editSectionModal').modal('hide');
                    // }
                }
            },
            error: function() {
                
            }
        });
    });

    function hideErrorMsgs() {
        $('.invalid-feedback').html('');

        $('#form-sections-form').find(':input').each(function() {
            $(this).removeClass('is-invalid');
        });
    }

    jQuery(document).on('click', '.delete-section', function() {
        var id = jQuery(this).data('id');

        var result = confirm("Are you sure you want delete this section?");
        // console.log(result);
        if (result == true) {
            jQuery.ajax({
               type: 'POST', // 'DELETE',
               // url: '' + '/online-form-sections/' + id,
               // url: BASE_URL + '/online-form-sections/' + id,
               url: BASE_URL + '/delete-section',
               data: { 'id': id },
               success: function(response) {
                    if (response.status) {
                        $('#form-sections-alert').html(response.msg).show().delay(2000).hide(300);
                        oTable.ajax.reload(null, false);
                    }
                },
                error: function() {
                    
                }
            });
        }
    });

    jQuery(document).on('change', '#filter-select-field-status', function() {
        oTable.ajax.reload(null, false);
    });

</script>
@stop