<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php echo $title; ?> </div>
        </div>
        <div class="panel-body">
            <div class="row form-group">

                <?php if ($permissions->hasPermission('add_general_contact')) { ?>
                    <div class="col-md-4 pull-right m-t-20">
                        <a style="color:white !important;" class="btn bg-complete-dark pull-right " id="add_contact" data-origin="list" data-toggle="modal" data-target="#contact_modal">
                            <?php print CommonLanguage::getMessage('add_contact'); ?>
                        </a> 
                    </div>
                <?php } ?>
            </div>
            <div class="row">
                <div class="table-responsive col-md-12 m-t-10">
                    <table class="table table-bordered table-hover crm-table" id="tableWithSearch" >
                        <thead>
                            <tr>
                                <th class="text-center"><?php print CommonLanguage::getMessage('contact_name'); ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Phone'); ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('contact_mobile_phone'); ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('job'); ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('note'); ?></th>
                                <th class="text-center"><?php print CommonLanguage::getMessage('Action'); ?></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .dropdown-toggle{
        color:white !important;
    }
</style>
<div class="modal fade" id="contact_modal" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-20"></i>
                </button>
                <h5 class="add-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('add_contact'); ?></h5>
                <h5 class="edit-label h-labels text-left bold hidden"><?php echo CommonLanguage::getMessage('edit_contact'); ?></h5>
            </div>
            <div class="modal-body">
                <div class="row"><?php echo Forms::AlertDiv('contact_alert'); ?></div>
                <form id="contact_form" method="POST" onsubmit="return false">
                    <input type="hidden" name="contact_id" id="contact_id">
                    <div class="row form-group">
                        <div class="col-md-6">
                            <label ><?php print CommonLanguage::getMessage('contact_name'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="contact_name" name="contact_name" class="form-control" required />
                        </div>
                        <div class="col-md-6">
                            <label ><?php print CommonLanguage::getMessage('contact_mobile_phone'); ?></label>
                            <span class="red-star">*</span>
                            <input type="text" id="contact_mobile" name="contact_mobile" class="form-control" required />
                        </div>

                    </div>
                    <div class="row form-group">
                        <div class="col-md-6">
                            <label for="workphone-input"><?php print CommonLanguage::getMessage('phone'); ?></label>
                            <input type="text" id="contact_phone" name="contact_phone" class="form-control" />
                        </div>
                        <div class="col-md-6">
                            <label ><?php print CommonLanguage::getMessage('job'); ?></label>
                            <input type="text" id="contact_job" name="contact_job" class="form-control" />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <label><?php print CommonLanguage::getMessage('note'); ?></label>
                            <textarea class="contact_note full-width form-control" id="contact_note" name="contact_note" style="resize: vertical;"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"><?php print CommonLanguage::getMessage('cancel'); ?></button>
                <button style="color:white !important;"  id="submit_contact" class="btn bg-complete-dark"><?php print CommonLanguage::getMessage('Save'); ?></button>
            </div>
        </div>
        <?php echo Forms::ModalLoader('contact_loader'); ?>
    </div>
</div>
<script>
    $(function () {

        RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4], 'crmAjax/general_contact_list');
        $(".panel-body").on("click", '#add_contact', function () {
            $("#contact_modal .add-label").removeClass('hidden');
            $("#contact_id").val(0);
        });
        
         $('#tableWithSearch').on('click', '.delete_general_contact', function () {
            var entry_value = $(this).parents('div.Action').attr('data-id')
            IncludeDeleteModal(common_delete_modal, {contact_id: entry_value}, function () {
                RebuildDataTable($('.panel-heading .panel-title').html(),  [0, 1, 2, 3, 4], 'crmAjax/general_contact_list');
            }, "crmAjax/delete_general_contact");
        });
        $("#tableWithSearch").on("click", ".edit_contact", function () {
            $("#contact_modal .edit-label").removeClass('hidden')
            var contact_id = $(this).parents('div.Action').attr("data-id")
            $("#contact_id").val(contact_id)
            CommonViewById("xhr/getElement", {rowId: contact_id, rowEntry: 'contact_id', table: 'tbl_general_contact'}, '#contact_loader', function (response) {
                var Keys = Object.keys(response[0])
                $.each(Keys, function (key, value) {
                    $('#' + value).val(response[0][value])
                });
                $("#contact_modal").modal("show")
            });
        });
        $("#submit_contact").on("click", function () {
            if (!$("#contact_form").valid())
                return;
            $("#contact_loader").removeClass('hidden');
            var Data = new FormData(document.getElementById("contact_form"));
            $.ajax({
                url: "crmAjax/submit_general_contact",
                method: "POST",
                data: Data,
                processData: false,
                contentType: false,
                dataType: "JSON",
                complete: function (jqXHR, status) {
                    if (status == 'success') {
                        if (jqXHR.responseJSON[1] == "success") {
                            RebuildDataTable($('.panel-heading .panel-title').html(), [0, 1, 2, 3, 4], 'crmAjax/general_contact_list');

                            hideModalAlert('contact_modal', 'contact_alert');
                        }
                        AddAlert("#contact_alert", jqXHR.responseJSON[0], jqXHR.responseJSON[1]);
                    }
                    $("#contact_loader").addClass('hidden');
                }
            });
        });
    })
</script>
