@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">NEW JOB ORDER</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> BACK TO LIST</a>
	    	<button type="button" id="btn-create-jo" class="btn btn-sm btn-flat btn-warning"><i class="fa fa-save"></i> CREATE JOB ORDER</button>
	  	</div>
	</div>
</div>

<div class="row">
	<div class="col-xs-6" style="padding-right:6px">
		<div class="box box-default" style="height:470px">
			<div class="box-body">
                <small class="text-success"><i>Job Order Details</i></small>
              	<div class="row">
                    <div class="col-xs-9 form-group" style="padding-right:6px">
                        <select id="category_code" name="category_code" class="form-control select2 select2-hidden-accessible" data-placeholder="JO CATEGORY" style="width: 100%;" aria-hidden="true">
                            <option></option>
                            @foreach($jo_categories as $c)
                            <option value="{{ $c->code }}" data-with-type="{{ $c->with_type }}" data-filter="{{ $c->filter }}">{{ strtoupper($c->description) }}</option>
                            @endforeach
                        </select>
                   </div>
                   <div class="col-xs-3 form-group" style="padding-left:0px">
                        <select id="is_critical" class="form-control select2 select2-hidden-accessible" data-placeholder="JO URGENT" style="width: 100%;" aria-hidden="true">
                            <option></option>
                            <option value="1">YES</option>
                            <option value="0" selected>NO</option>
                        </select>
                   </div>
                </div>

                <div class="form-group" id="reason_cont_id">
                    <select id="reason_id" name="reason_id" class="form-control select2 select2-hidden-accessible" data-placeholder="JO REASON" style="width: 100%;" aria-hidden="true">
                        <option></option>
                    </select>
                </div>

                <div class="form-group" id="reason_cont_other" style="display:none">
                    <input type="text" class="form-control" id="reason_other" placeholder="REASON OF OTHERS CATEGORY">
                </div>


                <div class="form-group" style="margin-bottom:13px">
                    <select id="acct_id" name="acct_id" class="form-control select2 select2-hidden-accessible jo-account" data-placeholder="SELECT CUSTOMER" style="width: 100%;" aria-hidden="true">
                        <option></option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-5" title="Account Number">
                            <i class="fa fa-fw text-success fa-lock"></i><span class="acct-details" id="acct-number">-</span>
                        </div>
                        <div class="col-xs-3" title="Account Class">
                            <i class="fa fa-fw text-success fa-user"></i><span class="acct-details" id="acct-class">-</span>
                        </div>
                        <div class="col-xs-4" title="Account Status">
                            <i class="fa fa-fw text-success fa-power-off"></i><span class="acct-details" id="acct-status">-</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-5" title="Meter Brand & Number">
                            <i class="fa fa-fw text-success fa-history"></i><span class="acct-details" id="acct-meter">-</span>
                        </div>
                        <div class="col-xs-3" title="Book & Sequence">
                            <i class="fa fa-fw text-success fa-book"></i><span class="acct-details" id="acct-book-seq">-</span>
                        </div>
                        <div class="col-xs-4" title="Connection Type">
                            <i class="fa fa-fw text-success fa-code-fork"></i><span class="acct-details" id="acct-ctype">-</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-5" title="Email">
                            <i class="fa fa-fw text-success fa-envelope"></i><span class="acct-details" id="acct-email">-</span>
                        </div>
                        <div class="col-xs-3" title="Mobile Number">
                            <i class="fa fa-fw text-success fa-mobile"></i><span class="acct-details" id="acct-mobile">-</span>
                        </div>
                        <div class="col-xs-4" title="Landline Number">
                            <i class="fa fa-fw text-success fa-phone"></i><span class="acct-details" id="acct-landline">-</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-12" title="Address">
                            <i class="fa fa-fw text-success fa-map-marker"></i><span class="acct-details" id="acct-address">-</span>
                        </div>
                    </div>
                </div>


                <div class="row">
                    <div class="col-xs-8 form-group" style="padding-right:6px">
                        <input id="reported_by" type="text" class="form-control" placeholder="REPORTED BY">
                    </div>

                    <div class="col-xs-4 form-group" style="padding-left:0px">
                        <input id="reported_at" type="text" class="form-control datetime-masked" value="{{ \Carbon\Carbon::now()->format('Y-m-d h:i A') }}" placeholder="REPORTED AT">
                    </div>
                </div>

                <div class="form-group">
                    <textarea id="notes" class="form-control" placeholder="NOTE TO THE PERSON THAT WILL DO THE JOB ORDER" rows="3" style="height:133px; resize:none"></textarea>
                </div>

                <!-- This field is only available on parrallel test.  -->
