@extends('adminlte::page')

@section('title', __('products.tab-title'))

@section('content_header')
        <div class="text-right mr-3">
            <span style="color: #ffc6c6">&#9632; </span> - Zamijeniti
            <span class="ml-3" style="color: #a9dffc">&#9632; </span> - Pokupiti
            <span class="ml-3" style="color: #ffefc7">&#9632; </span> - Vratiti
            <span class="ml-3" style="color: #c6fdb9">&#9632; </span> - Oboje
        </div>
@stop


@section('content')
    <div class="row">
        <div class="col-12 page-tab">
            @if(count($working_orders) == 0)
                <div class="card">
                    <div class="card-header">
                        <h5>
                            Nema pripremljenih radnih naloga.
                        </h5>
                    </div>
                </div>
            @endif
            @foreach($working_orders as $working_order)
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col" style="font-size: 20px">
                                Radni nalog br.: {{$working_order->number}}
                            </div>
                            <div class="text-right col">
                                <a id="wo_products_info" data-wo_id="{{$working_order->id}}" href="javascript:void(0)" class="btn btn-danger" title="Uređaji">
                                    <i class="fas fa-fire-extinguisher"></i>
                                </a>
                                @switch($working_order->status)
                                    @case(0)
                                    <a id="show_wo_route" data-wo_id="{{$working_order->id}}" href="javascript:void(0)" class="btn btn-info" title="Ruta">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </a>
                                    <a class="btn btn-warning start-wo-btn" data-wo_id="{{$working_order->id}}"> Započni </a>
                                    @break
                                    @case(1)
                                    <a id="show_wo_route" data-wo_id="{{$working_order->id}}" href="javascript:void(0)" class="btn btn-info" title="Ruta">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </a>
                                    <a class="btn btn-primary finish-wo-btn {{$working_order->in_progress ? 'disabled' : ''}}"
                                       style="color: white"
                                       href="{{route('delivery.finishWO', ['wo_id' => $working_order->id])}}"
                                    > Završi </a>
                                    @break
                                    @case(2)
                                    <a href="{{route('working_orders.pdf', ['workingOrderId' => $working_order->id])}}" class="btn btn-warning" title="PDF" target="_blank">
                                        <i class="fas fa-file-pdf" style="color: white"></i>
                                    </a>
                                    <a class="btn btn-secondary" disabled> Radni nalog završen </a>
                                    @break
                                    @default

                                @endswitch
                            </div>
                        </div>

                        Napomena: {{$working_order->remark}}
                    </div>
                    <div class="card-body">
                        <div class="card-deck">
                            <div class="row w-100">
                                @foreach($working_order->locations as $wo_location)
                                    <div class="col-md-3 col-sm-12">
                                        <div class="card"  style="background-color: {{__('delivery.needs-color.'.$wo_location->needs)}}">
                                            <div class="card-body">
                                                <h5 class="card-title">{{ mb_strtoupper($wo_location->location->name) }}</h5>
                                                <p class="card-text">
                                                    {{ $wo_location->location->address.', '.$wo_location->location->city }} <br>
                                                    {{ $wo_location->location->contact_number }} <br>
                                                    {{ $wo_location->location->getTodayWorkHours() }} <br>
                                                    Potrebno: {{__('delivery.needs-todo.'.$wo_location->needs)}} <br>
                                                </p>
                                            </div>
                                            <div class="card-footer">
                                                <div class="row">
                                                    <div class="col">
                                                        @if($wo_location->status == 2) <i class="fas fa-check-circle fa-2x circle-icon" style="color: #00b44e;"></i>
                                                        @elseif($wo_location->status == 1) <i class="fas fa-times-circle fa-2x circle-icon" style="color: #fd4957;"></i> @endif
                                                    </div>
                                                    <div class="col text-right">
                                                        <small class="text-muted">
                                                            <a data-wo_loc_id="{{$wo_location->id}}"
                                                               class="btn btn-danger location-products-info"
                                                               title="Uređaji"
                                                            >
                                                                <i class="fas fa-fire-extinguisher"></i>
                                                            </a>
                                                            <a data-wo_loc_id="{{$wo_location->id}}"
                                                               title="Potvrdi"
                                                               class="btn btn-info confirm-modal-btn {{$working_order->status == 1 ? '' : 'disabled'}}"
                                                            >
                                                                <i class="fas fa-marker" style="color: #ffffff;"></i>
                                                            </a>
                                                        </small>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

@stop

@section('footer')
    @include('delivery.modals.confirm')
    @include('delivery.modals.productsInfo')
    @include('layouts.error-modal')
@append

@push('css')

@endpush

