@php use Carbon\Carbon; @endphp
@extends('layouts.iconbar')

@section('title')
Edit Hardware Job
@endsection

@section('custom_styles')
<style>
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
@endsection

@section('content')

@section('breadcrumbs')
{{ Breadcrumbs::render(\Request::route()->getName(), $job) }}
@endsection

<div class="page-content container-fluid create-page" create>
    <div class="panel">
        <div class="panel-body">
            {!! Form::model($job, ['method' => 'PUT', 'route' => ['admin.jobs.hardware.update', $job->id], 'files' => true, 'id' => 'create', 'class' => 'needs-validation', 'novalidate', 'entype' => 'multipart/form-data']) !!}
            <div class="row">
                {!! Form::hidden('job_type', 'Hardware') !!}
                {{--Left Column--}}
                <div class="left col-md-6">

                    <div class="row form-group">
                        <div class="col-md-12">
                            <div class="form-material floating" data-plugin="formMaterial">
                                @if (Auth::user()->hasRole('Admin') )
                                {!! Form::text('internal_id', old('internal_id'), ['class' => 'form-control', 'placeholder' => '', 'required'=>'']) !!}
                                @else
                                {!! Form::text('internal_id', old('internal_id'), ['class' => 'form-control', 'placeholder' => '', 'required'=>'', 'readonly']) !!}
                                @endif
                                {!! Form::label('internal_id', 'Internal Id', ['class' => 'floating-label', 'style' => 'top: -2rem;']) !!}
                                @if($errors->has('internal_id'))
                                <p class="error-block">
                                    {{ $errors->first('internal_id') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @if(Auth::user()->hasRole('Admin') )
                    <div class="row form-group">
                        <div class="col-md-12">
                            <div class="form-material floating" data-plugin="formMaterial">
                                {!! Form::select('user_id', $users, old('user_id'), ['class' => 'form-control select2','id' => 'customer', 'v-if' => "newOrExisting == 'New'"]) !!}
                                {!! Form::select('user_id', $users, old('user_id'), ['class' => 'form-control select2','id' => 'customer', 'v-if' => "newOrExisting == 'Existing'", 'disabled' => true]) !!}
                                {!! Form::hidden('user_id', null,['v-if' => "newOrExisting == 'Existing'", 'id' => 'user_id']) !!}
                                {!! Form::label('user_id', 'Customer', ['class' => 'floating-label', 'style' => ' top: -.8rem;', 'style' => 'top: -2rem;']) !!}
                                @if($errors->has('user_id'))
                                <p class="error-block">
                                    {{ $errors->first('user_id') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    @else
                    {!! Form::hidden('user_id', Auth::user()->id) !!}
                    @endif
                    <div class="row form-group">
                        <div class="col-md-12">
                            <div class="form-material floating" data-plugin="formMaterial">
                                {!! Form::text('name', old('name'), ['class' => 'form-control empty', 'id' => 'name','placeholder' => '', 'required'=>'']) !!}
                                {!! Form::label('name', trans('global.jobs.fields.name').'*', ['class' => 'floating-label', 'style'=>"top: -2rem;"]) !!}
                                <div class="invalid-feedback namefeedback">
                                    Name field is required.
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <div class="form-material floating" data-plugin="formMaterial">

                                {!! Form::select('hardwares', $hardwares->pluck('name', 'id'), old('hardwares'), ['class' => 'form-control hardware select2', 'id' => 'hardware_options', 'multiple' => true]) !!}
                                {!! Form::label('hardwares', trans('global.jobs.fields.hardwares').'*', ['class' => 'floating-label', 'style' => 'top: -2rem;']) !!}
                                <div class="invalid-feedback">
                                    Please select hadware.
                                </div>
                                @if($errors->has('hadware'))
                                <p class="error-block">
                                    {{ $errors->first('hadware') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>

                    @foreach ($hardwares as $k => $hardware)
                    @php
                    $qty = $job->hardwares->where('id', $hardware->id)->first()->pivot->qty ?? null
                    @endphp
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="form-group hardware_items form-material floating" data-plugin="formMaterial" id="hardware_{{ $hardware->id }}" style="display:none;">
                                <input type="number" class="form-control empty" id="hardware_input_{{ $hardware->id }}" value="{{ $qty }}">
                                <label for="hardwares" class="floating-label" style="top: -2rem;">{{ $hardware->name }}'s Quantity</label>
                            </div>
                        </div>
                    </div>
                    @endforeach

                    <div class="row form-group mb-4" v-for="(hardware,index) in hardwares">
                        <div class="col-md-4">
                            <div data-plugin="formMaterial" class="form-material floating">
                                <input placeholder="" required="required" :name="'item['+index+'][item]'" type="text" class="form-control empty" v-model="hardware.item">
                                <label for="item" class="floating-label" style="top: -2rem;">
                                    Item*
                                </label>
                                <div class="invalid-feedback namefeedback">
                                    Item field is required.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div data-plugin="formMaterial" class="form-material floating">
                                <input placeholder="" required="required" :name="'item['+index+'][qty]'" type="number" class="form-control empty" v-model="hardware.qty">
                                <label for="name" class="floating-label" style="top: -2rem;">Qty*</label>
                                <div class="invalid-feedback namefeedback">
                                    Qty field is required.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div data-plugin="formMaterial" class="form-material floating">
                                <input placeholder="" step="0.01" required="required" :name="'item['+index+'][price]'" type="number" class="form-control empty" v-model="hardware.price">
                                <label for="name" class="floating-label" style="top: -2rem;">Price*</label>
                                <div class="invalid-feedback namefeedback">
                                    Price field is required.
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <button class="btn btn-danger btn-sm mb-4" type="button" @click="removeHardware(index)"><i class="fa fa-remove"></i> Remove</button>
                        </div>
                    </div>
                    <!-- <button class="btn btn-info btn-sm mb-4" type="button" @click="addHardware"><i class="fa fa-plus"></i> Add Hardware Item</button> -->
                    <div class="row form-group mb-4">
                        <!-- <div class="col-md-6 form-group">
                            {!! Form::label('production_handover_date', trans('global.jobs.fields.production_handover_date').'', ['class' => 'floating-label']) !!}
                            <div id="productionHandoverDate" data-autoclose="false" data-date="{{ Carbon::now()->addDays(10)->format('d-m-Y') }}"></div>
                            {!! Form::hidden('production_handover_date', old('production_handover_date', Carbon::now()->addDays(10)->format('d-m-Y')), ['class' => 'form-control date', 'placeholder' => '', 'required', 'id' => 'production_handover_date']) !!}
                            <div class="invalid-feedback">
                                Production hand over is required field.
                            </div>
                            @if($errors->has('production_handover_date'))
                            <p class="error-block">
                                {{ $errors->first('production_handover_date') }}
                            </p>
                            @endif
                        </div> -->

                        <div class="col-md-6 form-group">
                            {!! Form::label('delivery_date', trans('global.jobs.fields.delivery_date').'', ['class' => 'floating-label']) !!}
                            <div id="deliveryDate" data-autoclose="false" data-date="{{ Carbon::now()->addDays(10)->format('d-m-Y') }}"></div>
                            {!! Form::hidden('delivery_date', old('delivery_date', Carbon::now()->addDays(10)->format('d-m-Y')), ['class' => 'form-control date', 'placeholder' => '', 'required', 'id' => 'delivery_date']) !!}
                            <div class="invalid-feedback">
                                Delivery Date is required Field
                            </div>
                            @if($errors->has('delivery_date'))
                            <p class="error-block">
                                {{ $errors->first('delivery_date') }}
                            </p>
                            @endif
                        </div>

                    </div>
                </div>

                {{--Right Column--}}
                <div class="right col-md-6">
                <div class="row form-group">
                        <div class="col-md-12">
                            {!! Form::label('order_pdf', trans('global.jobs.fields.upload_files').'', ['class' => 'floating-label']) !!}
                            <input name="order_pdf_id" id="order_pdf" type="hidden" />

                            <div class="form-material dropzone" id="pdfDropzone">
                                <div class="fallback">
                                    <input name="order_pdf" type="file" multiple />
                                </div>

                                @if($errors->has('order_pdf'))
                                <p class="error-block">
                                    {{ $errors->first('order_pdf') }}
                                </p>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-12">
                            <label for="customer_notes" class="floating-label">
                                Job Description
                            </label>

                            <div class="form-material floating" data-plugin="formMaterial" v-if="showCustomerNotes">
                                {!! Form::textarea('customer_notes', old('customer_notes', strip_tags($job->customer_notes)), ['class' => 'form-control ', 'placeholder' => '']) !!}
                                

                                <div class="invalid-feedback">
                                    Customer note is required.
                                </div>
                                @if($errors->has('customer_notes'))
                                <p class="error-block">
                                    {{ $errors->first('customer_notes') }}
                                </p>
                                @endif
                            </div>
                        </div>

                    </div>
                    <div class="row form-group">
                        <label for="special_packing" class="col-md-12 floating-label">
                            Production Notes
                        </label>

                        <div class="col-md-12 form-material floating" data-plugin="formMaterial" v-if="showProductionNotes">
                            <div id="special_packing_summernote" data-plugin="summernote">
                                {!! old('special_packing', $job->special_packing) !!}
                            </div>
                            {!! Form::textarea('special_packing', old('special_packing'), ['class' => 'form-control ', 'placeholder' => '', 'style' => 'display:none;']) !!}

                            @if($errors->has('special_packing'))
                            <p class="error-block">
                                {{ $errors->first('special_packing') }}
                            </p>
                            @endif
                        </div>

                    </div>


                </div>
                {{--End Right Column--}}

                {{--Submit Button--}}
                <div class="row form-group">

                    <div class="col-md-4 mt-4">
                        <button type="submit" class="btn btn-success" id="submitbtn" style="border: none">Submit</button>
                    </div>
                </div>
            </div>

            {!! Form::close() !!}
        </div>
    </div><!-- end row -->
</div><!-- panel-body -->



@stop

@section('javascript')
@parent
<script src="{{ asset('adminlte/plugins/fileUpload/js/jquery.iframe-transport.js') }}"></script>
<script src="{{ asset('adminlte/plugins/fileUpload/js/jquery.fileupload.js') }}"></script>
<script>
   Dropzone.autoDiscover = false;
    $(function() {
        var count = 0;
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        window.myDropZone = $("#pdfDropzone").dropzone({
            url: '/admin/jobs/uploadImage',
            addRemoveLinks: true,
            parallelUploads: 1,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            uploadMultiple: true,
            init: function() {
                myDropzone = this;
                @foreach($job->getMedia('order_pdf') as $media)
                var mockFile = {
                    name: "{{$media->file_name}}",
                    size: "{{$media->size}}",
                    serverId: "{{$media->id}}"
                };
                myDropzone.options.addedfile.call(myDropzone, mockFile);
                myDropzone.options.thumbnail.call(myDropzone, mockFile, "{{$media->getUrl()}}");
                @endforeach

                this.on("completemultiple", function() {
                    // $("#m_portlet_tab_3_2").unblock();
                });

                this.on("addedfile", function(file) {

                });
                this.on("removedfile", function(file, xhr) {
                    removeFile(file.serverId);

                });

                this.on("success", function(file, response) {
                    file.serverId = response[0].id;
                });

                this.on("complete", function(file, response) {
                    var ids = myDropzone.files.map((file) => {
                        return file.serverId;
                    });
                    $("#order_pdf").val(ids.join())
                });

            }
        });
    });


    function removeFile(id) {
        $.ajax({
            url: "/admin/jobs/delete/file",
            type: "post",
            data: {
                id: id,
                '_method': 'DELETE'
            },
            success: function(data) {
                if (data.success) {

                }

            },
            error: function(result) {

            },
        });
    }

    var hardwares = null;
    new Vue({
        el: '#create',
        data: {
            newOrExisting: 'New',
            showCustomerNotes: true,
            showProductionNotes: true,
            hardwares: hardwares
        },
        watch: {

        },

        computed: {},

        methods: {
            addHardware() {
                this.hardwares.push({
                    item: '',
                    qty: 0,
                    price: '0.00'
                })
            },
            removeHardware(itemindex) {
                let hardwares = this.hardwares
                hardwares.splice(itemindex, 1);
                console.log(hardwares)
            },
        }
    });

    function getJobData(e) {
        $.ajax({
            url: "/admin/jobs/data/" + e.target.value,
            type: "GET",
            dataType: "json",
            success: function(data) {
                if (data.job) {
                    $("#customer").val(data.job.user_id)
                    $("#user_id").val(data.job.user_id)
                    $("#name").val(data.job.name)
                    $('#customer').select2().trigger('change');
                    if (data.job.delivery_date != "") {
                        $('#deliveryDate').datepicker('update', data.job.delivery_date);
                        $('#delivery_date').val(data.job.production_handover_date);
                    }
                    if (data.job.production_handover_date != "") {
                        $('#productionHandoverDate').datepicker('update', data.job.production_handover_date);
                        $('#production_handover_date').val(data.job.production_handover_date);
                    }
                }
            }
        });
    }

    (function() {
        $(".select2").select2();
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
                form.addEventListener('submit', function(event) {

                    // $("textarea[name=customer_notes]").val($('#customer_notes_summernote').summernote('code'))
                    $("textarea[name=special_packing]").val($('#special_packing_summernote').summernote('code'))
                    // $("textarea[name=notes]").val($('#notes_summernote').summernote('code'))

                    if (form.checkValidity() === false) {
                        event.preventDefault();
                        event.stopPropagation();
                        $('.form-control:invalid').filter(":first").focus()

                    } else {
                        event.preventDefault();
                        form.submit()
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        }, false);

    })();

    jQuery(document).on("change", "#hardware_options", function(event) {
        var elements = document.getElementsByClassName("hardware_items")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.display = 'none';
        }

        var ids = $(this).val();
        ids.map(function(id) {
            $(event.target).parents(".panel-body").find(".hardware_items_label").show()
            $(event.target).parents(".panel-body").find("#hardware_" + id).show()
            $(event.target).parents(".panel-body").find("#hardware_input_" + id).attr('name', 'hardware[' + id + '][qty]')
        });
    });

    $('#productionHandoverDate').datepicker({
        format: 'dd-mm-yyyy'
    });

    $("#productionHandoverDate").on("changeDate", function(event) {
        $("#production_handover_date").val($("#productionHandoverDate").datepicker('getFormattedDate'));
    });

    $('#deliveryDate').datepicker({
        format: 'dd-mm-yyyy',
        startDate: '0d'
    });


    $("#deliveryDate").on("changeDate", function(event) {
        $("#delivery_date").val($("#deliveryDate").datepicker('getFormattedDate'));
    });

    jQuery(document).ready(function($) {

        $("#hardware_options").trigger('change')
        // Disable scroll when focused on a number input.
        $('form').on('focus', 'input[type=number]', function(e) {
            $(this).on('wheel', function(e) {
                e.preventDefault();
            });
        });

        // Restore scroll on number inputs.
        $('form').on('blur', 'input[type=number]', function(e) {
            $(this).off('wheel');
        });

        // Disable up and down keys.
        $('form').on('keydown', 'input[type=number]', function(e) {
            if (e.which == 38 || e.which == 40)
                e.preventDefault();
        });

    });
</script>
@stop