<!--                 @if(session('system_mode') == 'parallel')
                <div class="form-group">
                    <div class="row">
                        <div class="col-xs-4">
                            <span class="text-danger"><b>JO Number</b></span>
                            <div class="row">
                                <div class="col-xs-4" style="padding-right:0px">
                                    <input type="text" class="form-control jo-number" readonly="true" value="JO14" id="jono1">
                                </div>
                                <div class="col-xs-4" style="padding-right:0px">
                                    <input type="text" class="form-control jo-number" maxlength="4" minlength="4" id="jono2">
                                </div>
                                <div class="col-xs-4" style="padding-right:0px">
                                    <input type="text" class="form-control jo-number" maxlength="4" minlength="4" id="jono3">
                                </div>                                
                            </div>
                        </div>

                        <div class="col-xs-3 col-xs-offset-1">
                            <span class="text-danger"><b>Date Created</b></span>
                            <input name="created_at" id="created_at" value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" type="text" class="form-control date-masked">
                        </div>
                    </div>
                </div>

                
                @endif
 -->			</div>
		</div>
	</div>

    <div class="col-xs-6" style="padding-left:6px">
        <div class="box box-default" style="height:230px;  margin-bottom:10px">
            <div class="box-body">
                <div class="form-group">
                    <small class="text-success"><i>Optional - Used for job orders that is not customer related.</i></small>
                    <select id="province_id" class="form-control select2 select2-hidden-accessible jo-address" data-placeholder="PROVINCE" style="width: 100%;" aria-hidden="true">
                        <option value="{{ session('branch_province_id') }}">{{ strtoupper(session('branch_province_desc')) }}</option>
                    </select>
                </div>

                <div class="form-group">
                    <select id="city_id" class="form-control select2 select2-hidden-accessible jo-address" data-placeholder="CITY / MUNICIPALITY" style="width: 100%;" aria-hidden="true">
                        <option value="{{ session('branch_city_id') }}">{{ strtoupper(session('branch_city_desc')) }}</option>
                    </select>
                </div>

                <div class="form-group">
                    <select id="brgy_id" class="form-control select2 select2-hidden-accessible jo-address" data-placeholder="BARANGAY" style="width: 100%;" aria-hidden="true">
                        <option></option>
                    </select>
                </div>

                <div class="form-group">
                    <input id="address" type="text" class="form-control jo-address" name="" placeholder="UNIT / HOUSE NO. / STREET / VILLAGE">
                </div>
            </div>
        </div>

        <div class="box box-default" style="height:230px">
            <div class="box-body">
                <div class="form-group">
                    <small class="text-success"><i>Materials and Services</i></small>
                    <div class="input-group">
                        <span class="input-group-addon">MATERIALS</span>
                        <input type="text" id="materials" class="form-control text-right" value="0.00" readonly="true">
                        <span class="input-group-addon" style="padding:1px">
                            <button class="btn btn-sm btn-success" id="jo-materials"><i class="fa fa-fw fa-search-plus"></i></button>
                        </span>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-xs-6" style="padding-right:6px">
                        <select id="materials_payment_method" class="form-control select2 select2-hidden-accessible" data-placeholder="PAYMENT METHOD" style="width: 100%;" aria-hidden="true" disabled="true">
                            <option></option>
                            <option value="full">FULL PAYMENT</option>
                            <option value="atb">ADD TO BILL</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-2" style="padding-left:0px; padding-right:0px">
                        <input id="materials_terms" type="text" class="form-control num wnum-only pnum-only" placeholder="TERMS" disabled="true">
                    </div>
                    <div class="form-group col-xs-4" style="padding-left:6px">
                        <input id="materials_amortization" type="text" class="form-control text-right" placeholder="AMORTIZATION" disabled="true">
                    </div>
                </div>

                
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon">SERVICES</span>
                        <input type="text" id="services" class="form-control text-right" value="0.00" readonly="true">
                        <span class="input-group-addon" style="padding:1px">
                            <button class="btn btn-sm btn-success" id="jo-services"><i class="fa fa-fw fa-search-plus"></i></button>
                        </span>
                    </div>
                </div>

                <div class="row">
                    <div class="form-group col-xs-6" style="padding-right:6px">
                        <select id="services_payment_method" class="form-control select2 select2-hidden-accessible" data-placeholder="PAYMENT METHOD" style="width: 100%;" aria-hidden="true" disabled="true">
                            <option></option>
                            <option value="full">FULL PAYMENT</option>
                            <option value="atb">ADD TO BILL</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-2" style="padding-left:0px; padding-right:0px">
                        <input id="services_terms" type="text" class="form-control num wnum-only pnum-only" placeholder="TERMS" disabled="true">
                    </div>
                    <div class="form-group col-xs-4" style="padding-left:6px">
                        <input id="services_amortization" type="text" class="form-control text-right" placeholder="AMORTIZATION" disabled="true">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ url(mix('js/csr-joborder.js')) }}"></script>

<script type="text/javascript">
    $('#jono2').on('keyup', function() {
        if($(this).val().length == 4) {
            console.log('focus');
            $('#jono3').trigger("focus");
        }
    });
</script>
@endsection