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

<style type="text/css">
    .box-tools{
        margin-top: 3px;
        padding-right: 3px;
    }

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button { 
      -webkit-appearance: none; 
    }  

    table > tr > td > input {
        font-size: 16px !important;
    }

</style>

@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">Special Capex Targets</label>
                
                <div class="pull-right box-tools">
                    <button class="btn btn-default" id="report-clear" onclick="location.reload();">
                        <i class="fa fa-fw fa-eraser text-muted"></i>&nbsp;Clear
                    </button>
                </div>    

                <div class="pull-right box-tools">
                    <button class="btn btn-default" id="add-capex">
                        <i class="fa fa-plus-circle text-success"></i>&nbsp;Add Capex
                    </button>
                </div>      
                {{-- <div class="pull-right box-tools">
                    <button class="btn btn-default" id="report-generate">
                        <i class="fa fa-fw fa-recycle text-primary"></i>&nbsp;Generate
                    </button>
                </div>                        --}}
                
                <div class="pull-right box-tools" style="width: 350px;">
                    <select id="capex-id" class="form-control select2 select2-hidden-accessible" data-placeholder="Select Capex Project" style="width: 100%;" aria-hidden="true">
                        <option></option>
                        @foreach($capex AS $c)
                        <option value="{{ $c->id }}">{{ strtoupper($c->type) }} - {{ strtoupper($c->description) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
        <hr style="margin-top:6px; margin-bottom:8px">
        <div class="row">
            <div class="col-xs-12">
                <div id="report-container">
                    <table class="table table-bordered table-hover table-condensed" id="table-capex">
                        <thead class="table-header-bg">
                            <tr>
                                <th>TARGET MONTH</th>
                                <th>NO OF NEW CONNECTED CUSTOMERS</th>
                                <th>NO OF NEW BILLED CUSTOMERS</th>
                                <th>PROJECTED MONTHLY CONS OF NEW CUSTOMERS</th>
                                <th>TOTAL WATER CONS OF NEW BILLED CUSTOMERS (CuM)</th>
                                <th>TOTAL WATER PRODUCTION (CuM)</th>
                                <th>PRICE PER CuM</th>
                                <th>LINE LOSS (%)</th>
                                <th>REVENUE FROM WATER SALES</th>
                                <th>REVENUE FROM SERVICES</th>
                                <th>REVENUE FROM MATERIALS</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>  
        </div>
    </div>
</div>
@endsection


@section('scripts')
<script src="{{ URL::asset('js/reports/JsonExportExcel.min.js') }}"></script>
<script src="{{ URL::asset('js/elite.js') }}"></script>
<script type="text/javascript">
    $(document).ready(function() {
        
    })
    .on('select2:select', '#capex-id', function() {
        var capex_id =  $('#capex-id option:selected').val();

        if (capex_id) {
            $.ajax({
                url   : $app_url + '/reports/special-capex-targets/get-targets',
                type  : 'GET',
                data  : {
                    'capex_id' : capex_id
                },
                success : function(response){
                    load_capex(response);
                },
                error : function(xhr){ }
            });	
        }
    })
    .on('click', '#add_row', function() {
        var capex_id             = $('#capex-id option:selected').val();
        var month                = $('#month').val();
        var connected_cs         = $('#connected_cs').val();
        var billed_cs            = $('#billed_cs').val();
        var monthly_cons_cs      = $('#monthly_cons_cs').val();
        var total_cons_billed_cs = $('#total_cons_billed_cs').val();
        var total_water_prod     = $('#total_water_prod').val();
        var price_per_cum        = $('#price_per_cum').val();
        var line_loss            = $('#line_loss').val();
        var tr_water_sales       = $('#tr_water_sales').val();
        var tr_services          = $('#tr_services').val();
        var tr_materials         = $('#tr_materials').val();

        if (capex_id && 
            month &&
            connected_cs && 
            billed_cs && 
            monthly_cons_cs && 
            total_cons_billed_cs && 
            total_water_prod && 
            price_per_cum && 
            line_loss && 
            tr_water_sales &&
            tr_services &&
            tr_materials
            ) {
            $.ajax({
                url   : $app_url + '/reports/special-capex-targets/save-target',
                type  : 'POST',
                data  : {
                    'capex_id'             : capex_id,
                    'month'                : month,
                    'connected_cs'         : connected_cs,
                    'billed_cs'            : billed_cs,
                    'monthly_cons_cs'      : monthly_cons_cs,
                    'total_cons_billed_cs' : total_cons_billed_cs,
                    'total_water_prod'     : total_water_prod,
                    'price_per_cum'        : price_per_cum,
                    'line_loss'            : line_loss,
                    'tr_water_sales'       : tr_water_sales,
                    'tr_services'          : tr_services,
                    'tr_materials'         : tr_materials
                },
                success : function(response){
                    $.confirm({
                        draggable: true,
                        title: false,
                        type: 'green',
                        content:'<p class="text-center"><i class="fa fa-fw fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                "<p class='text-center'>Successfully added capex target!</p>",
                        buttons: {
                            yes: {
                                text: '<small>[ENTER]</small> got it!',
                                btnClass: 'btn-success',
                                keys: ['enter'],
                                action: function() {
                                    $('#capex-id').val(capex_id).trigger('select2:select');
                                }
                            }
                        }
                    });
                },
                error : function(xhr){ }
            });	
        }
    })
    .on('click', '#add-capex', function() {
        $.confirm({
            title   : 'Add Capex',
            content : "<div class=''>"
                        +"<div class='form-group' style='margin-bottom: 10px !important;'>"
                            +"<label class='control-label'>CAPEX NAME</label>"
                            +"<input type='text' class='form-control' id='capex-name'>"
                        +"</div>"
                        +"<div class='form-group' style='margin-bottom: 10px !important;'>"
                            +"<label class='control-label'>CAPEX TYPE</label>"
                            +"<select class='form-control select2 select2-hidden-accessible' id='capex-type' style='width: 100%;'>"
                                +"<option value='deepwell'>DEEPWEEL</option>"
                                +"<option value='pump'>PUMP</option>"
                                +"<option value='pipelaying'>PIPELAYING</option>"
                                +"<option value='ewt'>EWT</option>"
                            +"</select>"
                        +"</div>"
                        +"<div class='form-group' style='margin-bottom: 10px !important;'>"
                            +"<label class='control-label'>ENERGIZATION DATE</label>"
                            +"<input type='text' class='form-control date-masked' id='energization-date'>"
                        +"</div>"
                        +"<div class='form-group' style='margin-bottom: 10px !important;'>"
                            +"<label class='control-label'>BOOK</label>"
                            +"<select class='form-control select2 select2-hidden-accessible' multiple='true' id='book-id' style='width: 100%;'>"
                                +"<option value=''></option>"
                            +"</select>"
                        +"</div>"
                     +"</div>",
            type    : 'green',
            buttons : {
                SAVE : {
                    btnClass : 'btn-success',
                    action   : function(){
                        $.ajax({
                            url   : $app_url + '/reports/special-capex-targets/save-capex',
                            type  : 'POST',
                            data  : {
                                'capex_name'        : $('#capex-name').val(),
                                'capex_type'        : $('#capex-type option:selected').val(),
                                'energization_date' : $('#energization-date').val(),
                                'book_id'           : $('#book-id').val()
                            },
                            success : function(response){
                                $.confirm({
                                    draggable: true,
                                    title: false,
                                    type: 'green',
                                    content:'<p class="text-center"><i class="fa fa-fw fa-check text-bold text-success" style="font-size:54px"></i></p>' +
                                            "<p class='text-center'>Successfully added capex!</p>",
                                    buttons: {
                                        yes: {
                                            text: '<small>[ENTER]</small> got it!',
                                            btnClass: 'btn-success',
                                            keys: ['enter'],
                                            action: function() {
                                                location.reload();
                                            }
                                        }
                                    }
                                });
                            },
                            error : function(xhr){ }
                        });
                    }
                },
                CANCEL : function(){

                }
            },
            onContentReady : function(){
                $(".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);
                    }
                });           
                
                

                $('#capex-type').select2({
                    dropdownParent : $('.jconfirm-scrollpane')
                });

                $('#book-id').select2({
                    dropdownParent : $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/books',
                        delay: 200,
                        data: function (params) {
                            return query = {
                                search: params.term
                            }
                        },
                        processResults: function (data) {
                            console.log(data);
                            return {
                                results: $.map(data, function (item) {
                                    return {
                                        text: item.code + ' - ' + item.description,
                                        id: item.id
                                    }
                                })
                            };
                        }
                    }
                });

                $('#capex-name').focus();        
            },
            draggable : true
        });
    });

    function load_capex(response){
        var table = $('#table-capex > tbody');
        var capex = response.capex;
        var last_mos = (parseInt(response.last_mos, 10) || 0) + 1;

        table.empty();             
        add_row(last_mos);
        
        $.each(capex, function(index){
            var d = capex[index];

            table.append("<tr>"
                            +"<td>" + d.month + "</td>"
                            +"<td>" + d.connected_cs + "</td>"
                            +"<td>" + d.billed_cs + "</td>"
                            +"<td>" + number_format(d.monthly_cons_cs) + "</td>"
                            +"<td>" + number_format(d.total_cons_billed_cs) + "</td>"
                            +"<td>" + number_format(d.total_water_prod) + "</td>"
                            +"<td>" + number_format(d.price_per_cum) + "</td>"
                            +"<td>" + number_format(d.line_loss) + "</td>"
                            +"<td>" + number_format(d.tr_water_sales) + "</td>"
                            +"<td>" + number_format(d.tr_services) + "</td>"
                            +"<td>" + number_format(d.tr_materials) + "</td>"
                            +"<td>&nbsp;</td>"
                        +"</tr>");
        });      

        // var last = $('#table-capex tr:last td:first').text();
        $('#connected_cs').focus();
    }

    function add_row(num) {
        var month                = '<input name="month"                type="number" style="font-size: 16px !important;" id="month" value="'+num+'" class="form-control inputs" readonly>';
        var connected_cs         = '<input name="connected_cs"         type="number" style="font-size: 16px !important;" id="connected_cs" value="" class="form-control inputs">';
        var billed_cs            = '<input name="billed_cs"            type="number" style="font-size: 16px !important;" id="billed_cs" value="" class="form-control inputs">';
        var monthly_cons_cs      = '<input name="monthly_cons_cs"      type="number" style="font-size: 16px !important;" id="monthly_cons_cs" value="" class="form-control inputs">';
        var total_cons_billed_cs = '<input name="total_cons_billed_cs" type="number" style="font-size: 16px !important;" id="total_cons_billed_cs" value="" class="form-control inputs">';
        var total_water_prod     = '<input name="total_water_prod"     type="number" style="font-size: 16px !important;" id="total_water_prod" value="" class="form-control inputs">';
        var price_per_cum        = '<input name="price_per_cum"        type="number" style="font-size: 16px !important;" id="price_per_cum" value="" class="form-control inputs">';
        var line_loss            = '<input name="line_loss"            type="number" style="font-size: 16px !important;" id="line_loss" value="" class="form-control inputs">';
        var tr_water_sales       = '<input name="tr_water_sales"       type="number" style="font-size: 16px !important;" id="tr_water_sales" value="" class="form-control inputs">';
        var tr_services          = '<input name="tr_services"          type="number" style="font-size: 16px !important;" id="tr_services" value="" class="form-control inputs">';
        var tr_materials         = '<input name="tr_materials"         type="number" style="font-size: 16px !important;" id="tr_materials" value="" class="form-control inputs">';
        var add_btn              = '<a href="#" class="btn btn-flat btn-success" id="add_row" style="padding: 8px 12px !important; font-size: 16px !important;"><i class="fa fa-plus-circle"></i></a>';

        var row = '<tr>'
                    + '<td class="cellpad-top">'
                        + month
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + connected_cs
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + billed_cs
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + monthly_cons_cs
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + total_cons_billed_cs
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + total_water_prod
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + price_per_cum
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + line_loss
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + tr_water_sales
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + tr_services
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + tr_materials
                    + '</td>'
                    + '<td class="cellpad-top">'
                        + add_btn
                    + '</td>'
                 +'</tr>';

        $('#table-capex > tbody').append(row);                 
    }
</script>
@endsection