$(function() {
    $('.datepicker').datepicker({
        format: 'yyyy-mm-dd'
    });

    //Validate form
    // @see http://stackoverflow.com/a/15438106
    $('form.admin').each(function() {
        var $myForm = $(this);
        $myForm.validate({
            submitHandler: function(form) {
                $myForm.find('input[type=submit]').attr('disabled', 'disabled').val('กำลังดำเนินการ...');
                // $myForm.unbind('submit').submit();
                form.submit();
            }
        });
    });

    /**
     * Get data from `district` and `subtopic`
     *
     * @param  {string} dataChild    Model name
     * @param  {element} elementChild Current element
     * @return {void}
     * @author 3Musketeers
     */

    function getChildData(dataChild, elementChild) {
        $.getJSON(HRR.baseUrl + dataChild + '/get/' + elementChild.val(), function(response) {
            if (response !== false) {
                //Clear old district data and remove `disabled` from district select.
                var $districtSelect = elementChild.parents('.district-filter').find('.district-select');
                $districtSelect.empty();
                $districtSelect.removeAttr('disabled');
                $districtSelect.parent().next().removeAttr('disabled');

                //`add district` to `select`
                $.each(response, function(i, value) {
                    $districtSelect.append($('<option>').text(value).attr('value', i));
                });
            }
        }); //getJson
    }

    /**
     * Append data to multiselect
     *
     * @param  {string} dataAppend    Name of model
     * @param  {element} appendElement Current element
     * @return void
     * @author 3Musketeers
     */

    function appendCheckbox(dataAppend, appendElement) {
        //Get information from select field.
        var areaId = appendElement.parent().find('select').val();
        var areaValue = appendElement.parent().find('select option:selected').text();

        //Get exits value
        //Then check with the new one if the same just return.
        var $oldId = appendElement.parents('.district-filter').find('.area-list input[type="checkbox"]');
        var found = false;
        //Find each select that district exits or not.
        $oldId.each(function() {
            if (areaId == $(this).val()) {
                found = true;
                return;
            }
        });
        //If found set by loop return
        if (found) return;

        //we will recived only `subtopics` and `districts`
        //Here just check what we recived from argument.
        var modelName = 'DistrictM2M';
        if (dataAppend == 'subtopics') modelName = 'Subtopic';
        if (dataAppend == 'Target') modelName = 'Target';
        if (dataAppend == 'Contact') {
            modelFirst = 'Organization';
            modelName = 'Contact';
            //relation for Contact is different.
            appendElement.parents('.district-filter').find('.area-list').append(
            '<div class="form-control"><input type="checkbox" checked="checked" name="data[Organization][' + modelName + '][]" ' +
            'value="' + areaId + '" id="Organization' + modelName + areaId + '">' +
            '<label for="Organization' + modelName + areaId + '" class="multiLabel">' + areaValue + '</label> </div>' +
            '<div class="clearfix"></div>');
            return;
        }

        //Append to list by use multicheckbox
        //http://book.cakephp.org/2.0/en/core-libraries/helpers/form.html
        appendElement.parents('.district-filter').find('.area-list').append(
            '<div class="form-control"><input type="checkbox" checked="checked" name="data[' + modelName + '][' + modelName + '][]" ' +
            'value="' + areaId + '" id="' + modelName + modelName + areaId + '">' +
            '<label for="' + modelName + modelName + areaId + '" class="multiLabel">' + areaValue + '</label> </div>' +
            '<div class="clearfix"></div>');
    }

    //Add multi work area
    $('.addArea').on('click', function(e) {
        e.preventDefault();
        var $areaData = $(this).data('name');

        if ($areaData === 'districts' || $areaData === 'subtopics'
            || $areaData === 'Target' || $areaData === 'Contact') {
            appendCheckbox($areaData, $(this));
        }
    });

    //Find district with province id.
    $('.selected-province').on('change', function() {
        var $dataName = $(this).data('name');
        if ($dataName === 'districts' || $dataName === 'subtopics') {
            getChildData($dataName, $(this));
        }
    });

    //Toggle `mou` fields.
    $('.ismou').on('change', function() {
        //Check if user have mou or not
        var $mouDate = $('.mou-date');
        $mouDate.prop('disabled', true);
        if ($(this).val() == 1) {
            $mouDate.removeAttr('disabled');
        } else {
            $mouDate.val('');
        }
    });

    //Add network organization and people.
    $('.add-network').on('click', function(e) {
        e.preventDefault();
        var $appendElement = $(this).parent().next().find('.network-append');
        var dataValue = $(this).prev().find('select').val();
        var dataLabel = $(this).prev().find('select option:selected').text();
        var dataName = $(this).data('name');

        var $oldElement = $appendElement.find('input[type="checkbox"]');
        var found = false;
        //Check each select.
        $oldElement.each(function() {
            if (dataValue == $(this).val()) {
                found = true;
                return;
            }
        });
        //If already have value return.
        if (found) return;
        //Add value to multi checkbox
        $appendElement.append(
            '<div class="form-control">' +
            '<input type="checkbox" checked="checked" name="data[' + dataName + '][' + dataName + '][]' + '"' +
            'value="' + dataValue + '" id="' + dataName + dataName + dataValue + '">' +
            '<label for="' + dataName + dataName + dataValue + '" class="multiLabel">' + dataLabel + '</label> </div>' +
            '<div class="clearfix"></div>'
        );
    });


    /**
     * display children elements in a <select> box
     * @param  {object} parent       selected <select> element
     * @param  {string} resourceName name of child object
     * @param {jQuery Object} targetElem custom target element
     *
     * @usage  2 <select> elements that have the same `rel` value
     *         <select rel="location" id="provinces"></select>
     *         <select rel="location"></select>
     *   bind `onchange` event **only to parent element**
     *   so when select an option in parent element, will get its children
     *   and append to another <select> element that has the same `rel` value
     */
    var displayChildren = function(parent, resourceName, targetElem) {
        var $parent = $(parent);
        var id = $parent.val();

        // find another element that has the same `rel` value but not itself
        var rel = $parent.attr('rel');

        var $children;
        if (typeof targetElem === 'undefined') {
            $children = $('[rel=' + rel + ']').not(parent); // note: parent is not a jquery object here
        } else {
            // use custom target element if passed
            $children = targetElem;
        }
        var emptyOption = '<option value="">ทั้งหมด</option>';

        if (id !== '') {
            var url = HRR.baseUrl + resourceName + '/get/' + id;
            $.getJSON(
                url,
                function(resources) {
                    if (resources !== false) {
                        var options = [emptyOption];
                        $.each(resources, function(id, name) {
                            options.push('<option value="' + id + '">' + name + '</option>');
                        });
                        $children.prop('disabled', false).html(options.join("\n"));
                    } else {
                        // select parent has no children. fill with emptyOption
                        // @todo - duplicated code with the line below
                        $children.prop('disabled', true).html(emptyOption);
                    }
                });
        } else {
            $children.prop('disabled', true).html(emptyOption);
        }
    };

    // front-end filters
    $('.select-topic-id').on('change', function() {
        displayChildren(this, 'subtopics');
    });

    $('.select-province-id').on('change', function() {
        displayChildren(this, 'districts');
    });

    // select province after region (admin/organizations/index)
    $('.select-province-id-custom').on('change', function() {
        displayChildren(this, 'districts', $('#select-district-id'));
    });

    // admin/index page
    $('.js-org-type-filter')
        .find('input[type=radio]')
        .on('change', function() {
            var selected = parseInt($(this).val(), 10);
            if ( selected === 1 ) {
                $('#member-id').prop('disabled', false);
            } else {
                $('#member-id').prop('disabled', true);
            }
    });

    // used in admin/organizations/index page
    $('.select-region-id').on('change', function() {
        displayChildren(this, 'provinces');
        // clear selected district value
        $('#select-district-id').val('');
    });

    // $('video').mediaelementplayer();

    //Submit the form to create contact.
    $('#contact-submit').on('click', function(e) {
        if ($('#add-contact').valid()) {

            e.preventDefault();

            $.post( HRR.baseUrl + "admin/contacts/add/", $( '#add-contact' ).serialize(), function(data) {

                var responseAdd = $.parseJSON( data );
                //If cannot add data show error
                //@TODO : Should we use `validate` the form?
                if ( responseAdd === false ) {
                    $('#contact-alert').addClass('alert-danger').show('slow');
                    return;
                }

                //Close the `Modal` and reset the form data.
                $('#addContactModal').modal('hide');
                $('#add-contact')[0].reset(); // Reset form

                //Add new contact to multiple select list.
                // $('#OrganizationContact').append($('<option selected="selected">').text(responseAdd.Contact.name).attr('value', responseAdd.Contact.id));
                $appendElement = $('#addContactForm').parents('.district-filter').find('.area-list');
                $appendElement.append(
                    '<div class="form-control">' +
                    '<input type="checkbox" checked="checked" name="data[Organization][Contact][]' + '"' +
                    'value="' + responseAdd.Contact.id + '" id="OrganizationtContact' + responseAdd.Contact.id + '">' +
                    '<label for="OrganizationContact' + responseAdd.Contact.id + '" class="multiLabel">' + responseAdd.Contact.name + '</label> </div>' +
                    '<div class="clearfix"></div>'
                );
            });
        }

    });

    // for add new person page, when position_id field is selected,
    // position_start field will be a required field
    $('#add-person-position-id').on('change', function() {
        var selected = $(this).val();
        var requiredStar = $('<b id="dynamic-star" class="form-required">*</b>');
        if (selected !== '') {
            $('#add-person-position-start').addClass('required');
            $('#position-start-label').append(requiredStar);
        } else {
            $('#dynamic-star').remove();
            $('#add-person-position-start').removeClass('required');
        }
    });
});