@extends('layouts.app')
@section('title', __('repair::lang.add_jobsheet_parts'))

@section('content')
@include('repair::layouts.nav')
<!-- Content Header (Page header) -->
<section class="content-header">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm">
              <a class="text-white opacity-5" href="{{action([\Modules\Repair\Http\Controllers\DashboardController::class, 'index'])}}">
                <i class="ni ni-settings text-sm-i "></i> @lang('repair::lang.repair')
              </a>
            </li>
            <li class="breadcrumb-item text-sm">
                <a class="opacity-7 text-white" href="{{action([\Modules\Repair\Http\Controllers\JobSheetController::class, 'index'])}}">@lang('repair::lang.job_sheet')</a>
            </li>
            <li class="breadcrumb-item text-sm text-white" aria-current="page">
                @lang('repair::lang.add_jobsheet_parts')
            </li>
          </ol>
    </nav>
</section>
<!-- Main content -->
<section class="content">
	<div class="pad-15"> 
		@component('components.widget', ['class' => 'box-solid', 'icon' => 'fa fa-plus text-primary', 'title' => __('repair::lang.add_jobsheet_parts') ])
		<hr class="line-light-1">
		<div class="pad-15">
			<table class="table align-items-center mb-0 full-width">
				<thead class="thead-light">
					<tr>
						<th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('repair::lang.job_sheet_no'):</th>
						<td>{{$job_sheet->job_sheet_no}}</td>
						<th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('receipt.date'):</th>
						<td>{{@format_datetime($job_sheet->created_at)}}</td>
					</tr>
					<tr>
						<th class="text-uppercase text-dark text-xs font-weight-bolder">
							@lang('role.customer'):
						</th>
						<td>{{$job_sheet->customer->name}}</td>
						<th class="text-uppercase text-dark text-xs font-weight-bolder">@lang('business.location'):</th>
						<td>
							{{$job_sheet->businessLocation?->name}}
						</td>
					</tr>
				</thead>
			</table>
		</div>
		@endcomponent
		{!! Form::open(['url' => action([\Modules\Repair\Http\Controllers\JobSheetController::class, 'saveParts'], $job_sheet->id), 'method' => 'post', 'id' => 'add_part_form' ]) !!}
		@component('components.widget', ['class' => 'box-solid', 'icon' => 'ni ni-fat-add text-primary', 'title' => __('repair::lang.add_parts')])
		<hr class="line-light-1">
			<div class="row pad-15">
				<div class="col-sm-8 col-sm-offset-2">
					<div class="form-group">
						{!! Form::text('search_product', null, ['class' => 'form-control bd-rd-7', 'id' => 'search_job_sheet_parts', 'placeholder' => __('repair::lang.search_parts')]); !!}
					</div>
				</div>
			</div>
			<div class="row pad-15">
				<div class="col-sm-10 col-sm-offset-1">
					<div class="table-responsive">
					<table class="table align-items-center mb-0 full-width" 
					id="job_sheet_parts_table">
						<thead class="thead-light">
							<tr>
								<th class="text-uppercase text-dark text-xs font-weight-bolder col-sm-4 text-center">	
									@lang('repair::lang.part')
								</th>
								<th class="text-uppercase text-dark text-xs font-weight-bolder col-sm-2 text-center">
									@lang('sale.qty')
								</th>
								<th class="text-uppercase text-dark text-xs font-weight-bolder col-sm-2 text-center"><i class="fa fa-trash" aria-hidden="true"></i></th>
							</tr>
						</thead>
						<tbody>
							@if(!empty($parts))
								@foreach($parts as $part)
									@include('repair::job_sheet.partials.job_sheet_part_row', ['variation_name' => $part['variation_name'], 'unit' => $part['unit'], 'quantity' => $part['quantity'], 'variation_id' => $part['variation_id']])
								@endforeach
							@endif
						</tbody>
					</table>
					</div>
				</div>
			</div>
		@endcomponent
		@if(!empty($status_update_data) && $status_update_data['job_sheet_id'] == $job_sheet->id)
			@component('components.widget', ['class' => 'box-solid', 'icon' => 'ni ni-fat-add text-primary', 'title' => __('repair::lang.add_parts')])
			<hr class="line-light-1" >
				@include('repair::job_sheet.partials.edit_status_form', ['status_update_data' => $status_update_data])
			@endcomponent
		@endif
		<div class="card h-100 mb-20">
			<div class="card-body p-3">
				<div class="row">
					<div class="col-sm-12 text-center">
						<button type="button" id="submit_add_part_form" class="btn btn-success btn-big">@lang('messages.save')</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	{!! Form::close() !!}