@push('js')
    @php
        $url = url()->current();
    @endphp

    {{-- Add inline js when developing or testing here. When you're finished, transfer to products.js --}}
    <script defer type="text/javascript" src="{{ asset('/js/working_orders.min.js') }}"></script>
    <script defer type="text/javascript" src="{{ asset('/js/google-maps.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.2/dist/signature_pad.umd.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){



        $(document).on('click', '.start-wo-btn', function () {
            $.ajax({
                type: "POST",
                url: route("delivery.changeStatus"),
                data: {
                    wo_id: $(this).data('wo_id'),
                    status: 1,
                    _token: '{{ csrf_token() }}',
                },
                success: function success() {
                    window.location.reload()
                },
                error: function error(response) {},
            });
        })

        // CANVAS
        var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
            backgroundColor: 'rgba(255, 255, 255, 0)',
            penColor: 'rgb(0, 0, 0)'
        });
        // When true, moving the mouse draws on the canvas
        let isDrawing = false;
        let x = 0;
        let y = 0;

        const myPics = document.getElementById('signature-pad');
        const context = myPics.getContext('2d');

// event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas.

// Add the event listeners for mousedown, mousemove, and mouseup
        myPics.addEventListener('mousedown', e => {
            x = e.offsetX;
            y = e.offsetY;
            isDrawing = true;
        });

        myPics.addEventListener('mousemove', e => {
            if (isDrawing === true) {
                drawLine(context, x, y, e.offsetX, e.offsetY);
                x = e.offsetX;
                y = e.offsetY;
            }
        });

        window.addEventListener('mouseup', e => {
            if (isDrawing === true) {
                drawLine(context, x, y, e.offsetX, e.offsetY);
                x = 0;
                y = 0;
                isDrawing = false;
            }
        });

        function drawLine(context, x1, y1, x2, y2) {
            context.beginPath();
            context.strokeStyle = 'black';
            context.lineWidth = 1;
            context.moveTo(x1, y1);
            context.lineTo(x2, y2);
            context.stroke();
            context.closePath();
        }

        // END CANVAS

        // SIGNATURE
        // var signaturePad = new SignaturePad(document.getElementById('signature-pad'), {
        //     backgroundColor: 'rgba(255, 255, 255, 0)',
        //     penColor: 'rgb(0, 0, 0)'
        // });
        //
        // var canvas = document.getElementById("signature-pad");
        // var context = canvas.getContext("2d");
        // function getMousePos(canvas, evt) {
        //     var rect = canvas.getBoundingClientRect();
        //     return {
        //         x: evt.clientX - rect.left,
        //         y: evt.clientY - rect.top
        //     };
        // }
        // function draw(evt) {
        //     var pos = getMousePos(canvas, evt);
        //
        //     context.fillStyle = "#000000";
        //     context.fillRect (pos.x, pos.y, 4, 4);
        // }
        // END SIGNATURE

        $(document).on('click', '#signature-clear-btn', function () {
            signaturePad.clear();
        });

        $(document).on('click', '#wo-loc-create-btn', function (e) {
            e.preventDefault()

            if ($('#confirm-modal [id="status[2]"]').is(':checked') && signaturePad.isEmpty()) {
                if($('#confirm-modal [id="location[hasSignature]"]').val() == 1){
                    $('#wo-loc-confirm-form').submit()
                }else{
                    alert("Potreban potpis!");
                }
            }else {
                let signature = signaturePad.toDataURL('image/png');
                console.log(signature)
                $('#confirm-modal [id="location[signature]"]').val(signature);

                $('#wo-loc-confirm-form').submit()
            }
        });

        $(document).on('click', '#wo_products_info', function () {
            console.log($(this).data('wo_id'))
            $.ajax({
                type: "GET",
                url: route('delivery.woProductsInfo'),
                data: {
                    wo_id:  $(this).data('wo_id')
                },
                success: function(response){
                    console.log(response)
                    Object.entries(response).forEach(([attribute, value]) => {
                        console.log(attribute, value)
                        $('#products-info-tbody').append(
                            '<tr class="text-center">' +
                            '<td>' + attribute + '</td>' +
                            '<td>' + value.for_pick + '</td>' +
                            '<td>' + value.for_return  + '</td>' +
                            '<td>' + value.for_switch  + '</td>' +
                            '</tr>'
                        )
                    })
                },
                error: function(response) {
                    $('#errorModal').modal('show');
                }
            });

            $('#products-info-modal').modal('show')
        })


        $(document).on('click', '.location-products-info', function () {
            console.log($(this).data('wo_loc_id'))
            $.ajax({
                type: "GET",
                url: route('delivery.locationProductsInfo'),
                data: {
                    wo_loc_id:  $(this).data('wo_loc_id')
                },
                success: function(response){
                    console.log(response)
                    Object.entries(response).forEach(([attribute, value]) => {
                        console.log(attribute, value)
                        $('#products-info-tbody').append(
                            '<tr class="text-center">' +
                            '<td>' + value.product.name + '</td>' +
                            '<td>' + value.for_pick + '</td>' +
                            '<td>' + value.for_return  + '</td>' +
                            '<td>' + value.for_switch  + '</td>' +
                            '</tr>'
                        )
                    })
                },
                error: function(response) {
                    $('#errorModal').modal('show');
                }
            });

            $('#products-info-modal').modal('show')
        })

        $(document).on('click', '.confirm-modal-btn', function () {
            let wo_loc_id = $(this).data('wo_loc_id')
            $('#confirm-modal [id="location[wo_loc_id]"]').val(wo_loc_id)

            $.ajax({
                type: "GET",
                url: route("delivery.getLocationConfirmation"),
                data: {
                    wo_loc_id: wo_loc_id,
                },
                success: function success(response) {
                    console.log(response)
                    $('#confirm-modal [id="location[notice]"]').text(response.notice)
                    $('#confirm-modal [id="location[signatory]"]').val(response.signatory)
                    $('#confirm-modal [name="location[status]"][value="'+response.status+'"]').prop('checked', true)
                    let status = '{{old('location.status')}}'
                    $('#signature-group').toggle(response.status == 2 || status == 2)

                    if(response.signature) {
                        $('#confirm-modal [id="location[hasSignature]"]').val(1)

                        let canvas = document.getElementById('signature-pad')
                        let context = canvas.getContext('2d');

                        let base_image = new Image();
                        base_image.src = '{{ asset('/storage/signatures') }}/' + response.signature;
                        base_image.onload = function () {
                            context.drawImage(base_image, 0, 0);
                        }
                    }

                    Object.entries(response.products).forEach(([attribute, value]) => {
                        console.log(attribute, value)
                        $('#append-product-name').append('<th>'+value.product.name+'</th>')
                        $('#append-product-stock').append('<td>'+value.stock+'</td>')
                        $('#append-product-for-pick').append('<td>'+value.for_pick+'</td>')
                        $('#append-product-picked').append('<td><input style="width: 50%" class="text-center" type="number" onClick="this.select();" onkeyup="if(value<0) value=0; if(value>max) value=max;" max="'+value.for_pick+'" name="location[products]['+value.product_id+'][picked]" value="'+value.picked+'"></td>')
                        $('#append-product-for-return').append('<td>'+value.for_return+'</td>')
                        $('#append-product-returned').append('<td><input style="width: 50%" class="text-center" type="number" onClick="this.select();" onkeyup="if(value<0) value=0; if(value>max) value=max;" max="'+value.for_return+'" name="location[products]['+value.product_id+'][returned]" value="'+value.returned+'"></td>')
                        $('#append-product-for-switch').append('<td>'+value.for_switch+'</td>')
                        $('#append-product-switched').append('<td><input style="width: 50%" class="text-center" type="number" onClick="this.select();" onkeyup="if(value<0) value=0; if(value>max) value=max;" max="'+value.for_switch+'" name="location[products]['+value.product_id+'][switched]" value="'+value.switched+'"></td>')
                    })
                    $('.confirm-products-table th, .confirm-products-table td').addClass('borderClass')
                    // $('.confirm-products-table th, .confirm-products-table td').css({
                    //     "border-color": "#5f5f5f",
                    //     "border-width":"1px",
                    //     "border-style":"solid"}
                    // );
                },
                error: function error(response) {
                },
            });
            $('#confirm-modal').modal('show')
        })

        $('#products-info-modal').on('hidden.bs.modal', function () {
            $('#products-info-tbody').html('')
            $('#confirm-modal [id="location[hasSignature]"]').val(0)
        })

        $('#confirm-modal').on('hidden.bs.modal', function () {
            signaturePad.clear();
            $('#confirm-modal [id="location[notice]"]').text('')
            $('#confirm-modal [id="location[signatory]"]').val('').removeClass('is-invalid')
            $('#confirm-modal [name="location[status]"]').prop('checked', false)
            $('.products-info-tbody').html('')
            $('.myTable').html(
                '<table class="confirm-products-table table-responsive text-center">'+
                    '<thead>'+
                    '<tr id="append-product-name"><th> Uređaji </th></tr>'+
                    '</thead>'+
                    '<tbody class="products-info-tbody">'+
                        '<tr id="append-product-stock"><th> Ukupno </th></tr>'+
                        '<tr id="append-product-for-pick"><th> Pokupiti </th></tr>'+
                        '<tr id="append-product-picked"><th> Pokupio </th></tr>'+
                        '<tr id="append-product-for-return"><th> Vratiti </th></tr>'+
                        '<tr id="append-product-returned"><th> Vratio </th></tr>'+
                        '<tr id="append-product-for-switch"><th> Zamijeniti </th></tr>'+
                        '<tr id="append-product-switched"><th> Zamijenio </th></tr>'+
                    '</tbody>' +
                '</table>'
            )
        })

        $(document).on('change', '[name="location[status]"]', function () {
            $('#signature-group').toggle($(this).val() == 2)
        })

        $(document).on('click', '.finish-wo-btn', function () {

        })

        @if($errors->hasBag('location-confirmation'))
            let wo_loc_id = {{old('location.wo_loc_id')}};
            $('.confirm-modal-btn[data-wo_loc_id="'+wo_loc_id+'"]').trigger('click')
            console.error(JSON.parse('{!! $errors->getBag('location-confirmation')->toJson() !!}'))
        @endif
    })
    </script>
@endpush