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

@section('header')
    Dashboard
@endsection

@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">Connection Materials Preset</label> 

                {{-- <div class="pull-right box-tools">
                    <a href="#" class="btn btn-success btn-flat pull-right export-excel" style="margin-left:2px"><i class="fa fa-file-excel-o"></i> Export Excel</a>
                </div> --}}
                
                <div class="pull-right box-tools">
                    <a href="#" id="new-cm-preset" class="btn btn-default pull-right"><i class="fa fa-plus-circle text-success"></i> New Conn Type Preset</a>
                </div>

                <div class="pull-right" style="width:180px; margin-right:3px">
                    <select id="filter-by-default" class="form-control select2 select2-hidden-accessible" data-placeholder="IS DEFAULT" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        <option value="d">DEFAULT</option>
                        <option value="nd">NOT DEFAULT</option>
                    </select>
                </div>

                <div class="pull-right" style="width:180px; margin-right:3px">
                    <select id="filter-by-conntypes" class="form-control select2 select2-hidden-accessible" data-placeholder="CONN TYPE" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($conntypes AS $cn)
                            <option value="{{ $cn->id }}">{{ strtoupper($cn->description) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
  		<div class="row">
    		<div class="col-xs-12">
      			<table class="table table-hover table-condensed" id="table-connection-materials" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="47%">CONNECTION TYPE</th>
                            <th width="40%">DESCRIPTION</th>
                            <th width="10%">DEFAULT PRESET</th>
                            <th width="3%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
    		</div>
	  	</div>
	</div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
    $(document).on('ready', function() {
        $dt = $('#table-connection-materials').DataTable({
            deferred: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: $app_url + '/warehouse/connection-materials/dt',
                data: function(d) {
                    d.conntype = $('#filter-by-conntypes option:selected').val();
                    d.is_default = $('#filter-by-default option:selected').val();
                }
            },
            columns: [
                { data:'connection_type',       name:'connection_type',         orderable:false,   className:"text-uppercase",  searchable: false  },
                { data:'preset_description',    name:'ctm.preset_description',  orderable:false,   className:"text-uppercase" },
                { data:'is_default',            name:'ctm.is_defeault',         orderable:false,   className:"text-uppercase",  searchable: false  },
                { data:'action',                name:'action',                  orderable:false,  searchable: false  }
            ],
            createdRow: function(row, data, dataIndex) {
                $(row).attr('data-id', data.id);
            }
        });

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

        $('input[type="search"]').focus();

        $('#filter-by-conntypes').on('change', function() {
            $dt.search($('#table-connection-materials_filter input').val()).draw();
        });

        $('#filter-by-default').on('change', function() {
            $dt.search($('#table-connection-materials_filter input').val()).draw();
        });

        $('.export-excel').on('click', function() {
            $default = $('#filter-by-default').val();
            $conntypes = $('#filter-by-conntypes').val();

            if ($default != "" || $conntypes != "") {
                window.open($app_url + '/warehouse/connection-materials/get-excel-conn-materials?default=' + $default + '&conntypes=' + $conntypes);
            }
            else {
                $.confirm({
                    draggable: true,
                    title: false,
                    type: 'orange',
                    content: '<p class="text-center"><i class="fa fa-fw fa-warning text-bold text-warning" style="font-size:54px"></i></p>' +
                            "<p class='text-center'>Please select a filter!</p>",
                    buttons: {
                        yes: {
                            text: '<small>[ENTER]</small> got it!',
                            btnClass: 'btn-warning',
                            keys: ['enter']
                        }
                    }
                });
            }
        });
    }).on('click', '#new-cm-preset', function() {
        $jc = $.confirm({
            title: '',
            draggable: true,
            columnClass: 'x-large',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/warehouse/connection-materials/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() {
                $('#conntype_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane')
                });

                $('#material_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane')
                })
                .on('select2:select', function() {
                    var id     = $('#material_id option:selected').data('id');
                    var uom    = $('#material_id option:selected').data('uom');
                    var desc   = $('#material_id option:selected').text();
                    var price  = $('#material_id option:selected').data('price')
                    var qty    = "<input type='text' value='1' class='mats-qty text-right form-control input-sm num wnum-only pnum-only' style='width: 100%;''>";
                    var uprice = "<input type='text' value='"+price+"' class='mats-uprice text-right form-control input-sm curr' data-num-min='1' data-num-max='999999' style='width: 100%;'' disabled='true'>";
                    var tbody  = $('#table-materials > tbody');

                    var dupe   = 0;
                    var items  = $('#table-materials > tbody > tr');

                    if (price <= 0) {
                        $.confirm({
                            draggable: true,
                            title: false,
                            type: 'red',
                            content:'<p class="text-center"><i class="fa fa-fw fa-exclamation-circle text-bold text-danger" style="font-size:54px"></i></p>' +
                                    '<h4 class="text-center text-bold text-danger">SOMETHING WENT WRONG</h4>' +
                                    '<hr style="margin-bottom:8px">' +
                                    '<p class="text-center">Service <strong>'+desc.toUpperCase()+'</strong> price is set to <strong>ZERO</strong>. Please contact Central Billing and IT for assistance.</p>',
                            buttons: {
                                yes: {
                                    text: '<small>[ENTER]</small> got it!',
                                    btnClass: 'btn-danger',
                                    keys: ['enter']
                                }       
                            }
                        });
                        return false;
                    }

                    items.each(function() {
                        if($(this).data('item-id') == id) { dupe++; }
                    });

                    if(id == null) {
                        $.alert({
                            icon: 'fa fa-exclamation-circle',
                            title: 'Alert!',
                            content: 'Please select an item first.',
                            draggable: true,
                            type: 'orange'
                        });
                    } else {
                        if(dupe > 0) {
                            $.alert({
                                icon: 'fa fa-exclamation-circle',
                                title: 'Alert!',
                                content: 'The item you are about to add already exists.',
                                draggable: true,
                                type: 'orange'
                            });

                            $('#material_id').val('').trigger('change');
                        } else {
                            tbody.append("<tr class='mc-mats' data-item-id="+id+">"
                                +"<td>"+ desc.toUpperCase() +"</td>"
                                +"<td>"+ uom.toUpperCase() +"</td>"
                                +"<td class='cellpad-top'>"+ uprice +"</td>"
                                +"<td class='cellpad-top'>"+ qty +"</td>"
                                +"<td class='text-right'>"+ price +"</td>"
                                +"<td class='text-center'><a href='#' class='text-danger remove-mat'><i class='fa fa-trash' style='margin-top:3px'></i></a></td>"
                                +"</tr>");

                            var $table  = $('#table-materials > tbody > tr');
                            var $amount = 0;
                            var $total  = 0;

                            $table.each(function(){
                                $amount = $(this).find('td:eq(4)').text().replace(',','');
                                $total  = Number($total) + Number($amount);
                            });

                            total($total);
                        } 

                        if ($company == 3 || $branch == 80 || ($mats_update != '' && $mats_update >= $date)) {
                            $('.mats-uprice').prop('disabled', false);
                        }
                        else {
                            $('.mats-uprice').prop('disabled', true);
                        }
                    }
                });

                $(document)
                .on('keyup change', '.mats-qty, .mats-uprice', function() {
                    var $row    = $(this).closest('tr');
                    var $qty    = Number($row.find('.mats-qty').val());
                    var $uprice = Number($row.find('.mats-uprice').val().replace(',', ''));

                    $qty    = $qty ? $qty : 0;
                    $uprice = Number($uprice) ? $uprice : 1.00;

                    var $amount = $qty * $uprice;
                    $row.find('td:eq(4)').text(numeral($amount).format('0,0.00'));

                    var $table  = $('#table-materials > tbody > tr');
                    var $amount = 0;
                    var $total  = 0;

                    $table.each(function(){
                        $amount = $(this).find('td:eq(4)').text().replace(',','');
                        $total  = Number($total) + Number($amount);
                    });

                    total($total);
                })
                .on('click', '.remove-mat', function() {
                    $(this).closest('tr').remove();

                    var $table  = $('#table-materials > tbody > tr');
                    var $amount = 0;
                    var $total  = 0;

                    $table.each(function(){
                        $amount = $(this).find('td:eq(4)').text().replace(',','');
                        $total  = Number($total) + Number($amount);
                    });

                    total($total);
                })
                .on('change', '#payment_method', function() {
                    if($(this).val() == 'atb') {
                        $('#atb-terms')
                            .val('1')
                            .prop('disabled', false)
                            .trigger('change');
                    } else {
                        $('#atb-terms')
                            .val(null)
                            .prop('disabled', true);
                    }
                });

                var total = function($total) {
                    if($total > 0) {
                        $('#materials-summary').css('display', 'block');
                        $('.total-amount').data('amt', $total)
                                       .text(numeral($total).format('0,0.00'))
                                       .trigger('change');
                    } else {
                        $('#materials-summary').css('display', 'none');
                        $('.total-amount').data('amt', 0)
                                       .text('0.00')
                                       .trigger('change');
                    }

                    $('#material_id').val('').trigger('change');
                }
            },
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-danger',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                DONE: {
                    btnClass: 'btn btn-primary',
                    text: 'SAVE NEW MATERIALS PRESET',
                    keys: ['enter'],
                    action: function() {
                        $.confirm({
                            title: '',
                            draggable: true,
                            content: 'Save this new connection materials preset?',
                            buttons: {
                                CANCEL: {
                                    btnClass: 'btn btn-danger',
                                    text: '<small>[ESC]</small> CANCEL',
                                    keys: ['esc']
                                },
                                CONFIRM: {
                                    btnClass: 'btn btn-primary',
                                    text: '<small>[ENTER]</small> CONFIRM',
                                    keys: ['enter'],
                                    action: function() {
                                        mats = [];

                                        $.each($('#table-materials .mc-mats'), function() {
                                            var row = $(this).closest('tr');

                                            var qty = Number($(this).find('.mats-qty').val().replace(',', ''));
                                            var upr = Number($(this).find('.mats-uprice').val().replace(',', ''));

                                            mats.push({
                                                "material_id"   : $(this).data('item-id'),
                                                "material_desc" : row.find('td:eq(0)').text(),
                                                "material_uom"  : row.find('td:eq(1)').text(),
                                                "unit_price"    : upr.toFixed(2),
                                                "quantity"      : qty,
                                                "total_price"   : Number(upr * qty).toFixed(2)
                                            });
                                        });

                                        if(mats.length > 0) {
                                            $.ajax({
                                                url: $app_url + '/warehouse/connection-materials/save',
                                                data: { 
                                                    'conntype_id': $('#conntype_id').val(),
                                                    'preset_title': $('#preset_title').val(),
                                                    'details': mats
                                                },
                                                method: 'post',
                                                beforeSend: function() {
                                                    $('.form-group').removeClass('has-error').prop('title', '');
                                                }
                                            }).done(function(res) {
                                                $jc.close();
                                                $dt.draw();
                                            }).fail(function(res) {
                                                if(res.status == 422) {
                                                    $.each(res.responseJSON, function(field, message) {
                                                        $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                                    });
                                                } else {
                                                    alert('Unknown error occured. Please try again.');
                                                }
                                            }); 
                                        } else {
                                            $.alert({
                                                icon: 'fa fa-exclamation-circle',
                                                title: 'Alert!',
                                                content: 'At least one (1) material is required to proceed.',
                                                draggable: true,
                                                type: 'orange'
                                            });
                                        }
                                    }
                                }
                            }
                        });

                        return false;
                    }
                }
            }
        });
    }).on('click', '.preset-edit', function() {
        $id = $(this).data('id');
        
        $jc = $.confirm({
            title: '',
            draggable: true,
            columnClass: 'x-large',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/warehouse/connection-materials/edit',
                    data: {
                        'id' : $id
                    },
                    method: 'get'
                }).done(function(res) {
                    self.setContent(res);
                }).fail(function() {
                    self.setContent('Something went wrong. Please try again or refresh the page.');
                });
            },
            onContentReady: function() {
                if ($company == 3 || $branch == 80 || ($mats_update != '' && $mats_update >= $date)) {
                    $('.mats-uprice').prop('disabled', false);
                }
                else {
                    $('.mats-uprice').prop('disabled', true);
                }

                $('#edit_conntype_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane')
                });

                $('#edit-material_id').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane')
                })
                .on('select2:select', function() {
                    var id     = $('#edit-material_id option:selected').data('id');
                    var uom    = $('#edit-material_id option:selected').data('uom');
                    var desc   = $('#edit-material_id option:selected').text();
                    var price  = $('#edit-material_id option:selected').data('price')
                    var qty    = "<input type='text' value='1' class='mats-qty text-right form-control input-sm num wnum-only pnum-only' style='width: 100%;''>";
                    var uprice = "<input type='text' value='"+price+"' class='mats-uprice text-right form-control input-sm curr' data-num-min='1' data-num-max='999999' style='width: 100%;''>";
                    var tbody  = $('#table-edit-materials > tbody');

                    var dupe   = 0;
                    var items  = $('#table-edit-materials > tbody > tr');

                    items.each(function() {
                        if($(this).data('item-id') == id) { dupe++; }
                    });

                    if(id == null) {
                        $.alert({
                            icon: 'fa fa-exclamation-circle',
                            title: 'Alert!',
                            content: 'Please select an item first.',
                            draggable: true,
                            type: 'orange'
                        });
                    } else {
                        if(dupe > 0) {
                            $.alert({
                                icon: 'fa fa-exclamation-circle',
                                title: 'Alert!',
                                content: 'The item you are about to add already exists.',
                                draggable: true,
                                type: 'orange'
                            });

                            $('#material_id').val('').trigger('change');
                        } else {
                            tbody.append("<tr class='mc-edit-mats' data-item-id="+id+">"
                                +"<td>"+ desc.toUpperCase() +"</td>"
                                +"<td>"+ uom.toUpperCase() +"</td>"
                                +"<td class='cellpad-top'>"+ uprice +"</td>"
                                +"<td class='cellpad-top'>"+ qty +"</td>"
                                +"<td class='text-right'>"+ price +"</td>"
                                +"<td class='text-center'><a href='#' class='text-danger remove-mat'><i class='fa fa-trash' style='margin-top:3px'></i></a></td>"
                                +"</tr>");

                            var $table  = $('#table-edit-materials > tbody > tr');
                            var $amount = 0;
                            var $total  = 0;

                            $table.each(function(){
                                $amount = $(this).find('td:eq(4)').text().replace(',','');
                                $total  = Number($total) + Number($amount);
                            });

                            total($total);
                        } 
                    }

                    if ($company == 3 || $branch == 80 || ($mats_update != '' && $mats_update >= $date)) {
                        $('.mats-uprice').prop('disabled', false);
                    }
                    else {
                        $('.mats-uprice').prop('disabled', true);
                    }
                });

                $(document)
                .on('keyup change', '.mats-qty, .mats-uprice', function() {
                    var $row    = $(this).closest('tr');
                    var $qty    = Number($row.find('.mats-qty').val());
                    var $uprice = Number($row.find('.mats-uprice').val().replace(',', ''));

                    $qty    = $qty ? $qty : 0;
                    $uprice = Number($uprice) ? $uprice : 1.00;

                    var $amount = $qty * $uprice;
                    $row.find('td:eq(4)').text(numeral($amount).format('0,0.00'));

                    var $table  = $('#table-edit-materials > tbody > tr');
                    var $amount = 0;
                    var $total  = 0;

                    $table.each(function(){
                        $amount = $(this).find('td:eq(4)').text().replace(',','');
                        $total  = Number($total) + Number($amount);
                    });

                    total($total);
                })
                .on('click', '.remove-mat', function() {
                    $(this).closest('tr').remove();

                    var $table  = $('#table-edit-materials > tbody > tr');
                    var $amount = 0;
                    var $total  = 0;

                    $table.each(function(){
                        $amount = $(this).find('td:eq(4)').text().replace(',','');
                        $total  = Number($total) + Number($amount);
                    });

                    total($total);
                })
                .on('change', '#payment_method', function() {
                    if($(this).val() == 'atb') {
                        $('#atb-terms')
                            .val('1')
                            .prop('disabled', false)
                            .trigger('change');
                    } else {
                        $('#atb-terms')
                            .val(null)
                            .prop('disabled', true);
                    }
                });

                var total = function($total) {
                    if($total > 0) {
                        $('#materials-summary').css('display', 'block');
                        $('.total-amount').data('amt', $total)
                                       .text(numeral($total).format('0,0.00'))
                                       .trigger('change');
                    } else {
                        $('#materials-summary').css('display', 'none');
                        $('.total-amount').data('amt', 0)
                                       .text('0.00')
                                       .trigger('change');
                    }

                    $('#material_id').val('').trigger('change');
                }

                
            },
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-danger',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                DONE: {
                    btnClass: 'btn btn-primary',
                    text: 'UPDATE MATERIALS PRESET',
                    keys: ['enter'],
                    action: function() {
                        $.confirm({
                            title: '',
                            draggable: true,
                            content: 'Save this new connection materials preset?',
                            buttons: {
                                CANCEL: {
                                    btnClass: 'btn btn-danger',
                                    text: '<small>[ESC]</small> CANCEL',
                                    keys: ['esc']
                                },
                                CONFIRM: {
                                    btnClass: 'btn btn-primary',
                                    text: '<small>[ENTER]</small> CONFIRM',
                                    keys: ['enter'],
                                    action: function() {
                                        mats = [];

                                        $.each($('#table-edit-materials .mc-edit-mats'), function() {
                                            var row = $(this).closest('tr');

                                            var qty = Number($(this).find('.mats-qty').val().replace(',', ''));
                                            var upr = Number($(this).find('.mats-uprice').val().replace(',', ''));

                                            mats.push({
                                                "material_id"   : $(this).data('item-id'),
                                                "material_desc" : row.find('td:eq(0)').text(),
                                                "material_uom"  : row.find('td:eq(1)').text(),
                                                "unit_price"    : upr.toFixed(2),
                                                "quantity"      : qty,
                                                "total_price"   : Number(upr * qty).toFixed(2)
                                            });
                                        });

                                        if(mats.length > 0) {
                                            $.ajax({
                                                url: $app_url + '/warehouse/connection-materials/update',
                                                data: { 
                                                    'edit_conntype_id': $('#edit_conntype_id').val(),
                                                    'edit_preset_title': $('#edit_preset_title').val(),
                                                    'details': mats,
                                                    'preset_id': $id
                                                },
                                                method: 'post',
                                                beforeSend: function() {
                                                    $('.form-group').removeClass('has-error').prop('title', '');
                                                }
                                            }).done(function(res) {
                                                $jc.close();
                                                $dt.draw();
                                            }).fail(function(res) {
                                                if(res.status == 422) {
                                                    $.each(res.responseJSON, function(field, message) {
                                                        $('#'+field).closest('.form-group').addClass('has-error').prop('title', message);
                                                        console.log(field)
                                                    });
                                                } else {
                                                    alert('Unknown error occured. Please try again.');
                                                }
                                            }); 
                                        } else {
                                            $.alert({
                                                icon: 'fa fa-exclamation-circle',
                                                title: 'Alert!',
                                                content: 'At least one (1) material is required to proceed.',
                                                draggable: true,
                                                type: 'orange'
                                            });
                                        }
                                    }
                                }
                            }
                        });

                        return false;
                    }
                }
            }
        });
    }).on('click', '.preset-delete', function() {
        $id = $(this).data('id');

        $jc = $.confirm({
            title: false,
            type: 'red',
            draggable: true,
            columnClass: 'small',
            content: '<p class="text-center"><i class="fa fa-gg text-bold text-danger" style="font-size:54px"></i></p>' +
                    '<p class="text-center">Are you sure you want to delete this preset?</p>',
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CONFIRM: {
                    btnClass: 'btn btn-danger',
                    text: '<small>[ESC]</small> DELETE PRESET',
                    keys: ['enter'],
                    action: function() {
                        $.ajax({
                            url: $app_url + '/warehouse/connection-materials/delete',
                            data: { 'id': $id },
                            method: 'get',
                        }).done(function(res) {
                            $jc.close();
                            $dt.draw();
                        }).fail(function(res) {
                            alert('Unknown error occured. Please try again.');
                        });   

                        return false;
                    }
                }
            }
        });
    }).on('click', '.preset-default', function() {
        $id = $(this).data('id');

        $jc = $.confirm({
            title: false,
            type: 'blue',
            draggable: true,
            columnClass: 'small',
            content: '<p class="text-center"><i class="fa fa-question-circle text-bold text-primary" style="font-size:54px"></i></p>' +
                    '<p class="text-center">Are you sure you want to make this preset as default?</p>',
            buttons: {
                CANCEL: {
                    btnClass: 'btn btn-default',
                    text: '<small>[ESC]</small> CANCEL',
                    keys: ['esc']
                },
                CONFIRM: {
                    btnClass: 'btn btn-primary',
                    text: '<small>[ENTER]</small> CONFIRM',
                    keys: ['enter'],
                    action: function() {
                        $.ajax({
                            url: $app_url + '/warehouse/connection-materials/default',
                            data: { 'id': $id },
                            method: 'get',
                        }).done(function(res) {
                            $jc.close();
                            $dt.draw();
                        }).fail(function(res) {
                            alert('Unknown error occured. Please try again.');
                        });   

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