</section>
@stop
@section('javascript')
<script type="text/javascript">
	$(document).ready( function(){
		$('#search_job_sheet_parts')
            .autocomplete({
                source: function(request, response) {
                    $.getJSON(
                        '/products/list',
                        { term: request.term },
                        response
                    );
                },
                minLength: 2,
                response: function(event, ui) {
                    if (ui.content.length == 1) {
                        ui.item = ui.content[0];
                        $(this)
                                .data('ui-autocomplete')
                                ._trigger('select', 'autocompleteselect', ui);
                        $(this).autocomplete('close');
                    } else if (ui.content.length == 0) {
                        swal(LANG.no_products_found);
                    }
                },
                select: function(event, ui) {
                   job_sheet_parts_row(ui.item.variation_id);
                },
            })
            .autocomplete('instance')._renderItem = function(ul, item) {
	            var string = '<div>' + item.name;
	                if (item.type == 'variable') {
	                    string += '-' + item.variation;
	                }
	                string += ' (' + item.sub_sku + ') </div>';
	                return $('<li>')
	                    .append(string)
	                    .appendTo(ul);
        	};

       	//initialize editor
        tinymce.init({
            selector: 'textarea#email_body',
        });

        $('#send_sms').change(function() {
            if ($(this). is(":checked")) {
                $('div.sms_body').fadeIn();
            } else {
                $('div.sms_body').fadeOut();
            }
        });

        $('#send_email').change(function() {
            if ($(this). is(":checked")) {
                $('div.email_template').fadeIn();
            } else {
                $('div.email_template').fadeOut();
            }
        });

        if ($('#status_id_modal').length) {
            ;
            $("#sms_body").val($("#status_id_modal :selected").data('sms_template'));
            $("#email_subject").val($("#status_id_modal :selected").data('email_subject'));
            tinymce.activeEditor.setContent($("#status_id_modal :selected").data('email_body'));  
        }

        $('#status_id_modal').on('change', function() {
            var sms_template = $(this).find(':selected').data('sms_template');
            var email_subject = $(this).find(':selected').data('email_subject');
            var email_body = $(this).find(':selected').data('email_body');

            $("#sms_body").val(sms_template);
            $("#email_subject").val(email_subject);
            tinymce.activeEditor.setContent(email_body);

            if ($('#status_modal .mark-as-complete-btn').length) {
                if ($(this).find(':selected').data('is_completed_status') == 1) 
                {
                    $('#status_modal').find('.mark-as-complete-btn').removeClass('hide');
                    $('#status_modal').find('.mark-as-incomplete-btn').addClass('hide');
                } else {
                    $('#status_modal').find('.mark-as-complete-btn').addClass('hide');
                    $('#status_modal').find('.mark-as-incomplete-btn').removeClass('hide');
                }
            }
        });
	});

	function job_sheet_parts_row(variation_id) {
		var row_index = parseInt($('#product_row_index').val());
	    var location_id = $('select#location_id').val();
	    $.ajax({
	        method: 'POST',
	        url: "{{action([\Modules\Repair\Http\Controllers\JobSheetController::class, 'jobsheetPartRow'])}}",
	        data: { variation_id: variation_id },
	        dataType: 'html',
	        success: function(result) {
	            $('table#job_sheet_parts_table tbody').append(result);

	            $('input#search_job_sheet_parts').val('')
	            $('input#search_job_sheet_parts')
                        .focus()
                        .select();
	            
	        },
	    });
	}

	$(document).on('click', '.remove_product_row', function(){
		$(this).closest('tr').remove();
	})

	$(document).on('click', '#submit_add_part_form', function(e){
		$('form#add_part_form').submit();
	})
</script>
@endsection