@extends('layouts.app')

@section('title', __('repair::lang.edit_job_sheet'))

@section('content')
@include('repair::layouts.nav')
<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <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">
                {{$job_sheet->job_sheet_no}}
            </li>
          </ol>
    </nav>
</section>
<section class="content">
    @if(!empty($repair_settings))
        @php
            $product_conf = isset($repair_settings['product_configuration']) ? explode(',', $repair_settings['product_configuration']) : [];

            $defects = isset($repair_settings['problem_reported_by_customer']) ? explode(',', $repair_settings['problem_reported_by_customer']) : [];

            $product_cond = isset($repair_settings['product_condition']) ? explode(',', $repair_settings['product_condition']) : [];
        @endphp
    @else
        @php
            $product_conf = [];
            $defects = [];
            $product_cond = [];
        @endphp
    @endif
    {!! Form::open(['url' => action([\Modules\Repair\Http\Controllers\JobSheetController::class, 'update'], [$job_sheet->id]), 'method' => 'put', 'id' => 'edit_job_sheet_form', 'files' => true]) !!}
        @includeIf('repair::job_sheet.partials.scurity_modal')
        <div class="pad-15">
            <div class="card h-100 shadow-lg mb-20 pad-15">
                <div class="card-header pb-0 pt-3 bg-transparent">
                    <h5 class="text-capitalize">
                    <span class="icon icon-shape icon-sm border-radius-md text-center me-2 align-items-center justify-content-center">
                    <i class="fa fa-pencil-alt text-primary text-lg opacity-10"></i>
                    </span> @lang('repair::lang.edit_job_sheet') </h5>
                    <hr class="line-light">
                </div>
                <div class="card-body p-3">
                    <div class="row pad-15">
                        <div class="col-md-6">
                            <input type="hidden" id="job_sheet_id" value="{{$job_sheet->id}}">
                            <div class="form-group">
                                {!! Form::label('contact_id', __('role.customer') .':*') !!}
                                <div class="input-group">
                                    <input type="hidden" id="default_customer_id"
                                    value="{{ $job_sheet->customer->id }}" >
                                    <input type="hidden" id="default_customer_name" value="{{ $job_sheet->customer->name }}" >
                                    <input type="hidden" id="default_customer_balance" value="{{$job_sheet->customer->balance}}" >

                                    {!! Form::select('contact_id', 
                                        [], null, ['class' => 'form-control mousetrap select2', 'id' => 'customer_id', 'placeholder' => 'Enter Customer name / phone', 'required', 'style' => 'width: 100%;']); !!}
                                    <span class="input-group-btn bd-0">
                                        <button type="button" class="btn bd-0 bg-white btn-flat add_new_customer" data-name=""  @if(!auth()->user()->can('customer.create')) disabled @endif><i class="fa fa-plus-circle text-primary fa-lg"></i></button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            {!! Form::label('service_type',  __('repair::lang.service_type').':*', ['style' => 'margin-left:20px;'])!!}
                            <br>
                            <label class="radio-inline">
                                {!! Form::radio('service_type', 'carry_in', ($job_sheet->service_type == 'carry_in') ? true : false, [ 'class' => 'input-icheck', 'required']); !!}
                                @lang('repair::lang.carry_in')
                            </label>
                            <label class="radio-inline">
                                {!! Form::radio('service_type', 'pick_up', ($job_sheet->service_type == 'pick_up') ? true : false, [ 'class' => 'input-icheck']); !!}
                                @lang('repair::lang.pick_up')
                            </label>
                            <label class="radio-inline radio_btns">
                                {!! Form::radio('service_type', 'on_site', ($job_sheet->service_type == 'on_site') ? true : false, [ 'class' => 'input-icheck']); !!}
                                @lang('repair::lang.on_site')
                            </label>
                        </div>
                    </div>
                    @if($job_sheet->service_type == 'pick_up' || $job_sheet->service_type == 'on_site')
                        @php
                            $avail_addr = true;
                        @endphp
                    @else
                        @php
                            $avail_addr = false;
                        @endphp
                    @endif
                    <div class="row pick_up_onsite_addr pad-15" @if(!$avail_addr) style="display: none;" @endif>
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('pick_up_on_site_addr', __('repair::lang.pick_up_on_site_addr') . ':') !!}
                                {!! Form::textarea('pick_up_on_site_addr',$job_sheet->pick_up_on_site_addr, ['class' => 'form-control bd-rd-7', 'id' => 'pick_up_on_site_addr', 'placeholder' => __('repair::lang.pick_up_on_site_addr'), 'rows' => 3]); !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card h-100 shadow-lg mb-20 pad-15">
                <div class="card-header pb-0 pt-3 bg-transparent">
                    <h5 class="text-capitalize">
                    <span class="icon icon-shape icon-sm border-radius-md text-center me-2 align-items-center justify-content-center">
                    <i class="ni ni-bullet-list-67 text-primary text-lg opacity-10"></i>
                    </span> @lang('lang_v1.more_info') </h5>
                    <hr class="line-light">
                </div>
                <div class="card-body p-3">
                    <div class="row pad-15">
                        <div class="col-sm-4">
                            <div class="form-group">
                                {!! Form::label('brand_id', __('product.brand') . ':') !!}
                                {!! Form::select('brand_id', $brands, $job_sheet->brand_id, ['class' => 'form-control select2', 'placeholder' => __('messages.please_select')]); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                {!! Form::label('device_id', __('repair::lang.device') . ':') !!}
                                {!! Form::select('device_id', $devices, $job_sheet->device_id, ['class' => 'form-control select2', 'placeholder' => __('messages.please_select')]); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                {!! Form::label('device_model_id', __('repair::lang.device_model') . ':') !!}
                                {!! Form::select('device_model_id', $device_models, $job_sheet->device_model_id, ['class' => 'form-control select2', 'placeholder' => __('messages.please_select')]); !!}
                            </div>
                        </div>
                    </div>
                    <div class="row pad-15">
                        <div class="col-md-12">
                            <div class="card h-100 shadow-lg mb-20">
                                <div class="card-header with-border">
                                    <h5 class="card-title">
                                        @lang('repair::lang.pre_repair_checklist'):
                                        @show_tooltip(__('repair::lang.prechecklist_help_text'))
                                        <small>
                                            @lang('repair::lang.not_applicable_key') = @lang('repair::lang.not_applicable')
                                        </small>
                                    </h5>
                                </div>
                                <div class="card-body p-3">
                                    <div class="append_checklists"></div>  
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pad-15">
                        <div class="col-sm-6">
                            <div class="form-group">
                                {!! Form::label('serial_no', __('repair::lang.serial_no') . ':*') !!}
                                {!! Form::text('serial_no', $job_sheet->serial_no, ['class' => 'form-control bd-rd-7', 'placeholder' => __('repair::lang.serial_no'), 'required']); !!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                               {!! Form::label('security_pwd', __('repair::lang.repair_passcode') . ':') !!}
                                <div class="input-group">
                                    {!! Form::text('security_pwd', $job_sheet->security_pwd, ['class' => 'form-control bd-rd-7', 'placeholder' => __('lang_v1.password')]); !!}
                                    <span class="input-group-btn">
                                        <button type="button" class="btn btn-primary btn-flat bd-rd-7" data-toggle="modal" data-target="#security_pattern">
                                            <i class="fas fa-lock"></i>
                                            @lang('repair::lang.pattern_lock')
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row pad-15">
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('product_configuration', __('repair::lang.product_configuration') . ':') !!} <br>
                                {!! Form::textarea('product_configuration', $job_sheet->product_configuration, ['class' => 'tags-look bd-rd-7', 'rows' => 4]); !!}

                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('defects', __('repair::lang.problem_reported_by_customer') . ':') !!} <br>
                                {!! Form::textarea('defects', $job_sheet->defects, ['class' => 'tags-look bd-rd-7', 'rows' => 4]); !!}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('product_condition', __('repair::lang.condition_of_product') . ':') !!} <br>
                                {!! Form::textarea('product_condition', $job_sheet->product_condition, ['class' => 'tags-look bd-rd-7', 'rows' => 4]); !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card h-100 shadow-lg mb-20 pad-15">
                <div class="card-body p-3">
                    <div class="row pad-15">
                        @if(in_array('service_staff' ,$enabled_modules))
                            <div class="col-sm-4">
                                <div class="form-group">
                                    {!! Form::label('service_staff', __('repair::lang.assign_service_staff') . ':') !!}
                                    {!! Form::select('service_staff', $technecians, $job_sheet->service_staff, ['class' => 'form-control select2', 'placeholder' => __('restaurant.select_service_staff')]); !!}
                                </div>
                            </div>
                        @endif
                        <div class="col-md-12">
                            <div class="form-group">
                                {!! Form::label('comment_by_ss', __('repair::lang.comment_by_ss') . ':') !!}
                                {!! Form::textarea('comment_by_ss', $job_sheet->comment_by_ss, ['class' => 'form-control bd-rd-7', 'rows' => '3']); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                {!! Form::label('estimated_cost', __('repair::lang.estimated_cost') . ':') !!}
                                {!! Form::text('estimated_cost', !empty($job_sheet->estimated_cost) ? @num_format($job_sheet->estimated_cost) : null, ['class' => 'form-control input_number bd-rd-7', 'placeholder' => __('repair::lang.estimated_cost')]); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label for="status_id">{{__('sale.status') . ':*'}}</label>
                                <select name="status_id" class="form-control status" id="status_id" required>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                {!! Form::label('delivery_date', __('lang_v1.due_date') . ':') !!}
                                @show_tooltip(__('repair::lang.delivery_date_tooltip'))
                                <div class="input-group">
                                    {!! Form::text('delivery_date', !empty($job_sheet->delivery_date)? @format_datetime($job_sheet->delivery_date) : null, ['class' => 'form-control bd-rd-7', 'readonly']); !!}
                                    <span class="input-group-addon bd-0">
                                        <i class="fas fa-times-circle text-danger cursor-pointer clear_delivery_date"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                {!! Form::label('images', __('repair::lang.document') . ':') !!}
                                {!! Form::file('images[]', ['id' => 'upload_job_sheet_image', 'accept' => implode(',', array_keys(config('constants.document_upload_mimes_types'))), 'multiple']); !!}
                                <small>
                                    <p class="help-block">
                                        @lang('purchase.max_file_size', ['size' => (config('constants.document_size_limit') / 1000000)])
                                        @includeIf('components.document_help_text')
                                    </p>
                                </small>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label>@lang('repair::lang.send_notification')</label> <br>
                                <div class="checkbox-inline">
                                    <label class="cursor-pointer">
                                        <input type="checkbox" name="send_notification[]" value="sms">
                                        @lang('repair::lang.sms')
                                    </label>
                                </div>
                                <div class="checkbox-inline">
                                    <label class="cursor-pointer">
                                        <input type="checkbox" name="send_notification[]" value="email">
                                        @lang('business.email')
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="row"><div class="col-md-12"> <hr class="line-light"></div></div>
                        <div class="clearfix"></div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                @php
                                    $custom_field_1_label = !empty($repair_settings['job_sheet_custom_field_1']) ? $repair_settings['job_sheet_custom_field_1'] : __('lang_v1.custom_field', ['number' => 1])
                                @endphp
                                {!! Form::label('custom_field_1', $custom_field_1_label . ':') !!}
                                {!! Form::text('custom_field_1', $job_sheet->custom_field_1, ['class' => 'form-control bd-rd-7']); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                @php
                                    $custom_field_2_label = !empty($repair_settings['job_sheet_custom_field_2']) ? $repair_settings['job_sheet_custom_field_2'] : __('lang_v1.custom_field', ['number' => 2])
                                @endphp
                                {!! Form::label('custom_field_2', $custom_field_2_label . ':') !!}
                                {!! Form::text('custom_field_2', $job_sheet->custom_field_2, ['class' => 'form-control bd-rd-7']); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                @php
                                    $custom_field_3_label = !empty($repair_settings['job_sheet_custom_field_3']) ? $repair_settings['job_sheet_custom_field_3'] : __('lang_v1.custom_field', ['number' => 3])
                                @endphp
                                {!! Form::label('custom_field_3', $custom_field_3_label . ':') !!}
                                {!! Form::text('custom_field_3', $job_sheet->custom_field_3, ['class' => 'form-control bd-rd-7']); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                @php
                                    $custom_field_4_label = !empty($repair_settings['job_sheet_custom_field_4']) ? $repair_settings['job_sheet_custom_field_4'] : __('lang_v1.custom_field', ['number' => 4])
                                @endphp
                                {!! Form::label('custom_field_4', $custom_field_4_label . ':') !!}
                                {!! Form::text('custom_field_4', $job_sheet->custom_field_4, ['class' => 'form-control bd-rd-7']); !!}
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                @php
                                    $custom_field_5_label = !empty($repair_settings['job_sheet_custom_field_5']) ? $repair_settings['job_sheet_custom_field_5'] : __('lang_v1.custom_field', ['number' => 5])
                                @endphp
                                {!! Form::label('custom_field_5', $custom_field_5_label . ':') !!}
                                {!! Form::text('custom_field_5', $job_sheet->custom_field_5, ['class' => 'form-control bd-rd-7']); !!}
                            </div>
                        </div>
                        <div class="col-sm-12 text-center">
                            <hr class="horizontal-light">
                            <input type="hidden" name="submit_type" id="submit_type">
                            <button type="submit" class="btn btn-success btn-big submit_button" value="save_and_add_parts" id="save_and_add_parts">
                                @lang('repair::lang.save_and_add_parts')
                            </button>
                            <button type="submit" class="btn btn-info btn-big submit_button" value="save_and_upload_docs" id="save_and_upload_docs">
                                @lang('repair::lang.save_and_upload_docs')
                            </button>
                            <button type="submit" class="btn btn-primary btn-big submit_button" value="submit" id="save">
                                @lang('messages.save')
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {!! Form::close() !!} <!-- /form close -->
    <div class="modal fade contact_modal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        @include('contact.create', ['quick_add' => true])
    </div>
</section>
@stop
@section('css')
    @include('repair::job_sheet.tagify_css')
@stop
@section('javascript')
    <script src="{{ asset('js/pos.js?v=' . $asset_v) }}"></script>
    <script type="text/javascript">
        $(document).ready( function() {
            $('.submit_button').click( function(){
                $('#submit_type').val($(this).attr('value'));
            });
            $('form#edit_job_sheet_form').validate({
                errorPlacement: function(error, element) {
                    if (element.parent('.iradio_square-blue').length) {
                        error.insertAfter($(".radio_btns"));
                    } else if (element.hasClass('status')) {
                        error.insertAfter(element.parent());
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    form.submit();
                }
            });

            var data = [{
              id: "",
              text: '@lang("messages.please_select")',
              html: '@lang("messages.please_select")',
              is_complete : '0',
            }, 
            @foreach($repair_statuses as $repair_status)
                {
                id: {{$repair_status->id}},
                is_complete : '{{$repair_status->is_completed_status}}',
                @if(!empty($repair_status->color))
                    text: '<i class="fa fa-circle" aria-hidden="true" style="color: {{$repair_status->color}};"></i> {{$repair_status->name}}',
                    title: '{{$repair_status->name}}'
                @else
                    text: "{{$repair_status->name}}"
                @endif
                },
            @endforeach
            ];

            $("select#status_id").select2({
                data: data,
                escapeMarkup: function(markup) {
                    return markup;
                },
                 templateSelection: function (data, container) {
                    $(data.element).attr('data-is_complete', data.is_complete);
                    return data.text;
                }
            });

            @if(!empty($job_sheet->status_id))
                $("select#status_id").val({{$job_sheet->status_id}}).change();
            @elseif(!empty($default_status))
                $("select#status_id").val({{$default_status}}).change();
            @endif

            $('#delivery_date').datetimepicker({
                format: moment_date_format + ' ' + moment_time_format,
                ignoreReadonly: true,
            });

            $(document).on('click', '.clear_delivery_date', function() {
                $('#delivery_date').data("DateTimePicker").clear();
            });

            var lock = new PatternLock("#pattern_container", {
                onDraw:function(pattern){
                    $('input#security_pattern').val(pattern);
                },
                enableSetPattern: true
            });

            @if(!empty($job_sheet->security_pattern))
                lock.setPattern("{{$job_sheet->security_pattern}}");
            @endif

            //filter device model id based on brand & device
            $(document).on('change', '#brand_id', function() {
                getModelForDevice();
                getModelRepairChecklists();
            });

            // get models for particular device
            $(document).on('change', '#device_id', function() {
                getModelForDevice();
            });
            
            $(document).on('change', '#device_model_id', function() {
                getModelRepairChecklists();
            });

            function getModelForDevice() {
                var data = {
                    device_id : $("#device_id").val(),
                    brand_id: $("#brand_id").val()
                };

                $.ajax({
                    method: 'GET',
                    url: '/repair/get-device-models',
                    dataType: 'html',
                    data: data,
                    success: function(result) {
                        $('select#device_model_id').html(result);
                    }
                });
            }

            function getModelRepairChecklists() {
                var data = {
                        model_id : $("#device_model_id").val(),
                        job_sheet_id : $("#job_sheet_id").val()
                    };
                $.ajax({
                    method: 'GET',
                    url: '/repair/models-repair-checklist',
                    dataType: 'html',
                    data: data,
                    success: function(result) {
                        $(".append_checklists").html(result);
                    }
                });
            }

            getModelRepairChecklists();

            $('input[type=radio][name=service_type]').on('ifChecked', function(){
              if ($(this).val() == 'pick_up' || $(this).val() == 'on_site') {
                $("div.pick_up_onsite_addr").show();
              } else {
                $("div.pick_up_onsite_addr").hide();
              }
            });

            //initialize file input
            $('#upload_job_sheet_image').fileinput({
                showUpload: false,
                showPreview: false,
                browseLabel: LANG.file_browse_label,
                removeLabel: LANG.remove
            });

            //initialize tags input (tagify)
            var product_configuration = document.querySelector('textarea#product_configuration');
            tagify_pc = new Tagify(product_configuration, {
              whitelist: {!!json_encode($product_conf)!!},
              maxTags: 100,
              dropdown: {
                maxItems: 100,           // <- mixumum allowed rendered suggestions
                classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
                enabled: 0,             // <- show suggestions on focus
                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
              }
            });

            var product_defects = document.querySelector('textarea#defects');
            tagify_pd = new Tagify(product_defects, {
              whitelist: {!!json_encode($defects)!!},
              maxTags: 100,
              dropdown: {
                maxItems: 100,           // <- mixumum allowed rendered suggestions
                classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
                enabled: 0,             // <- show suggestions on focus
                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
              }
            });

            var product_condition = document.querySelector('textarea#product_condition');
            tagify_p_condition = new Tagify(product_condition, {
              whitelist: {!!json_encode($product_cond)!!},
              maxTags: 100,
              dropdown: {
                maxItems: 100,           // <- mixumum allowed rendered suggestions
                classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
                enabled: 0,             // <- show suggestions on focus
                closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
              }
            });

            //TODO:Uncomment the below code
            
            // function toggleSubmitButton () {
            //     if ($('select#status_id').find(':selected').data('is_complete')) {
            //         $("#save_and_add_parts").attr('disabled', false);
            //         $("#save_and_upload_docs").attr('disabled', true);
            //     } else {
            //         $("#save_and_add_parts").attr('disabled', true);
            //         $("#save_and_upload_docs").attr('disabled', false);
            //     }
            // }

            // $("select#status_id").on('change', function () {
            //     toggleSubmitButton();
            // });

            // toggleSubmitButton();
        });
    </script>
@endsection