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

<style type="text/css">
    table {
        font-size: 16px !important;
    } 
    .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; 
    }  
</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 Actuals</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 class="danger">TOTAL WATER CONS OF NEW BILLED CUSTOMERS (CuM)</th>
                                <th class="bg-warning">TARGET TOTAL WATER PRODUCTION(CuM)</th>
                                <th class="bg-success">ACTUAL TOTAL WATER PRODUCTION(CuM)</th>
                                <th class="bg-warning">TARGET LINE LOSS(%)</th>
                                <th class="bg-success">ACTUAL LINE LOSS(%)</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-actuals/get-actuals',
                type  : 'GET',
                data  : {
                    'capex_id' : capex_id
                },
                success : function(response){
                    load_capex(response);
                },
                error : function(xhr){ }
            });	
        }
    })
    .on('click', '#save-capex', function() {
        var row = $(this).closest('tr');
        var capex_id =  $('#capex-id option:selected').val();
        var target_id = row.data('tid');
        var month = row.find('td:eq(0)').text().trim();
        var total_water_prod = row.find("input[id='total_water_prod']").val().trim();
        var line_loss = row.find("input[id='line_loss']").val().trim();
        
        if (capex_id && target_id && month && total_water_prod && line_loss) {
            $.ajax({
                url   : $app_url + '/reports/special-capex-actuals/save-actual',
                type  : 'POST',
                data  : {
                    'capex_id'         : capex_id,
                    'target_id'        : target_id,
                    'month'            : month,
                    'total_water_prod' : total_water_prod,
                    'line_loss'        : line_loss
                },
                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 actuals!</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){ }
            });	
        }
    });

    function load_capex(response){
        var table = $('#table-capex > tbody');
        var capex = response.capex;
        table.empty();             
        
        $.each(capex, function(index){
            var d = capex[index];
            var total_water_prod = d.a_total_water_prod ? d.a_total_water_prod : "";
            var line_loss = d.a_line_loss ? d.a_line_loss : "";

            table.append("<tr data-tid='"+d.id+"'>"
                            +"<td>" + d.month + " Month</td>"
                            +"<td>" + d.month + " Month</td>"
                            +"<td>" + number_format(d.total_water_prod) + "</td>"
                            +"<td><input type='text' class='form-control' id='total_water_prod' value='"+total_water_prod+"'></td>"
                            +"<td>" + number_format(d.line_loss) + "</td>"
                            +"<td><input type='text' class='form-control' id='line_loss' value='"+line_loss+"'></td>"
                            +"<td><a class='btn btn-primary btn-flat' id='save-capex' style='font-size:16px;'>&nbsp;<i class='fa fa-save'></i>&nbsp;</a></td>"
                        +"</tr>");
        });      

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