@extends('layouts.app')
@section('title', 'BWSI')

@section('body')
<div class="row" style="padding-left:5px; padding-right:5px">
    <div class="box-header with-border">
        <h3 class="box-title">Job Order Accomplishment</h3>
        <div class="box-tools pull-right">
            <a href="{{url('csr/job-order')}}" class="btn btn-sm btn-flat btn-default"><i class="fa fa-reply"></i> Go Back</a>
            <button type="button" class="btn btn-sm btn-flat btn-warning" id="btn-accomplish-jo" data-id="{{ $joborder->id }}" data-code="{{ $joborder->jo_code }}" data-acct-id="{{ $joborder->acct_id }}" data-appl-id="{{ $joborder->appl_id }}"><i class="fa fa-save"></i> Accomplish Job Order</button>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-xs-8" style="padding-right:5px">
        <div class="box box-default" style="margin-bottom:10px; height:295px">
            <div class="box-body">
                @if($joborder->jo_code == 'SAS')
                    @include('csr.job-order.findings.sub_sas')
                @endif

                @if($joborder->jo_code == 'NC')
                    @include('csr.job-order.findings.sub_nc')
                @endif

                @if($joborder->jo_code == 'DC-DA')
                    @include('csr.job-order.findings.sub_dcda')
                @endif

                @if($joborder->jo_code == 'DC-CR')
                    @include('csr.job-order.findings.sub_dccr')
                @endif

                @if($joborder->jo_code == 'RC')
                    @include('csr.job-order.findings.sub_rc')
                @endif

                @if($joborder->jo_code == 'IC')
                    @include('csr.job-order.findings.sub_ic')
                @endif

                @if($joborder->jo_code == 'CM')
                    @include('csr.job-order.findings.sub_cm')
                @endif

                @if($joborder->jo_code == 'MC')
                    @include('csr.job-order.findings.sub_mc')
                @endif

                @if($joborder->jo_code == 'CAC')
                    @include('csr.job-order.findings.sub_cac')
                @endif

                @if($joborder->jo_code == 'CCT')
                    @include('csr.job-order.findings.sub_cct')
                @endif

                @if($joborder->jo_code == 'SL')
                    @include('csr.job-order.findings.sub_sl')
                @endif

                @if($joborder->jo_code == 'RM')
                    @include('csr.job-order.findings.sub_rm')
                @endif

                @if($joborder->jo_code == 'OT' || $joborder->jo_code == 'SV')
                    @include('csr.job-order.findings.sub_ot')
                @endif            
            </div>
        </div>

        <div class="box box-default" style="margin-bottom:10px; height:210px">
            <div class="box-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <span class="text-bold text-muted">REMARKS</span>
                            <input name="remarks" id="remarks" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div class="form-group">
                            <span class="text-bold text-muted">ACCOMPLISHED BY</span>
                            <select id="accomplished_by" name="accomplished_by" class="form-control select2 select2-hidden-accessible" multiple="true" style="width: 100%;" aria-hidden="true">
                                @foreach($employees AS $e)
                                <option value="{{ $e->id }}">{{ strtoupper($e->name) }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-4">
                        <div class="form-group">
                            <span class="text-bold text-muted">DATE-TIME STARTED</span>
                            <input name="date_started" id="date_started" value="{{ \Carbon\Carbon::now()->subMinutes(3)->format('Y-m-d h:i A') }}" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <span class="text-bold text-muted">DATE-TIME FINISHED</span>
                            <input name="date_finished" id="date_finished" value="{{ \Carbon\Carbon::now()->subMinutes(2)->format('Y-m-d h:i A') }}" type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-4">
                        <div class="form-group">
                            <span class="text-bold text-muted">DATE TIME RETURNED</span>
                            <input name="date_returned" id="date_returned" value="{{ \Carbon\Carbon::now()->subMinutes(1)->format('Y-m-d h:i A') }}" type="text" class="form-control">
                        </div>                   
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xs-4" style="padding-left:5px">
        <div class="box box-default" style="height:515px">
            <div class="box-body">
                <div class="row">
                    <div class="form-group col-xs-12">
                        <p class="text-muted text-bold no-margin">JOB ORDER DETAILS</p>
                        <div class="row">
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-wrench"></i><span>{{ strtoupper($joborder->jo_number) }}</span>
                            </div>
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-exclamation-triangle"></i><span>CRITICAL JO: {{ $joborder->is_critical == true ? 'YES' : 'NO' }}</span>
                            </div>
                            <div class="col-xs-12">
                                <i class="fa fa-fw margin-r-5 text-success fa-tags"></i><span>{{ strtoupper($joborder->jo_category) }}</span>
                            </div>
                            <div class="col-xs-12">
                                <i class="fa fa-fw margin-r-5 text-success fa-tag"></i><span>{{ $joborder->jo_reason ? strtoupper($joborder->jo_reason) : '-' }}</span>
                            </div>
                            <div class="col-xs-12">
                                <i class="fa fa-fw margin-r-5 text-success fa-location-arrow"></i><span>{{ strtoupper($joborder->complete_address) }}</span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-12">
                                <i class="fa fa-fw margin-r-5 text-success fa-user"></i><span>{{ strtoupper($joborder->cust_name) }}</span>
                            </div>
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-lock"></i><span>{{ $joborder->acct_number ? $joborder->acct_number : '-'  }}</span>
                            </div>
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-briefcase"></i><span>{{ $joborder->acct_class }} - {{ $joborder->acct_subclass }}</span>
                            </div>
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-tachometer"></i><span>{{ $joborder->meter_no ? $joborder->meter_brand .' - '. $joborder->meter_no : '-' }}</span>
                            </div>
                            <div class="col-xs-6">
                                <i class="fa fa-fw margin-r-5 text-success fa-book"></i><span>{{ $joborder->book_code ? $joborder->book_code : '-' }}</span>
                            </div>
                        </div>
                        <br>

                        <div class="row">
                            <div class="col-xs-6">
                                <span class="text-bold text-muted">MATERIALS</span><br>
                                @if($joborder->materials->count() > 0)
                                <table>
                                    @foreach($joborder->materials AS $m)
                                    <tr title="{{ $m->material_desc . ' X ' . $m->quantity }}">
                                        <td><i class="fa fa-fw fa-shopping-cart text-success"></i></td>
                                        <td>PHP {{ number_format($m->amt_net,2,".",",") }}&nbsp;</td>
                                        <td>
                                            @if($m->payment_method == 'full')
                                                @if($m->status == 'p')
                                                <label class="label label-success">FP | P</label>
                                                @else
                                                <label class="label label-danger">FP | UP</label>
                                                @endif
                                            @elseif($m->payment_method == 'atb')
                                                <label class="label label-primary">ATB</label>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </table>
                                @else
                                <label class="label label-warning">NO MATERIALS</label>
                                @endif
                            </div>
                            <div class="col-xs-6">
                                <span class="text-bold text-muted">SERVICES</span><br>
                                @if($joborder->services->count() > 0)
                                <table>
                                    @foreach($joborder->services AS $s)
                                    <tr title="{{ $s->description }}">
                                        <td><i class="fa fa-fw fa-wrench text-success"></i></td>
                                        <td>PHP {{ number_format($s->amt_net,2,".",",") }}&nbsp;</td>
                                        <td>
                                            @if($s->payment_method == 'full')
                                                @if($s->status == 'p')
                                                <label class="label label-success">FP | P</label>
                                                @else
                                                <label class="label label-danger">FP | UP</label>
                                                @endif
                                            @elseif($s->payment_method == 'atb')
                                                <label class="label label-primary">ATB</label>
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </table>
                                @else
                                <label class="label label-warning">NO SERVICES</label>
                                @endif
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="col-xs-12">
                                <span class="text-bold text-muted">PREPARED BY</span><br>
                                <span>
                                    {{ strtoupper($joborder->prepared_by) }}<br>
                                    {{ date_format(date_create($joborder->created_at),"M d, Y H:i") }}
                                </span>
                            </div>

                            <div class="col-xs-12" style="margin-top:10px">
                                <span class="text-bold text-muted">DISPATCHED TO</span><br>
                                <span>
                                    @foreach($joborder->dispatched_to AS $key => $d)
                                        @if($key == 0)
                                        {{ strtoupper($d->name) }}
                                        @else
                                        {{ ', '.strtoupper($d->name) }}
                                        @endif
                                    @endforeach<br> 
                                    {{ date_format(date_create($joborder->dispatched_at),"M d, Y H:i") }}
                                </span>
                            </div>

                            <div class="col-xs-12" style="margin-top:10px">
                                <span class="text-bold text-muted">NOTE TO FIELDSMEN</span><br>
                                <span>{{ $joborder->notes ? strtoupper($joborder->notes) : '-' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ url(mix('js/csr-joborder-findings.js')) }}"></script>
<script type="text/javascript">
    $(document).on('select2:select', '#connection_type', function(e) {
        var ctype = $('#connection_type option:selected').data('ctype');
                    
        $.get($app_url + '/csr/application/assessment-ctype-fees', { 'ctype_id' : ctype }).done(function(data) {
            $('#mats-amt').val(numeral(data.total).format('0,0.00'))
                          .data('amt', Number(data.total))
                          .data('details', data.mats);
        });                                

        $.get($app_url + '/csr/application/assessment-services-details', { 'ctype_id' : ctype }).done(function(data) {
            $('#sfee-amt').val(numeral(data.total).format('0,0.00'))
                          .data('amt', Number(data.total))
                          .data('details', data.services);
        });
    }).on('select2:unselect', '#connection_type', function(e) {
        $('#mats-amt').data('details', null)
                      .data('amt', 0)
                      .val('0.00');

        $('#sfee-amt').data('details', null)
                      .data('amt', 0)
                      .val('0.00');
    }).on('click', '.jo-materials',  function() {
        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'large',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/application/assessment-materials',
                    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() {
                function FormatMaterialsPresetSearchResults(results) {
                    if(results.loading) return results.text;

                    var markup = "<div class='select2-result-repository clearfix'>" +
                                 "<div class='select2-result-repository__title'>" + results.text + " (" + results.connection_type + ")" + "</div>";

                    return markup;
                }

                function FormatMaterialsSearchResults(results) {
                    if(results.loading) return results.text;

                    $category = results.item_category ? results.item_category.toUpperCase() : 'N/A';
                    $code     = results.item_code ? results.item_code.toUpperCase() : 'N/A';
                    $uom      = results.item_uom ? results.item_uom.toUpperCase() : 'N/A';

                    var markup = "<div class='select2-result-repository clearfix'>" +
                                 "<div class='select2-result-repository__title'>" + results.text + "</div>";

                    markup +=   "<div class='select2-result-repository__statistics'>" +
                                    "<div class='select2-result-repository__forks'><i class='fa fa-tags fa-fw'></i>" + $category + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-qrcode fa-fw'></i>" + $code + "</div>" +
                                    "<div class='select2-result-repository__stargazers'><i class='fa fa-sitemap fa-fw'></i>" + $uom + "</div>" +
                                "</div>";

                    return markup;
                }

                function AppendNewMaterialsRow() {
                    $noval = numeral(0);
                    $.each($('.material-id'), function() {
                        if($(this).val() == "") { $noval.add(1); }
                    });

                    if($noval.value() == 0) {
                        $('#tbl-materials > tbody').append('<tr>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<select class="form-control select2 select2-hidden-accessible material-id" data-placeholder="SELECT MATERIALS" style="width: 100%;" aria-hidden="true">' +
                                    '<option></option>' +
                                '</select>' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<input type="text" class="fees-control form-control material-uom" disabled="true" style="background-color:#ffffff">' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<input type="text" class="fees-control form-control text-right material-unit-price curr" data-num-min="1" data-num-max="99999">' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<input type="text" class="fees-control form-control material-qty num pnum-only" disabled="true" style="background-color:#ffffff">' +
                            '</td>' +
                            '<td class="form-group" style="padding:2px">' +
                                '<input type="text" class="fees-control form-control text-right material-total-price" disabled="true" style="background-color:#ffffff">' +
                            '</td>' +
                            '<td class="form-group text-center" style="padding-top:8px">' +
                                '<a href="#" class="text-bold text-danger material-delete"><i class="fa fa-fw fa-times"></i></a>' +
                            '</td>' +
                        '</tr>');
                    }
                }

                function AppendDefMaterialsRow(data) {
                    $('#tbl-materials > tbody').append('<tr>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<select class="form-control select2 select2-hidden-accessible material-id" data-placeholder="SELECT MATERIALS" style="width: 100%;" aria-hidden="true" disabled="true">' +
                                '<option value="'+data.material_id+'" selected="true">'+data.material_description+'</option>' +
                            '</select>' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="fees-control form-control material-uom" value="'+data.uom+'" disabled="true" style="background-color:#ffffff">' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="fees-control form-control text-right material-unit-price curr" data-num-min="1" data-num-max="99999" value="'+data.unit_price+'">' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="fees-control form-control material-qty num pnum-only" value="'+data.uom_value+'">' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="fees-control form-control text-right material-total-price" disabled="true" value="'+data.total_price+'" style="background-color:#ffffff">' +
                        '</td>' +
                        '<td class="form-group text-center" style="padding-top:8px">' +
                            '<a href="#" class="text-bold text-danger material-delete"><i class="fa fa-fw fa-times"></i></a>' +
                        '</td>' +
                    '</tr>');

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

                function ComputeGrandtotal() {
                    $total = numeral(0);

                    $.each($('.material-total-price'), function() {
                        $total.add($(this).val().replace(',', ''));
                    });

                    $('#material-grand-total').val($total.format('0,0.00')).data('amt', $total.value());
                }

                function InitializeAppendRow() {
                    // Initiliaze appended materials select2.
                    $('.material-id').select2({
                        dropdownParent: $('.jconfirm-scrollpane'),
                        ajax: {
                            url: $app_url + '/select2-materials-search',
                            delay: 250,
                            data: function (params) {
                                return query = {
                                    search: params.term,
                                    page: params.page
                                }
                            },
                            processResults: function (data, params) {
                                return {
                                    results: $.map(data.items, function (data) {
                                        return {
                                            text: data.description,
                                            item_category: data.category,
                                            item_code: data.code,
                                            item_uom: data.uom,
                                            id: data.id
                                        }
                                    })
                                };
                            },
                        },
                        escapeMarkup: function (markup) { return markup; },
                        templateResult: FormatMaterialsSearchResults
                    }).on('select2:selecting', function(e) {
                    	$duplicate = 0;
                        $materials = [];
                        $select2   = $(this);
                        
                        $.each($('.material-id'), function() {
                            if($(this).val() == e.params.args.data.id) {
                            	$duplicate++;
                                e.preventDefault();
                            }
                        });

                        if($duplicate > 0) {
                        	$.confirm({
                                draggable: true,
                                title: false,
                                type: 'orange',
                                content:'<p class="text-center"><i class="fa fa-fw fa-exclamation-circle text-bold text-warning" style="font-size:54px"></i></p>' +
                                        '<h4 class="text-center text-bold text-warning">SOMETHING WENT WRONG</h4>' +
                                        '<hr style="margin-bottom:8px">' +
                                        '<p class="text-center">The material you selected already exist!</p>',
                                buttons: {
                                    yes: {
                                        text: '<small>[ENTER]</small> got it!',
                                        btnClass: 'btn-warning',
                                        keys: ['enter']
                                    }       
                                }
                            });
                            return false;
                        }
                    }).on('select2:select', function (event) {
                        $tr = $(this).closest('tr');

                        $.get($app_url + '/select2-materials-details', { 'material_id':$(this).val() }).done(function(data) {
                            $tr.find('.material-id').prop('disabled', true);
                            $tr.find('.material-uom').val(data.uom.toUpperCase());
                            $tr.find('.material-qty').val(1).prop('disabled', false);
                            $tr.find('.material-total-price').val(numeral(data.unit_price).format('0,0.00'));
                            $tr.find('.material-unit-price').val(numeral(data.unit_price).format('0,0.00'));

                            if ($company == 3 || $branch == 80 || ($mats_update != '' && $mats_update >= $date)) {  
                                $tr.find('.material-unit-price').prop('disabled', false).select();
                            }
                            else {
                                if (data.unit_price <= 0 ) {
                                    $tr.find('.material-id').val('').prop('disabled', false).trigger('change');
                                    $tr.find('.material-uom').val('');
                                    $tr.find('.material-qty').val('').prop('disabled', false);
                                    $tr.find('.material-total-price').val('');
                                    $tr.find('.material-unit-price').val('');

                                    $.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">Material <strong>'+data.description.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;
                                }
                                $tr.find('.material-unit-price').prop('disabled', true);
                            }

                            AppendNewMaterialsRow();
                            InitializeAppendRow();
                        });
                    });

                    // Compute total price.
                    $('.material-unit-price').on('keyup', function() {
                        $tr = $(this).closest('tr');

                        $qty = $tr.find('.material-qty').val();
                        $uprice = $(this).val().replace(',', '');
                        $tprice = $qty * $uprice;

                        $tr.find('.material-total-price').val(numeral($tprice).format('0,0.00'));

                        ComputeGrandtotal();
                    });

                    $('.material-qty').on('keyup', function() {
                        $tr = $(this).closest('tr');

                        $qty = $(this).val().replace(',', '');
                        $uprice = $tr.find('.material-unit-price').val().replace(',', '');
                        $tprice = $qty * $uprice;

                        $tr.find('.material-total-price').val(numeral($tprice).format('0,0.00'));
                        
                        ComputeGrandtotal();
                    });

                    $('.material-delete').on('click', function() {
                        $id = $(this).closest('tr').find('.material-id').val();

                        if($id) {
                        	$(this).closest('tr').remove();
                        }

                        ComputeGrandtotal();
                    });

                    // Compute grand total.
                    ComputeGrandtotal();
                }

                // Initialize select2-connection-materials-preset
                $('.connection-materials-preset').select2({
                    allowClear: true,
                    dropdownParent: $('.jconfirm-scrollpane'),
                    ajax: {
                        url: $app_url + '/select2-materials-preset-search',
                        delay: 250,
                        data: function (params) {
                            return query = {
                                search: params.term,
                                page: params.page
                            }
                        },
                        processResults: function (data, params) {
                            params.page = params.page || 1;

                            return {
                                results: $.map(data.items, function (data) {
                                    return {
                                        text: data.preset_description.toUpperCase(),
                                        connection_type: data.connection_type.toUpperCase(),
                                        id: data.id
                                    }
                                }),
                                pagination: {
                                    more: (params.page * 10) < data.count
                                }
                            };
                        },

                    },
                    escapeMarkup: function (markup) { return markup; },
                    templateResult: FormatMaterialsPresetSearchResults
                }).on('select2:select', function (event) {
                    $.get($app_url + '/select2-materials-preset-details', { 'preset_id':$(this).val() }).done(function(data) {
                        $jc.showLoading(true);

                        $('#mats-amt').data('details', data.mats);
                        $('#tbl-materials > tbody').empty();

                        $.each(data.mats, function(k, v) {
                            AppendDefMaterialsRow(v);
                        });

                        AppendNewMaterialsRow();
                        InitializeAppendRow();
                        ComputeGrandtotal();

                        $jc.hideLoading(true);
                    });
                }).on('select2:unselect', function (event) {
                    $jc.showLoading(true);

                    $('#tbl-materials > tbody').empty();
                    
                    AppendNewMaterialsRow();
                    InitializeAppendRow();
                    ComputeGrandtotal();

                    $jc.hideLoading(true);
                });

                // Load saved materials.
                $materials = $('#mats-amt').data('details');
                if($materials) {
                    $.each($materials, function(k, v) {
                        AppendDefMaterialsRow(v);
                    });

                    AppendNewMaterialsRow();
                    InitializeAppendRow();
                } else {
                    AppendNewMaterialsRow();
                    InitializeAppendRow();
                }                
            },
            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() {
                        $materials = [];
                        $jc.showLoading(true);

                        // Save details in array.
                        $.each($('.material-id'), function() {
                            if($(this).val()) {
                                $tr = $(this).closest('tr');
                                $unit_price = $tr.find('.material-unit-price').val().replace(',', '');
                                $total_price = $tr.find('.material-total-price').val().replace(',', '');

                                if ($unit_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">Material <strong>'+$(this).text().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;
                                }
                                
                                $materials.push({
                                    'material_id' : $(this).val(),
                                    'material_description' : $(this).text(),
                                    'uom' : $tr.find('.material-uom').val(),
                                    'unit_price' : $unit_price,
                                    'uom_value' : $tr.find('.material-qty').val(),
                                    'total_price' : $total_price
                                });
                            }
                        });

                        // Dispay grand total and save details as data attribute.
                        $('#mats-amt').data('details', $materials)
                                      .data('amt', $('#material-grand-total').data('amt'))
                                      .val(numeral($('#material-grand-total').data('amt')).format('0,0.00'));

                        // Close jconfirm.
                        $jc.hideLoading(true);
                        $jc.close();
                    }
                }
            }
        });
    }).on('click', '.jo-services', function() {
        $jc = $.confirm({
            title: false,
            draggable: true,
            columnClass: 'large',
            content: function() {
                var self = this;

                return $.ajax({
                    url: $app_url + '/csr/job-order/jo-new-services',
                    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() {
                function FormatServicesSearchResults(results) {
                    if(results.loading) return results.text;

                    var markup = "<div class='select2-result-repository clearfix'>" +
                                 "<div class='select2-result-repository__title'>" + results.text + "</div>";

                    return markup;
                }

                function AppendNewServicesRow() {
                    $('#tbl-services > tbody').append('<tr>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<select class="form-control select2 select2-hidden-accessible service-id" data-placeholder="SELECT SERVICES" style="width: 100%;" aria-hidden="true">' +
                                '<option></option>' +
                            '</select>' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="form-control text-right curr service-price" data-num-min="0" data-num-max="999999" disabled="true">' +
                        '</td>' +
                        '<td class="form-group" style="padding-top:8px">' +
                            '<a href="#" class="text-bold text-danger service-delete"><i class="fa fa-fw fa-times"></i></a>' +
                        '</td>' +
                    '</tr>');
                }

                function AppendDefServicesRow(data) {
                    $('#tbl-services > tbody').append('<tr>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<select class="form-control select2 select2-hidden-accessible service-id" data-placeholder="SELECT SERVICES" style="width: 100%;" aria-hidden="true" disabled="true">' +
                                '<option value="'+data.id+'">'+data.category.toUpperCase()+'</option>' +
                            '</select>' +
                        '</td>' +
                        '<td class="form-group" style="padding:2px">' +
                            '<input type="text" class="form-control text-right curr service-price" data-num-min="0" data-num-max="999999" value="'+data.service_fee+'">' +
                        '</td>' +
                        '<td class="form-group" style="padding-top:8px">' +
                            '<a href="#" class="text-bold text-danger service-delete"><i class="fa fa-fw fa-times"></i></a>' +
                        '</td>' +
                    '</tr>');

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

                function ComputeGrandtotal() {
                    $total = numeral(0);

                    $.each($('.service-price'), function() {
                        $total.add($(this).val().replace(',', ''));
                    });

                    $('#service-grand-total').val($total.format('0,0.00')).data('amt', $total.value());
                }

                function InitializeAppendRow() {
                    // Initiliaze appended materials select2.
                    $('.service-id').select2({
                        // allowClear: true,
                        dropdownParent: $('.jconfirm-scrollpane'),
                        ajax: {
                            url: $app_url + '/select2-application-services-search',
                            delay: 250,
                            data: function (params) {
                                return query = {
                                    search: params.term,
                                    page: params.page
                                }
                            },
                            processResults: function (data, params) {
                                params.page = params.page || 1;

                                return {
                                    results: $.map(data.items, function (data) {
                                        return {
                                            text: data.category.toUpperCase(),
                                            price: data.amount,
                                            id: data.id
                                        }
                                    }),
                                    pagination: {
                                        more: (params.page * 10) < data.count
                                    }
                                };
                            },

                        },
                        escapeMarkup: function (markup) { return markup; },
                        templateResult: FormatServicesSearchResults
                    }).on('select2:select', function (event) {
                        $tr = $(this).closest('tr');

                        $services = [];
                        $.each($('.service-id'), function() {
                            $services.push($(this).val());
                        });

                        if(_.uniq($services).length !== $services.length) {
                            $(this).val(null).trigger('change');
                            $.confirm({
                                draggable: true,
                                title: false,
                                type: 'orange',
                                content:'<p class="text-center"><i class="fa fa-fw fa-exclamation-circle text-bold text-warning" style="font-size:54px"></i></p>' +
                                        '<h4 class="text-center text-bold text-warning">SOMETHING WENT WRONG</h4>' +
                                        '<hr style="margin-bottom:8px">' +
                                        '<p class="text-center">The material you selected already exist!</p>',
                                buttons: {
                                    yes: {
                                        text: '<small>[ENTER]</small> got it!',
                                        btnClass: 'btn-warning',
                                        keys: ['enter']
                                    }       
                                }
                            });
                            return false;
                        } else {
                            $.get($app_url + '/select2-application-services-details', { 'service_id':$(this).val() }).done(function(data) {
                                $tr.find('.service-id').prop('disabled', true);

                                if ($company == 3 || $branch == 80 || ($mats_update != '' && $mats_update >= $date)) {  
                                    $tr.find('.service-price').val(numeral(data.service_fee).format('0,0.00')).prop('disabled', false).select();
                                }
                                else {
                                    if (data.service_fee <= 0) {
                                        $tr.find('.service-id').val('').prop('disabled', false).trigger('change');
                                        $.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>'+data.category.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;
                                    }
                                    $tr.find('.service-price').val(numeral(data.service_fee).format('0,0.00')).prop('disabled', true);
                                }

                                AppendNewServicesRow();
                                InitializeAppendRow();
                            });
                        }
                    }).on('select2:unselect', function (event) {
                        $(this).select2('destroy');
                        $(this).closest('tr').remove();

                        ComputeGrandtotal();
                    });

                    // Compute total price.
                    $('.service-price').on('keyup', function() {
                        ComputeGrandtotal();
                    });

                    $('.service-delete').on('click', function() {
                        $id = $(this).closest('tr').find('.service-id').val();

                        if($id) {
                        	$(this).closest('tr').remove();
                        }

                        ComputeGrandtotal();
                    });

                    // Compute grand total.
                    ComputeGrandtotal();
                }

                $services = $('#sfee-amt').data('details');

                if($services) {
                    $.each($services, function(k, v) {
                        AppendDefServicesRow(v);
                    });

                    AppendNewServicesRow();
                    InitializeAppendRow();
                } else {
                    AppendNewServicesRow();
                    InitializeAppendRow();
                }                
            },
            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() {
                        $services = [];
                        $jc.showLoading(true);

                        // Save details in array.
                        $.each($('.service-id'), function() {
                            if($(this).val()) {
                                $tr = $(this).closest('tr');
                                $service = $tr.find('.service-price').val().replace(',', '');

                                if ($service <= 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>'+$(this).text().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;
                                }

                                $services.push({
                                    'id' : $(this).val(),
                                    'category' : $(this).text(),
                                    'service_fee' : $service
                                });
                            }
                        });

                        // Dispay grand total and save details as data attribute.
                        $('#sfee-amt').data('details', $services)
                                      .data('amt', $('#service-grand-total').data('amt'))
                                      .val(numeral($('#service-grand-total').data('amt')).format('0,0.00'));

                        // Close jconfirm.
                        $jc.hideLoading(true);
                        $jc.close();
                    }
                }
            }
        });
    });
</script>
@endsection