@extends('layouts.main')

@section('title', '| Pedidos')
@section('titlePage', 'Ordenes de Retiro')

@section('page-styles')
    <link rel='stylesheet' href='https://unpkg.com/leaflet@1.8.0/dist/leaflet.css' crossorigin=''>

    <style>
        #map {
            height: 400px;
            width: 100%;
        }
    </style>
@endsection

@section('content')
    <section class="content container-fluid">
        <div class="row">
            <div class="col-md-12">

                @includeif('partials.errors')
                <form method="POST" action="{{ route('orders.update', $order) }}"  role="form" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card card-default">
                        <div class="card-header">
                            <span class="card-title">{{ __('Creando') }} Orden de retiro</span>
                        </div>
                        <div class="card-body">

                            <div class="row g-3">

                                <div class="col-6">
                                    {{ Form::label('Cliente') }}
                                    {{ Form::select('customer_id', $customers, $order->customer_id, ['class' => 'form-select select2' . ($errors->has('customer_id') ? ' is-invalid' : ''), 'placeholder' => 'Elegir cliente', 'required' => 'required', 'id' => 'customer_id']) }}
                                    {!! $errors->first('customer_id', '<div class="invalid-feedback">:message</div>') !!}
                                </div>


                                <div class="col-6">
                                    {{ Form::label('Sucursal') }}
                                    {{ Form::select('branch_office_id', [], $order->branch_office_id, ['class' => 'form-select ' . ($errors->has('branch_office_id') ? ' is-invalid' : ''), 'placeholder' => 'Elegir Sucursal', 'required' => 'required', 'id' => 'branch_office_id']) }}
                                    {!! $errors->first('branch_office_id', '<div class="invalid-feedback">:message</div>') !!}


                                    <a href="#" class="float-end" data-bs-target="#editBranchOffice" data-bs-toggle="modal" id="showSucursalEdit">
                                           Editar
                                    </a>

                                    <a href="#" data-bs-target="#createBranchOffice" data-bs-toggle="modal" id="showSucursal" >
                                        Añada sucursal
                                    </a>
                                </div>
                            </div>


                        </div>
                    </div>

                    <div class="card card-default">
                        <div class="card-body">
                            <div class="row row-cols-8">
                                <div class="col">
                                    <div class="col-8">
                                        <div class="card mb-4 text-center">
                                            <a href="#" data-bs-target="#readQR" data-bs-toggle="modal">
                                                <div class="card-body h-100">
                                                    <img src="{{asset('app/img/qr.png')}}" alt="" class="w-25">
                                                    <h5 class="mt-3 tx-18">Leer código QR del extintor</h5>
                                                    <a href="javascript:void(0);" class="text-muted">Escaneé un código QR de extintor</a>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="col-8">
                                        <div class="card mb-4 text-center">
                                            <a href="#" data-bs-target="#searchProduct" data-bs-toggle="modal">
                                                <div class="card-body h-100">
                                                    <img src="{{asset('app/img/find.png')}}" alt="" class="w-25">
                                                    <h5 class="mt-3 tx-18">Buscar Extintor para agregar en orden</h5>
                                                    <a href="javascript:void(0);" class="text-muted">Añada un Extintor</a>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                {{--<div class="col">
                                    <div class="col-12">
                                        <div class="card mb-4 text-center">
                                            <a href="#" data-bs-target="#createProduct" data-bs-toggle="modal">
                                                <div class="card-body h-100">
                                                    <img src="{{asset('app/img/add.png')}}" alt="" class="w-25">
                                                    <h5 class="mt-3 tx-18">Crear Extintor</h5>
                                                    <a href="javascript:void(0);" class="text-muted">Añada Extintor</a>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>--}}


                            </div>
                        </div>
                    </div>

                    <div class="card card-default">
                        <div class="card-body">

                           <div class="table-responsive">
                               <table class="table mg-b-0 text-md-nowrap" id="tblOrder">
                                   <thead>
                                   <tr>
                                       <th></th>
                                       <th>Cantidad</th>
                                       <th>Categoría del equipo</th>
                                       <th>Tipo de Extintor</th>
                                       <th>Marca</th>
                                       <th>Número ó Serie</th>
                                       <th>Foto Digital del Extintor</th>
                                       <th>Observaci&oacute;n</th>

                                       <th>Precio</th>
                                       <th></th>
                                   </tr>
                                   </thead>
                                   <tbody>
                                   @foreach($order->orderDetails as $detail)
                                       @include('order.row', ['product' => $detail->product, 'order' => $order, 'orderDetail' => $detail])
                                   @endforeach
                                   </tbody>
                               </table>
                           </div>

                        </div>
                    </div>

                    <div class="card card-default">
                        <div class="card-body">

                            <div id="map"></div>

                        </div>
                    </div>

                    <div class="card card-default">
                        <div class="card-body">

                            @include('order.form')

                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <div class="modal fade"  id="readQR">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Leer QR</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                    @csrf
                    <input type="hidden" name="order" value="{{$order->id}}">
                    <div class="modal-body text-start">
                        <div class="row">
                            <div class="col-xl-4 col-1" ></div>
                            <div id="qr-reader" class="col-8 col-xl-4 col-sm-12" ></div>
                            <div class="col-xl-4 col-3" ></div>
                        </div>
                    </div>
                    <div class="modal-footer">

                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                    </div>

            </div>
        </div>
    </div>

    <div class="modal fade"  id="createProduct">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Crear Extintor</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action="{{ route('products.store') }}"  role="form" enctype="multipart/form-data" id="frmCreateProduct">
                    @csrf
                    <input type="hidden" name="order" value="{{$order->id}}">
                    <div class="modal-body text-start">
                            @include('product.form')
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" >Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade"  id="createBranchOffice">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Crear Sucursal</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action=""  role="form" enctype="multipart/form-data" id="frmCreateBranch">
                    @csrf

                    <div class="modal-body text-start">
                        @include('branch-office.form')
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" >Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade"  id="searchProduct">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Buscar Extintor para agregar en orden</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>


                    <div class="modal-body text-start">
                        <form class="row" id="frmSearchProduct">
                            <div class="col-4">
                                <input type="text" name="name" class="form-control" id="name" placeholder="Nombre">
                            </div>
                            <div class="col-4">
                                <select class="form-select" name="brand" id="brand">
                                    <option value="">Marca</option>
                                    @foreach($brands as $key => $brand)
                                        <option value="{{$key}}">{{$brand}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-2">
                                <button type="button" class="btn btn-primary btnSearchProduct">Buscar</button>
                            </div>
                        </form>

                        <div class="table-responsive">
                            <table class="table mg-b-0 text-md-nowrap" id="tblSearchProduct">
                                <thead>
                                <tr>
                                    <th>No</th>

                                    <th>{{__('Name')}}</th>
                                    <th>Marca</th>
                                    <th>Categoría</th>
                                    <th>Clase</th>
                                    <th>Capacidad</th>
                                    {{--<th>PSI</th>--}}
                                    {{--<th>Alto</th>--}}
                                    {{--<th>Ancho</th>--}}
                                    {{--<th>Diámetro</th>--}}
                                    {{--<th>Peso</th>--}}

                                    <th>Cantidad</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody id="tblSearchProduct_tbody">

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                    </div>

            </div>
        </div>
    </div>

    <div class="modal fade"  id="coordinatesModal">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Coordenadas</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>


                <div class="modal-body text-start">



                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                </div>

            </div>
        </div>
    </div>

    <div class="modal fade"  id="editBranchOffice">
        <div class="modal-dialog modal-dialog-centered text-center modal-xl" role="document">
            <div class="modal-content modal-content-demo">
                <div class="modal-header">
                    <h6 class="modal-title">Editar Sucursal</h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form method="POST" action=""  role="form" enctype="multipart/form-data" id="frmEditBranch">
                    @csrf
                        @method('PUT')
                    <div class="modal-body text-start">
                        <div class="row g-3">

                        <div class="col-6">
                            {{ Form::label(__('Nombre Sucursal'). ' *') }}
                            {{ Form::text('name', "", ['id' => 'name_edit', 'class' => 'form-control' . ($errors->has('name') ? ' is-invalid' : ''), 'placeholder' => __('Nombre Sucursal'), 'required' => '']) }}
                            {!! $errors->first('name', '<div class="invalid-feedback">:message</div>') !!}
                        </div>

                        <div class="col-6">
                            {{ Form::label(__('contact_name'). ' *') }}
                            {{ Form::text('contact_name',  "", ['id' => 'contact_name_edit', 'class' => 'form-control' . ($errors->has('contact_name') ? ' is-invalid' : ''), 'placeholder' => __('contact_name'), 'required' => '']) }}
                            {!! $errors->first('contact_name', '<div class="invalid-feedback">:message</div>') !!}
                        </div>
                        <div class="col-6">
                            {{ Form::label(__('contact_phone')) }}
                            {{ Form::text('contact_phone', "", ['id' => 'contact_phone_edit','class' => 'form-control' . ($errors->has('contact_phone') ? ' is-invalid' : ''), 'placeholder' => __('contact_phone')]) }}
                            {!! $errors->first('contact_phone', '<div class="invalid-feedback">:message</div>') !!}
                        </div>
                        <div class="col-6">
                            {{ Form::label(__('mobile_phone')) }}
                            {{ Form::text('mobile_phone', "", ['id' => 'mobile_phone_edit','class' => 'form-control' . ($errors->has('mobile_phone') ? ' is-invalid' : ''), 'placeholder' => __('mobile_phone')]) }}
                            {!! $errors->first('mobile_phone', '<div class="invalid-feedback">:message</div>') !!}
                        </div>
                        <div class="col-6">
                            {{ Form::label(__('contact_email') . ' *') }}
                            <input type="email" name="contact_email" id="contact_email_edit" value="" class="form-control {{ ($errors->has('contact_email') ? ' is-invalid' : '')}}" placeholder="{{__('contact_email')}}" >
                            {!! $errors->first('contact_email', '<div class="invalid-feedback">:message</div>') !!}
                        </div>
                        </div>

                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-primary" >Guardar</button>
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal" >Cerrar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('page-scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/highlight.min.js"></script>
    <script src="https://unpkg.com/html5-qrcode"></script>
    <script src='https://unpkg.com/leaflet@1.8.0/dist/leaflet.js' crossorigin=''></script>
    <script>
        let map, markers = [];
        let details = [];

        const colores = [
            "#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF", "#00FFFF", "#800000", "#008000", "#000080", "#808000",
            "#800080", "#008080", "#C0C0C0", "#808080", "#FFA500", "#FFD700", "#A52A2A", "#7FFF00", "#ADFF2F", "#32CD32",
            "#228B22", "#008000", "#006400", "#00FF7F", "#90EE90", "#00FA9A", "#00FF00", "#7CFC00", "#7FFF00", "#32CD32",
            "#98FB98", "#008000", "#008080", "#00FFFF", "#00FFFF", "#00CED1", "#20B2AA", "#5F9EA0", "#4682B4", "#B0C4DE",
            "#ADD8E6", "#87CEEB", "#87CEFA", "#00BFFF", "#1E90FF", "#6495ED", "#7B68EE", "#4169E1", "#0000FF", "#0000CD",
            "#00008B", "#000080", "#191970", "#8A2BE2", "#483D8B", "#7B68EE", "#6A5ACD", "#9370DB", "#8B008B", "#800080",
            "#BA55D3", "#DA70D6", "#D8BFD8", "#DDA0DD", "#EE82EE", "#FF00FF", "#FF00FF", "#FF69B4", "#FF1493", "#DB7093",
            "#FFB6C1", "#FFC0CB", "#FA8072", "#FFA07A", "#E9967A", "#FF8C00", "#FF7F50", "#FF6347", "#FF4500", "#FFD700",
            "#FFA500", "#FF8C00", "#FFA07A", "#FFFAF0", "#FDF5E6", "#F0FFF0", "#FFF5EE", "#F5FFFA", "#F0FFFF", "#F0F8FF",
            "#F8F8FF", "#FFF8DC", "#FFFAFA", "#FAF0E6", "#FAEBD7", "#FFE4C4", "#FFE4B5", "#FFDAB9", "#EEE8AA", "#F5DEB3"
        ];

        function docReady(fn) {
            // see if DOM is already available
            if (document.readyState === "complete" || document.readyState === "interactive") {
                // call on next available tick
                setTimeout(fn, 1);
            } else {
                document.addEventListener("DOMContentLoaded", fn);
            }
        }
        /** Ugly function to write the results to a table dynamically. */

        docReady(function() {
            hljs.initHighlightingOnLoad();
            var lastMessage;
            var codeId = 0;
            function onScanSuccess(decodedText, decodedResult) {
                dataJson = JSON.parse(decodedText);

                addProduct(dataJson.product);
            }
            var qrboxFunction = function(viewfinderWidth, viewfinderHeight) {
                // Square QR Box, with size = 80% of the min edge.
                var minEdgeSizeThreshold = 250;
                var edgeSizePercentage = 0.75;
                var minEdgeSize = (viewfinderWidth > viewfinderHeight) ?
                    viewfinderHeight : viewfinderWidth;
                var qrboxEdgeSize = Math.floor(minEdgeSize * edgeSizePercentage);
                if (qrboxEdgeSize < minEdgeSizeThreshold) {
                    if (minEdgeSize < minEdgeSizeThreshold) {
                        return {width: minEdgeSize, height: minEdgeSize};
                    } else {
                        return {
                            width: minEdgeSizeThreshold,
                            height: minEdgeSizeThreshold
                        };
                    }
                }
                return {width: 250, height: 250};
            }
            let html5QrcodeScanner = new Html5QrcodeScanner(
                "qr-reader",
                {
                    fps: 10,
                    qrbox: qrboxFunction,
                    // Important notice: this is experimental feature, use it at your
                    // own risk. See documentation in
                    // mebjas@/html5-qrcode/src/experimental-features.ts
                    experimentalFeatures: {
                        useBarCodeDetectorIfSupported: true
                    },
                    rememberLastUsedCamera: true,
                    showTorchButtonIfSupported: true
                });
            html5QrcodeScanner.render(onScanSuccess);
        });


        $(document).on('click', '.frmPhoto', function(){

            var order = $(this).data('order');
            var detail = $(this).data('detail');
            var id = $(this).data('id');

            var fd = new FormData();

            var fileFront = $("#front_"+order+"_"+detail)[0].files[0];
            var fileBack = $("#back_"+order+"_"+detail)[0].files[0];

            fd.append('photo_front',fileFront);
            fd.append('photo_back',fileBack);

            fd.append('_token', '{{ csrf_token() }}' );

            $.ajax({
                url: '{{asset('orders-photo')}}' + '/' + order + '/' + detail,
                type: 'post',
                data: fd,
                contentType: false,
                processData: false,
                success: function(response){
                    sweetAlert("¡Imágenes Cargadas!", response.message, "success");
                    $('#' + id).modal('hide');
                },
            });
        });
        $(document).on('click', '.btnDelete', function(){
            $(this).closest('tr').remove();
        });

        function addProduct(id, idQuantity){

            var quantity = $("#" + idQuantity).val();

            max = parseInt(quantity);
            if(isNaN(max)){
                max = 1;
            }

            for(i = 0; i < max; i++){
                rnd = Math.floor(Math.random() * 1000);
                $.get("{{route('products.add')}}" + "?__cx=" + rnd, {product:id, order: {{$order->id}}}, function(response){
                    if(response.success){


                        addOrder(response.html)
                        // addOrder(response.data.id, response.data.name, response.data.category, response.data.brand);
                        $('#createProduct').modal('hide');
                        sweetAlert("¡Extintor(s) añadido(s)!", response.message, "success");


                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function(position) {
                                const latitude = position.coords.latitude;
                                const longitude = position.coords.longitude;


                                var coordinates = {};
                                coordinates.position = {};

                                coordinates.position.lat = latitude;
                                coordinates.position.lng = longitude;
                                coordinates.draggable = true;

                                let index = markers.length;

                                const marker = generateMarker(coordinates, index == 0 ? 0 : index+1, response.detail);
                                marker.addTo(map).bindPopup(`Detalle ${response.detail} <b>${coordinates.position.lat},  ${coordinates.position.lng}</b>`);
                                map.panTo(coordinates.position);
                                markers.push(marker);
                            });
                        }
                    }
                }, 'json');
            }


        }
        localStorage.removeItem("HTML5_QRCODE_DATA");
        localStorage.clear();
        $(function(){
            localStorage.removeItem("HTML5_QRCODE_DATA");
            localStorage.clear();
            $("#frmCreateProduct").submit(function(e){
                e.preventDefault();
                var form = $(this);
                var url = form.attr('action');
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function(n, i){
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function(response){
                    if(response.success){
                        addOrder(response.html)
                        // addOrder(response.data.id, response.data.name, response.data.category, response.data.brand);
                        $('#createProduct').modal('hide');
                      sweetAlert("¡Extintor añadido!", response.message, "success");
                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(function(position) {
                                const latitude = position.coords.latitude;
                                const longitude = position.coords.longitude;


                                var coordinates = {};
                                coordinates.position = {};

                                coordinates.position.lat = latitude;
                                coordinates.position.lng = longitude;
                                coordinates.draggable = true;

                                let index = markers.length;

                                const marker = generateMarker(coordinates, index == 0 ? 0 : index+1, response.detail);
                                marker.addTo(map).bindPopup(`Detalle ${response.detail} <b>${coordinates.position.lat},  ${coordinates.position.lng}</b>`);
                                map.panTo(coordinates.position);
                                markers.push(marker);
                            });
                        }
                    }
                }, 'json');
            });

            $(".btnSearchProduct").click(function(){
                var form = $("#frmSearchProduct");
                var url = '{{route('products.search')}}';
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function(n, i){
                    indexed_array[n['name']] = n['value'];
                });

                indexed_array['__cx'] = Math.floor(Math.random() * 1000);
                $.get(url, indexed_array, function(response){

                        $("#tblSearchProduct tbody").html(response);

                });
            });

            var client = $("#customer_id").val();

            if(client){
                $("#showSucursal").show();
                $("#showSucursalEdit").show();
                var url = '{{route('branchs.load')}}';
                var data = {selected: "{{$order->branch_office_id}}"};
                $.get(url + "/" + client, data, function(response){
                    $("#branch_office_id").html(response);
                });

            }else{
                $("#showSucursal").hide();
                $("#showSucursalEdit").hide();
            }

            $("#showSucursalEdit").click(function(){
                var branch = $("#branch_office_id").val();

                if(branch == ""){
                    sweetAlert("¡Sucursal no seleccionada!", "Por favor seleccione una sucursal", "error");
                    return;
                }

                var url = "{{url('/load-branch')}}" + "/" + branch;

                $.get(url, function(response){
                     $("#name_edit").val(response.name);
                    $("#contact_name_edit").val(response.contact_name);
                    $("#contact_phone_edit").val(response.contact_phone);
                    $("#mobile_phone_edit").val(response.mobile_phone);
                    $("#contact_email_edit").val(response.contact_email);
                     $("#editBranchOffice").modal('show');
                });


            });


            $("#customer_id").change(function(){
                var customer = $(this).val();

                if(customer == ""){
                    $("#showSucursal").hide();
                    $("#showSucursalEdit").hide();
                    $("#branch_office_id").html("");
                    return;
                }


                var url = '{{route('branchs.load')}}';
                var data = {};
                $.get(url + "/" + customer, data, function(response){
                    $("#branch_office_id").html(response);
                    $("#showSucursal").show();
                    $("#showSucursalEdit").show();
                });
            });

            $("#frmEditBranch").submit(function (e){
                e.preventDefault();
                var branch = $("#branch_office_id").val();
                var form = $(this);
                var url = "{{ route('customers.index') }}" + "/" + $("#customer_id").val() + "/branch-offices/" +  branch;
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function(n, i){
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function(response){
                    if(response.success){
                        var client = $("#customer_id").val();

                        if(client){
                            var url = '{{route('branchs.load')}}';
                            var data = {selected: "{{$order->branch_office_id}}"};
                            $.get(url + "/" + client, data, function(response){
                                $("#branch_office_id").html(response);
                            });
                        }

                        sweetAlert("¡Sucursal actualizada!", response.message, "success");
                    }
                }, 'json');
            });

            $("#frmCreateBranch").submit(function(e){
                e.preventDefault();
                $("#hidden_customer_id").val($("#customer_id").val());

                var form = $(this);
                var url = "{{ route('customers.index') }}" + "/" + $("#customer_id").val() + "/branch-offices";
                var data = form.serialize();
                var dataArray = form.serializeArray();

                var indexed_array = {};

                $.map(dataArray, function(n, i){
                    indexed_array[n['name']] = n['value'];
                });

                rnd = Math.floor(Math.random() * 1000);

                $.post(url + "?__cx=" + rnd, data, function(response){
                    if(response.success){
                        var client = $("#customer_id").val();

                        if(client){
                            var url = '{{route('branchs.load')}}';
                            var data = {selected: "{{$order->branch_office_id}}"};
                            $.get(url + "/" + client, data, function(response){
                                $("#branch_office_id").html(response);
                            });
                        }

                        sweetAlert("¡Sucursal añadida!", response.message, "success");
                    }
                }, 'json');
            });
        });

        function addOrder(html){
            // html = '<tr>' +
            //     '<td><input type="number" placeholder="Cantidad" min="1" value="1" name=quantity['+id+']></td>' +
            //     '<td>'+cateogry+'</td>' +
            //     '<td>'+name+'</td><td>'+brand+'</td>' +
            //     '<td><input type="number" placeholder="Número ó Serie" name=serie['+id+']></td>' +
            //     '<td></td>' +
            //     '<td></td>' +
            //     '<td><input type="price" placeholder="Precio" min="1" value="1" name=price['+id+']></td>' +
            //     '<td>' +
            //     '<a href="javascript:void(0);" class="text-danger">Eliminar</a>' +
            //     '</td></tr>';

            $("#tblOrder").append(html);
        }


        /* ----------------------------- Initialize Map ----------------------------- */
        function initMap() {

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    var coordinates = {};
                    coordinates.position = {};
                    const latitude = position.coords.latitude;
                    const longitude = position.coords.longitude;


                    map = L.map('map', {
                        center: {
                            lat: latitude,
                            lng: longitude,
                        },
                        zoom: 15
                    });

                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                        attribution: '© OpenStreetMap'
                    }).addTo(map);

                    map.on('click', mapClicked);
                    initMarkers(latitude, longitude);

                });
            }


        }

        initMap();

        /* --------------------------- Initialize Markers --------------------------- */
        function initMarkers(lat, long) {
            //return;
            var coordinates = {};
            let index;
            @foreach($order->orderDetails as $detail)
                coordinates = {};
                coordinates.position = {};

                coordinates.position.lat = @if($detail->coordinates) {{$detail->coordinates['lat']}}; @else lat; @endif
                coordinates.position.lng = @if($detail->coordinates) {{$detail->coordinates['lng']}}; @else long; @endif;
                coordinates.draggable = true;

                index = markers.length;

                marker = generateMarker(coordinates, index == 0 ? 0 : index+1, {{$detail->id}});
                marker.addTo(map).bindPopup(`Detalle {{$detail->id}} <b>${coordinates.position.lat},  ${coordinates.position.lng}</b>`);
                map.panTo(coordinates.position);
                markers.push(marker)
            @endforeach

        }

        function generateMarker(data, index, detail) {

            details[index] = "coordinates_" + detail;

            $("#coordinates_" + detail).val(JSON.stringify(data.position));

            return L.marker(data.position, {
                draggable: data.draggable
            })
                .on('click', (event) => markerClicked(event, index))
                .on('dragend', (event) => markerDragEnd(event, index));
        }

        /* ------------------------- Handle Map Click Event ------------------------- */
        function mapClicked($event) {
            console.log(map);
            console.log($event.latlng.lat, $event.latlng.lng);
        }

        /* ------------------------ Handle Marker Click Event ----------------------- */
        function markerClicked($event, index) {
            console.log(map);
            console.log($event.latlng.lat, $event.latlng.lng);
        }

        /* ----------------------- Handle Marker DragEnd Event ---------------------- */
        function markerDragEnd($event, index) {
            console.log(map);
            console.log($event.target.getLatLng());

            var data = {};
            data.position = {};
            data.position.lat = $event.target.getLatLng().lat;
            data.position.lng = $event.target.getLatLng().lng;



            $("coordinates_" + details[index]).val(JSON.stringify(data.position));

            // map.removeLayer(markers[index])
            // markers.splice(index, 1)
            //
            // var coordinates = {};

            // data.draggable = true;
            //
            // const marker = generateMarker(data, index);
            // marker.addTo(map).bindPopup(`<b>${$event.target.getLatLng().lat},  ${$event.target.getLatLng().lng}</b>`);
            // markers.push(marker);
            //
            // coordinates.latitude = $event.target.getLatLng().lat;
            // coordinates.longitude = $event.target.getLatLng().lng;
            //
            // document.getElementById("coordinates").value = JSON.stringify(coordinates);
        }
    </script>

@endsection