@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
<div class="box box-default">
    <div class="box-body">
        <div class="row">
            <div class="col-xs-12">
                <label class="text-primary" style="font-size:16px; margin-top:6px">Service Application Promos</label>

                <div class="pull-right box-tools">
                    <a href="#" id="new-promo" class="btn btn-default pull-right"><i class="fa fa-plus-circle text-success"></i> New Application Promo</a>
                </div>

                <div class="pull-right" style="width:180px; margin-right:3px">
                    <select id="filter-by-promo-status" class="form-control select2 select2-hidden-accessible" data-placeholder="ACTIVE PROMOS" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="active">ACTIVE</option>
                        <option value="inactive">INACTIVE</option>
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
        <div class="row">
            <div class="col-xs-12">
                <table class="table table-condensed table-hover" id="table-promos" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="40%">PROMO TITLE</th>
                            <th width="18%">MINIMUM GD</th>
                            <th width="18%">LOCK-IN CONTRACT</th>
                            <th width="15%">PROMO DURATION</th>
                            <th width="9%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function(){
        $dt = $('#table-promos').DataTable({
            deferred: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: $app_url + '/administrator/application-promos/dt',
                data: function(d) {
                    d.promo_status = $('#filter-by-promo-status option:selected').val();
                }
            },
            columns: [
                { data:'promo_title',       name:'promo_title',     orderable:false,   className:"text-uppercase", searchable: false },
                { data:'required_gd',       name:'required_gd',     orderable:false,   className:"text-uppercase", searchable: false },
                { data:'contract_lockin',   name:'contract_lockin', orderable:false,   className:"text-uppercase", searchable: false },
                { data:'duration',          name:'duration',        orderable:false,   className:"text-uppercase", searchable: false },
                { data:'action',            name:'action',          orderable:false,   className:"text-uppercase", searchable: false }
            ],
            createdRow: function(row, data, dataIndex) {
                $(row).attr('data-promo-id', data.promo_id);
            }
        });

        $('#table-promos_filter input').unbind();
        $('#table-promos_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                $dt.search($(this).val()).draw();
            }
        });

        $('#filter-by-promo-status').on('change', function() {
            $dt.search($('#table-promos_filter input').val()).draw();
        });

        // $('.toggle-filter-appl-status').click(function() {
        //     $('#filter-appl-status')
        //         .text("Filter: " + $(this).text())
        //         .data('filter', $(this).data('filter'));

        //     $dt.search($('#table-applications_filter input').val()).draw();
        // });
        
        // Create new promo.
        $('#new-promo').click(function() {
            $jc = $.confirm({
                title: false,
                draggable: true,
                columnClass: 'x-large',
                content: function() {
                    var self = this;

                    return $.ajax({
                        url: $app_url + '/administrator/application-promos/new',
                        dataType: 'html',
                        method: 'get'
                    }).done(function(res) {
                        self.setContent(res);
                    }).fail(function() {
                        self.setContent('Something went wrong. Please try again or refresh the page.');
                    });
                },
                onContentReady: function() {
                    $('#promo_type').select2({
                        dropdownParent: $('.jconfirm-scrollpane')
                    });

                    $(".date-masked").inputmask("date", {
                        mask: "y-1-1", 
                        placeholder: "yyyy-mm-dd", 
                        leapday: "-02-29", 
                        separator: "-", 
                        alias: "yyyy/mm/dd",
                        onincomplete: function() {
                            $(this).val(null);
                        }
                    });

                    AppendNewPromoMechanics = function(data) {
                        $('#tbl-promo-mechanics > tbody').append('<tr>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<select class="form-control select2 select2-hidden-accessible particulars" data-placeholder="Select one." style="width: 100%;" aria-hidden="true">' +
                                    '<option></option>' +
                                    '<option value="guarantee deposit">GUARANTEE DEPOSIT</option>' +
                                    '<option value="materials">MATERIALS</option>' +
                                    '<option value="service fee">SERVICE FEE</option>' +
                                    '<option value="arrears">ARREARS</option>' +
                                    '<option value="promo balance">PROMO BALANCE</option>' +
                                '</select>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<select class="form-control select2 select2-hidden-accessible payment-method" data-placeholder="Select one." style="width: 100%;" aria-hidden="true">' +
                                    '<option></option>' +
                                    '<option value="atb">ADD TO BILL</option>' +
                                    '<option value="full">FULL PAYMENT</option>' +
                                '</select>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<div class="input-group">' +
                                    '<input type="text" class="fees-control form-control senior-val num wnum-only" data-num-min="0" data-num-max="100">' +
                                    '<span class="input-group-addon">%</span>' +
                                '</div>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<div class="input-group">' +
                                    '<input type="text" class="fees-control form-control discount-val num wnum-only" data-num-min="0" data-num-max="100">' +
                                    '<span class="input-group-addon">%</span>' +
                                '</div>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<select class="form-control select2 select2-hidden-accessible interest-type" data-placeholder="TYPE" style="width: 100%;" aria-hidden="true">' +
                                    '<option></option>' +
                                    '<option value="percent">PERCENT</option>' +
                                    '<option value="monthly">MONTHLY</option>' +
                                '</select>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<input type="text" class="fees-control form-control interest-val num wnum-only" data-num-min="0" data-num-max="100">' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<div class="input-group">' +
                                    '<input type="text" class="fees-control form-control atb-downpayment num wnum-only" data-num-min="1" data-num-max="60" disabled="true">' +
                                    '<span class="input-group-addon">%</span>' +
                                '</div>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<div class="input-group">' +
                                    '<input type="text" class="fees-control form-control terms-min num wnum-only" data-num-min="1" data-num-max="60" disabled="true">' +
                                    '<span class="input-group-addon">Mo(s)</span>' +
                                '</div>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<div class="input-group">' +
                                    '<input type="text" class="fees-control form-control terms-max num wnum-only" data-num-min="1" data-num-max="60" disabled="true">' +
                                    '<span class="input-group-addon">Mo(s)</span>' +
                                '</div>' +
                            '</td>' +
                        '</tr>');

                        // Initialize appended Select2 element.
                        $('.particulars').select2({
                            allowClear: true,
                            dropdownParent: $('.jconfirm-scrollpane')
                        }).on('select2:select', function(e) {
                            $particulars = [];

                            $.each($('.particulars'), function() {
                                $particulars.push($(this).val());
                            });

                            if(_.uniq($particulars).length !== $particulars.length) {
                                $(this).val(null).trigger('change');
                            } else {
                                AppendNewPromoMechanics(null);
                            }
                        }).on('select2:unselect', function(e) {
                            $(this).select2('close');
                            $(this).closest('tr').remove();
                        });

                        // Initialize appended Select2 element.
                        $('.payment-method').select2({
                            allowClear: true,
                            dropdownParent: $('.jconfirm-scrollpane')
                        }).on('select2:select', function(e) {
                            if($(this).val() == 'atb') {
                                $(this).closest('tr').find('.terms-min').prop('disabled', false).val(1)
                                $(this).closest('tr').find('.terms-max').prop('disabled', false).val(1);

                                // $(this).closest('tr').find('.discount-val').val(null).prop('disabled', true);
                                // $(this).closest('tr').find('.chk-discount-toggle').val(null).prop('checked', false).prop('disabled', true);

                                $(this).closest('tr').find('.interest-type').prop('disabled', false).val(null).trigger('change');
                                $(this).closest('tr').find('.interest-val').prop('disabled', false);
                                $(this).closest('tr').find('.chk-interest-toggle').prop('checked', false).prop('disabled', false);

                                $(this).closest('tr').find('.atb-downpayment').prop('disabled', false).val(null);
                            } else {
                                // $(this).closest('tr').find('.terms-min').prop('disabled', true).val(null);
                                // $(this).closest('tr').find('.terms-max').prop('disabled', true).val(null);
                                
                                $(this).closest('tr').find('.discount-val').prop('disabled', false);
                                $(this).closest('tr').find('.chk-discount-toggle').prop('checked', false).prop('disabled', false);

                                // $(this).closest('tr').find('.interest-type').prop('disabled', true).val(null).trigger('change');
                                // $(this).closest('tr').find('.interest-val').val(null).prop('disabled', true);
                                $(this).closest('tr').find('.chk-interest-toggle').val(null).prop('checked', false).prop('disabled', true);

                                // $(this).closest('tr').find('.atb-downpayment').prop('disabled', true).val(null);
                            }
                        }).on('select2:unselect', function(e) {
                            $(this).closest('tr').find('.terms-min').prop('disabled', true).val(null);
                            $(this).closest('tr').find('.terms-max').prop('disabled', true).val(null);

                            $(this).closest('tr').find('.discount-val').val(null).prop('disabled', true);
                            $(this).closest('tr').find('.chk-discount-toggle').val(null).prop('checked', false).prop('disabled', true);

                            $(this).closest('tr').find('.interest-val').val(null).prop('disabled', true);
                            $(this).closest('tr').find('.chk-interest-toggle').val(null).prop('checked', false).prop('disabled', true);

                            $(this).closest('tr').find('.atb-downpayment').prop('disabled', true).val(null);
                        });

                        $('.interest-type').select2({
                            allowClear: true,
                            dropdownParent: $('.jconfirm-scrollpane')
                        }).on('select2:select', function(e) {
                            $tr = $(this).closest('tr');
                            $tr.find('.interest-val').val(null);
                        }).on('select2:unselect', function(e) {
                            $tr = $(this).closest('tr');
                            $tr.find('.interest-val').val(null);
                        });
                    }

                    // Append default row on load.
                    AppendNewPromoMechanics(null);
                },
                buttons: {
                    CANCEL: {
                        btnClass:'btn btn-default',
                        text: '<small>[ESC]</small> CANCEL',
                        keys: ['esc']
                    },
                    CONFIRM: {
                        btnClass: 'btn btn-primary',
                        text: '<i class="fa fa-save"></i> SAVE CHANGES',
                        action: function() {
                            $header = {
                                'promo_type'      : $('#promo_type').val(),
                                'promo_title'     : $('#promo_title').val(),
                                'required_gd'     : $('#required_gd').val().replace(',',''),
                                'bill_penalty'    : $('#bill_penalty').val().replace(',',''),
                                'lockin_contract' : $('#lockin_contract').val(),
                                'duration_from'   : $('#duration_from').val(),
                                'duration_to'     : $('#duration_to').val()
                            }

                            $details = [];
                            $.each($('.particulars'), function() {
                                if($(this).val()) {
                                    $trow = $(this).closest('tr');

                                    $details.push({
                                        'particulars' : $(this).val(),
                                        'payment_method' : $trow.find('.payment-method').val(),
                                        'senior_rate'   : $trow.find('.senior-val').val(),
                                        'discount_type' : 'percent',
                                        'discount_rate' : $trow.find('.discount-val').val(),
                                        'interest_type' : $trow.find('.interest-type').val(),
                                        'interest_rate' : $trow.find('.interest-val').val(),
                                        'atb_downpayment' : $trow.find('.atb-downpayment').val(),
                                        'terms_min' : $trow.find('.terms-min').val(),
                                        'terms_max' : $trow.find('.terms-max').val()
                                    });
                                }
                            });

                            $.ajax({
                                url: $app_url + '/administrator/application-promos/save',
                                type: 'post',
                                data: {
                                    'header' : $header,                    
                                    'details' : $details,
                                },
                                beforeSend: function() {
                                    $('.form-group').removeClass('has-error').prop('title', '');
                                    $jc.showLoading();
                                },
                                success: function() {
                                    $jc.close(true);
                                    $dt.draw();
                                },
                                error: function(result) {
                                    $.each(result.responseJSON, function(f, m) {
                                        // For header.
                                        $('#'+f.replace('header.', '')).closest('.form-group').addClass('has-error').prop('title', m);

                                        // For details.
                                        if(_.startsWith(f, 'details') == true) {
                                            var split = _.split(_.trimStart(f, 'details.'), '.', 2);
                                            var key   = split[0];
                                            var field = '.'+_.replace(split[1], '_', '-');

                                            $.each($('.particulars'), function(k) {
                                                if(key == k) {
                                                    $(this).closest('tr').find(field).parent('td').addClass('has-error');
                                                }
                                            });
                                        }
                                    });
                                },
                                complete: function() {
                                    $jc.hideLoading(true); 
                                }
                            });

                            return false;
                        }
                    }
                }
            });
        });
    }).on('keyup', '.terms-min', function(e) {
        $terms_min = Number($(e.target).val());
        $terms_max = Number($(e.target).closest('tr').find('.terms-max').val());

        if($terms_max < $terms_min) {
            $(e.target).closest('tr').find('.terms-max').val($terms_min).trigger('change');
        }
    }).on('keyup', '.terms-max', function(e) {
        $terms_max = Number($(e.target).val());
        $terms_min = Number($(e.target).closest('tr').find('.terms-min').val());

        if($terms_min > $terms_max) {
            $(e.target).closest('tr').find('.terms-min').val($terms_max).trigger('change');
        }
    }).on('click', '.promo-details', function(e) {
        alert('This function is under development.');
    }).on('click', '.promo-edit', function(e) {
        alert('This function is under development.');
    }).on('click', '.promo-delete', function(e) {
        $promo_id = $(this).closest('tr').data('promo-id');

        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'small',
            content: '<p>Are you sure you want to delete this promo?</p>',
            buttons: {
                CANCEL: {
                    btnClass:'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CONFIRM: {
                    btnClass: 'btn btn-danger',
                    text: '<i class="fa fa-trash"></i> DELETE',
                    action: function() {
                        $.ajax({
                            url: $app_url + '/administrator/application-promos/delete',
                            type: 'post',
                            data: { 'id' : $promo_id },
                            beforeSend: function() {
                                $jc.showLoading(true);
                            },
                            success: function() {
                                $jc.close();
                                $dt.draw();
                            },
                            error: function(res) {
                                $jc.setContent('<p class="text-danger">'+ res.responseJSON.msg +'</p>');
                            },
                            complete: function() {
                                $jc.hideLoading(true);
                            }
                        });

                        return false;
                    }
                }
            }
        })
    });
</script>

@endsection