@extends('template.home.index')
@section('title', trans('pventa.pventas_title'))

@section('style')
  <link rel="stylesheet" href="{{asset('assets/css/pv.css')}}">
  <style>
    .pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}
.pac-container {
    background-color: #fff;
    position: absolute!important;
    z-index: 500000;
    border-radius: 2px;
    border-top: 1px solid #d9d9d9;
    font-family: Arial,sans-serif;
    box-shadow: 0 2px 6px rgb(0 0 0 / 30%);
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

  </style>
@endsection

@section('content')
    <div class="pos_content hght_100">
      <div class="container-fluid hght_100">
        <div class="row hght_100">
          <div class="col-md-7 hght_100">
            <div class="content_view_pos hght_100">
              <div class="d-flex flex-column bd-highlight hght_100">
                <div class="bd-highlight">
                  <ul class="nav nav-pills nav-justified nav-servicios-pv" id="pills-tab" role="tablist">
                    @sidebar('ordenar.listOfOrders')
                    <li class="nav-item mrg_right_10">
                      <a class="nav-link nav_item_ordenar itemService" href="javascript:;" id="id_open_item_ordenar_pv" onclick="openViewOpenPv('ordenar', '{{  trans('pventa.ordenar') }}')">
                        <div class="row">
                          <div class="col-md-12">
                            <svg viewBox="0 0 42.52 28.35">
                              <path d="M39.86,0A2.67,2.67,0,0,0,37.2,2.66V14.17H31a2.66,2.66,0,0,0,0,5.32h4.43v7.09H32.78a.89.89,0,1,0,0,1.77h7.08a.89.89,0,1,0,0-1.77H37.2V19.49h2.66a2.66,2.66,0,0,0,2.66-2.66V2.66A2.66,2.66,0,0,0,39.86,0m.89,16.83a.89.89,0,0,1-.89.89H31A.89.89,0,0,1,31,16h7.09a.89.89,0,0,0,.89-.89V2.66a.89.89,0,1,1,1.77,0Z"/>
                              <path d="M11.52,14.17H5.32V2.66A2.66,2.66,0,0,0,0,2.66V16.83a2.66,2.66,0,0,0,2.66,2.66H5.32v7.09H2.66a.89.89,0,1,0,0,1.77H9.74a.89.89,0,1,0,0-1.77H7.09V19.49h4.43a2.66,2.66,0,0,0,0-5.32m0,3.55H2.66a.89.89,0,0,1-.89-.89V2.66a.89.89,0,1,1,1.77,0v12.4a.89.89,0,0,0,.89.89h7.09a.89.89,0,0,1,0,1.77"/>
                              <path d="M23.67,13.16a5.66,5.66,0,0,0,3.34,1,5.72,5.72,0,0,0,3.35-1,3.87,3.87,0,0,1,2.42-.76.87.87,0,0,0,.88-.88V8.86a3.54,3.54,0,0,0-3.54-3.54H12.4A3.54,3.54,0,0,0,8.86,8.86v2.66a.87.87,0,0,0,.88.88,3.84,3.84,0,0,1,2.41.76,5.72,5.72,0,0,0,3.35,1,5.71,5.71,0,0,0,3.34-1,4.25,4.25,0,0,1,1.53-.67V26.58H16.83a.89.89,0,1,0,0,1.77h8.86a.89.89,0,0,0,0-1.77H22.15V12.49a4.35,4.35,0,0,1,1.52.67m-2.42-2.53a5.59,5.59,0,0,0-3.34,1,4,4,0,0,1-2.41.75,4,4,0,0,1-2.42-.75,5.65,5.65,0,0,0-2.45-1V8.86A1.77,1.77,0,0,1,12.4,7.09H30.12a1.77,1.77,0,0,1,1.77,1.77v1.83a5.57,5.57,0,0,0-2.46,1,4.28,4.28,0,0,1-4.84,0,5.59,5.59,0,0,0-3.34-1"/>
                            </svg>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <b>{{  trans('pventa.ordenar') }}</b>
                          </div>
                        </div>
                      </a>
                    </li>
                    @endsidebar
                    @sidebar('parallevar.listOfOrders')
                    <li class="nav-item mrg_right_10">
                      <a class="nav-link nav_item_parallevar itemService" href="javascript:;" id="id_open_item_parallevar_pv" onclick="openViewOpenPv('parallevar', '{{  trans('pventa.parallevar') }}')">
                        <div class="row">
                          <div class="col-md-12">
                            <svg viewBox="0 0 26.01 30.85">
                              <path class="parallevar-1" d="M18.55.79a2.66,2.66,0,1,1-2.21,3.06A2.66,2.66,0,0,1,18.55.79Z"/>
                              <path class="parallevar-1" d="M24.7,18.72a1.15,1.15,0,0,1-1.56-.36l-2.36-3.77-.55,3A3,3,0,0,0,20.42,19l4.14,9a1.46,1.46,0,0,1,.09,1.55,1.16,1.16,0,0,1-1,.54,1.49,1.49,0,0,1-1.27-1l-5.13-8.63-1.39,2.82a10.28,10.28,0,0,1-1.47,2.14l-2.8,3a1.55,1.55,0,0,1-1.19.69,1.18,1.18,0,0,1-1-.65c-.33-.69.07-1.18.42-1.62l2.77-3.42a5.71,5.71,0,0,0,.81-1.57l1-3.58a12.68,12.68,0,0,0,.37-2l.45-5.5c-2.23.74-4.42,3.66-5.17,4.88-.31.52-.58,1-1.24,1a1.18,1.18,0,0,1-1-.57c-.34-.58-.09-1,.21-1.57.16-.31,4.29-7.59,9.86-7.15,2.41.21,3.17,2,3.69,3.21a8.2,8.2,0,0,0,.36.79l3.18,5.75A1.18,1.18,0,0,1,24.7,18.72Z"/>
                              <path class="parallevar-2" d="M9.42,27.39l1.09-7.2a.14.14,0,0,0-.1-.16l-1.09-.38.29-.83a.16.16,0,0,0-.1-.2.16.16,0,0,0-.19.1L9,19.56l-.32-.12.64-1.86.32.11L9.55,18a.16.16,0,0,0,.1.19.15.15,0,0,0,.19-.1l.17-.49a.14.14,0,0,0,0-.11l-.4-.83s-.06.21-.1.2L7,16.05a.17.17,0,0,0-.12,0l-.81.13a.14.14,0,0,0-.08.09l-.69,2-1.09-.37a.14.14,0,0,0-.18.07L.52,24.34a.15.15,0,0,0,.08.22l8.62,3A.15.15,0,0,0,9.42,27.39ZM7,16.09l2.34.8.22.44-3-1Zm2.05,1.39-.64,1.86L6.24,18.6l.64-1.87Zm-2.79-1,.32.11L6,18.5l-.33-.11ZM.87,24.33l3.4-6.08,5.92,2-1,6.89Z"/>
                            </svg>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <b>{{  trans('pventa.parallevar') }}</b>
                          </div>
                        </div>
                      </a>
                    </li>
                    @endsidebar
                    @sidebar('app.listOfOrders')
                    <li class="nav-item mrg_right_10">
                      <a class="nav-link nav_item_app itemService" href="javascript:;" id="id_open_item_app_pv" onclick="openViewOpenPv('app', '{{  trans('pventa.app') }}')">
                        <div class="row">
                          <div class="col-md-12">
                            <svg viewBox="0 0 17.14 30.25">
                              <path d="M14.92,0H2.22A2.23,2.23,0,0,0,0,2.22V28a2.22,2.22,0,0,0,2.22,2.22h12.7A2.21,2.21,0,0,0,17.14,28V2.22A2.22,2.22,0,0,0,14.92,0M1,4H16.14V23.2H1ZM2.22,1h12.7a1.22,1.22,0,0,1,1.22,1.21V3H1V2.22A1.21,1.21,0,0,1,2.22,1m12.7,28.23H2.22A1.21,1.21,0,0,1,1,28V24.2H16.14V28a1.22,1.22,0,0,1-1.22,1.21"/>
                              <path d="M8.57,24.71a2,2,0,1,0,2,2,2,2,0,0,0-2-2m0,3a1,1,0,1,1,1-1,1,1,0,0,1-1,1"/>
                              <path d="M6.56,2.52h2a.51.51,0,1,0,0-1h-2a.51.51,0,1,0,0,1"/>
                            </svg>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <b>{{  trans('pventa.app') }}</b>
                          </div>
                        </div>
                      </a>
                    </li>
                    @endsidebar
                    @sidebar('domicilios.listOfOrders')
                    <li class="nav-item mrg_right_10">
                      <a class="nav-link nav_item_domicilios itemService" href="javascript:;" id="id_open_item_domicilios_pv" onclick="openViewOpenPv('domicilios', '{{  trans('pventa.domicilios') }}')">
                        <div class="row">
                          <div class="col-md-12">
                            <svg viewBox="0 0 43.91 30.26">
                              <path d="M38.65,19.73A5.27,5.27,0,0,0,37,20l-.72-1.45a6.71,6.71,0,0,1,2.42-.45,6.85,6.85,0,0,1,2.75.58.71.71,0,0,0,.93-.37.72.72,0,0,0-.36-.94,8.28,8.28,0,0,0-6.38-.1L33,12l.39,0h1.51a.71.71,0,0,0,.72-.71v-3a.71.71,0,0,0-.72-.71H33.34a2.22,2.22,0,0,0-2,1.22L30.6,7.3a2.22,2.22,0,0,0-2-1.23H27.27a.71.71,0,0,0,0,1.42H28.6a.81.81,0,0,1,.73.45l1.84,3.68-.35.18a2.21,2.21,0,0,0-1.23,2v7.45H23.47a2.32,2.32,0,0,1-2.32-2.32V15.84h.05a2.23,2.23,0,1,0,0-4.46H15.13a2.22,2.22,0,0,0-1.57.65V1.47A1.47,1.47,0,0,0,12.09,0H1.47A1.47,1.47,0,0,0,0,1.47V12.09a1.47,1.47,0,0,0,1.47,1.47h1.6A1.38,1.38,0,0,0,3,14a1.86,1.86,0,0,0,1.85,1.83H8.7a9.53,9.53,0,0,0-1.24.94A8.84,8.84,0,0,0,4.78,21a2,2,0,0,0,1.91,2.43h.38A5.26,5.26,0,1,0,17.31,25.7H31.06a.71.71,0,0,0,.71-.71,7.1,7.1,0,0,1,.14-1.38A6.81,6.81,0,0,1,35,19.2l.72,1.45a5.26,5.26,0,1,0,3-.92M15.13,12.8H21.2a.81.81,0,0,1,0,1.62H15.13a.81.81,0,0,1,0-1.62M1.42,1.47a0,0,0,0,1,.05-.05H12.09a0,0,0,0,1,.05.05V3H1.42Zm.05,10.67a0,0,0,0,1-.05-.05V4.46H12.14v7.63a0,0,0,0,1-.05.05Zm3.4,2.28A.44.44,0,0,1,4.44,14a.4.4,0,0,1,.13-.31.41.41,0,0,1,.2-.12H12.9v0a2.2,2.2,0,0,0,.15.81ZM6.69,22h0a.54.54,0,0,1-.42-.2.55.55,0,0,1-.1-.48,7.83,7.83,0,0,1,7.44-5.48c3.25,0,4.47,3.11,4.47,5.07A1,1,0,0,1,17.22,22Zm6.21,3a.81.81,0,1,1-.81-.81.81.81,0,0,1,.81.81m-.81,3.84a3.83,3.83,0,0,1-3.5-5.41h1.93A2.19,2.19,0,0,0,9.86,25a2.23,2.23,0,0,0,4.46,0,2.2,2.2,0,0,0-.66-1.58h1.93a3.84,3.84,0,0,1-3.5,5.42m18.43-5.5a7.5,7.5,0,0,0-.14,1H17.31a5.34,5.34,0,0,0-.2-.88h.12a2.34,2.34,0,0,0,2.27-2.49,7.18,7.18,0,0,0-1.41-4.28,5.62,5.62,0,0,0-.71-.79h2.35v3.08a3.75,3.75,0,0,0,3.74,3.75H30.3a.75.75,0,0,0,.42-.14,7.19,7.19,0,0,0-.2.8M33.34,9h.8v1.61h-.8a.81.81,0,1,1,0-1.61M31,21.74V13.79a.8.8,0,0,1,.45-.72l.34-.17,2.52,5A8.33,8.33,0,0,0,31,21.74m7.64,7.09A3.84,3.84,0,1,1,42.49,25a3.84,3.84,0,0,1-3.84,3.84"/>
                              <path d="M38.56,23a2.23,2.23,0,1,0,2.23,2.23A2.23,2.23,0,0,0,38.56,23m0,3a.81.81,0,1,1,.8-.81.81.81,0,0,1-.8.81"/>
                            </svg>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <b>{{  trans('pventa.domicilios') }}</b>
                          </div>
                        </div>
                      </a>
                    </li>
                    @endsidebar
                    @sidebar('reservas.listOfOrders')
                    <li class="nav-item mrg_right_10">
                      <a class="nav-link nav_item_reservas itemService" href="javascript:;" id="id_open_item_reservas_pv" onclick="openViewOpenPv('reservas', '{{  trans('pventa.reservas') }}')">
                        <div class="row">
                          <div class="col-md-12">
                            <svg viewBox="0 0 28.67 28.67">
                              <path d="M26.28,3.82H25.8V1.43A1.43,1.43,0,0,0,24.37,0h-1A1.43,1.43,0,0,0,22,1.43V3.82H6.69V1.43A1.43,1.43,0,0,0,5.26,0h-1A1.43,1.43,0,0,0,2.87,1.43V3.82H2.39A2.39,2.39,0,0,0,0,6.21V26.28a2.39,2.39,0,0,0,2.39,2.39H26.28a2.39,2.39,0,0,0,2.39-2.39V6.21a2.39,2.39,0,0,0-2.39-2.39m-3.35.48V1.43A.48.48,0,0,1,23.41,1h1a.47.47,0,0,1,.47.47V6.21a.47.47,0,0,1-.47.48h-1a.48.48,0,0,1-.48-.48ZM3.82,4.3V1.43A.48.48,0,0,1,4.3,1h1a.47.47,0,0,1,.47.47V6.21a.47.47,0,0,1-.47.48h-1a.48.48,0,0,1-.48-.48Zm23.89,22a1.43,1.43,0,0,1-1.43,1.43H2.39A1.43,1.43,0,0,1,1,26.28V12.42H27.71Zm0-14.81H1V6.21A1.43,1.43,0,0,1,2.39,4.78h.48V6.21A1.43,1.43,0,0,0,4.3,7.64h1A1.43,1.43,0,0,0,6.69,6.21V4.78H22V6.21a1.43,1.43,0,0,0,1.43,1.43h1A1.43,1.43,0,0,0,25.8,6.21V4.78h.48a1.43,1.43,0,0,1,1.43,1.43Z"/>
                              <path d="M19.59,6.21H9.08a.47.47,0,0,0-.48.48V9.56a.47.47,0,0,0,.48.47H19.59a.48.48,0,0,0,.48-.47V6.69a.48.48,0,0,0-.48-.48m-.48,2.87H9.55V7.17h9.56Z"/>
                              <path d="M6.21,13.86H3.34a.47.47,0,0,0-.47.47v2.39a.47.47,0,0,0,.47.48H6.21a.48.48,0,0,0,.48-.48V14.33a.48.48,0,0,0-.48-.47m-.48,2.38H3.82V14.81H5.73Z"/>
                              <path d="M12.42,13.86H9.56a.47.47,0,0,0-.48.47v2.39a.47.47,0,0,0,.48.48h2.86a.47.47,0,0,0,.48-.48V14.33a.47.47,0,0,0-.48-.47m-.48,2.38H10V14.81h1.91Z"/>
                              <path d="M19.11,13.86H16.24a.47.47,0,0,0-.47.47v2.39a.47.47,0,0,0,.47.48h2.87a.48.48,0,0,0,.48-.48V14.33a.48.48,0,0,0-.48-.47m-.48,2.38H16.72V14.81h1.91Z"/>
                              <path d="M25.32,13.86H22.46a.47.47,0,0,0-.48.47v2.39a.47.47,0,0,0,.48.48h2.86a.47.47,0,0,0,.48-.48V14.33a.47.47,0,0,0-.48-.47m-.48,2.38H22.93V14.81h1.91Z"/>
                              <path d="M6.21,18.63H3.34a.48.48,0,0,0-.47.48V21.5a.48.48,0,0,0,.47.48H6.21a.49.49,0,0,0,.48-.48V19.11a.49.49,0,0,0-.48-.48M5.73,21H3.82V19.59H5.73Z"/>
                              <path d="M12.42,18.63H9.56a.48.48,0,0,0-.48.48V21.5a.48.48,0,0,0,.48.48h2.86a.48.48,0,0,0,.48-.48V19.11a.48.48,0,0,0-.48-.48M11.94,21H10V19.59h1.91Z"/>
                              <path d="M19.11,18.63H16.24a.48.48,0,0,0-.47.48V21.5a.48.48,0,0,0,.47.48h2.87a.49.49,0,0,0,.48-.48V19.11a.49.49,0,0,0-.48-.48M18.63,21H16.72V19.59h1.91Z"/>
                              <path d="M25.32,18.63H22.46a.48.48,0,0,0-.48.48V21.5a.48.48,0,0,0,.48.48h2.86a.48.48,0,0,0,.48-.48V19.11a.48.48,0,0,0-.48-.48M24.84,21H22.93V19.59h1.91Z"/>
                              <path d="M6.21,23.41H3.34a.47.47,0,0,0-.47.48v2.39a.48.48,0,0,0,.47.48H6.21a.49.49,0,0,0,.48-.48V23.89a.48.48,0,0,0-.48-.48M5.73,25.8H3.82V24.37H5.73Z"/>
                              <path d="M12.42,23.41H9.56a.47.47,0,0,0-.48.48v2.39a.48.48,0,0,0,.48.48h2.86a.48.48,0,0,0,.48-.48V23.89a.47.47,0,0,0-.48-.48m-.48,2.39H10V24.37h1.91Z"/>
                              <path d="M19.22,23.11l-2,2.46L16.1,24.51l-.67.67,1.43,1.44a.48.48,0,0,0,.34.14h0a.48.48,0,0,0,.35-.18L20,23.72Z"/>
                              <path d="M25,23.11,22.9,25.57l-1.06-1.06-.68.67,1.44,1.44a.45.45,0,0,0,.33.14h0a.48.48,0,0,0,.34-.18l2.39-2.86Z"/>
                            </svg>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-md-12">
                            <b>{{  trans('pventa.reservas') }}</b>
                          </div>
                        </div>
                      </a>
                    </li>
                    @endsidebar
                  </ul>
                </div>
                <div class="mt-auto bd-highlight hght_100">
                  <div class="tab-content tab-servicios-pv hght_100">
                    <div class="tab-pane fade show active hght_100" id="id_open_content_service_pv">
                      {{-- @include('system.puntoVenta.ordenar.index') --}}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-5">
            <div class="content_pos hght_100">
              @if ($orderData->service!=null)
                @include('system.puntoVenta.pventas.panel.' . $orderData->service)
              @else
                @include('system.puntoVenta.pventas.panel.default')
              @endif
            </div>
            <script>
              if ({{ isset($serviceData) }}){
                @if (is_object($serviceData))
                  var num = 0
                  var interval = setInterval('contador()',1000);
                  var contador = () => {
                    if(localStorage.getItem("dm_{{ $serviceData->idPedido ?? '' }}") != null) {
                    $('.btn_chat_dom_{{ $serviceData->idPedido }}').addClass('notification');
                    }
                    num += 1;
                    if (num >= 1) {
                      clearInterval(interval)
                    }
                  }
                @endif
              }
            </script>
          </div>
        </div>
      </div>
    </div>

    <form action="{{route('printPedidoPvOrdenar')}}" id="form_pedido_pv_pos" method="post" target="_blank">
      @csrf
    </form>
  <!-- MODAL -->

  <div class="modal fade" id="openPrintPlates" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">{{  trans('pventa.imprimir_platos') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <div id="imprimirItemsComanda" style="color: 000000"></div>

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

  <!-- General -->
  <div class="modal fade" id="openModalTips" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">{{  trans('pventa.propinas') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row" id="tipListContent">

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

  <div class="modal fade" id="openModalPutTips" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
            <div class="col-md-12">
                <div class="row">
                    <h5 class="modal-title" id="exampleModalLongTitle">{{  trans('pventa.propina') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        </div>
        <div class="modal-body">
          <div class="row" id="putTipContent">

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

  <!-- Parallevar -->
  <div class="modal fade" id="idInfoNewOrderParallevar" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title">{{  trans('pventa.nuevo_pedido') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="form_new_order_split_account_parallevar">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.nombre') }} *</label>
                  <div class="input-group mb-3">
                    <input type="text" name="name" class="form-control" placeholder="{{  trans('pventa.nombre') }}" autocomplete="off">
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.documento') }} *</label>
                  <div class="input-group mb-3">
                    <input type="number" name="document" class="form-control" placeholder="{{  trans('pventa.documento') }}" autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.telefono') }} *</label>
                  <div class="input-group mb-3">
                    <input type="number" name="phone" class="form-control" onkeypress="return event.charCode >=48"  placeholder="{{  trans('pventa.telefono') }}" autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <label for="" class="fw_bold">{{  trans('pventa.fecha_entrega') }} *</label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">{{  trans('pventa.hora') }} *</label>
                  <select class="form-control" name="time">
                    <option value="">{{  trans('pventa.hora') }}</option>
                    @for ($i=1; $i <= 12; $i++)
                      <option value="{{$i}}">{{$i}}</option>
                    @endfor
                  </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">{{  trans('pventa.minuto') }} *</label>
                  <select class="form-control" name="minutes">
                    <option value="">{{  trans('pventa.minuto') }}</option>
                    @for ($y=0; $y < 12; $y++)
                      <option value="{{$y*5}}">{{$y*5 < 9 ? '0'.$y*5 : $y*5}}</option>
                    @endfor
                  </select>
                </div>
              </div>
              <div class="col-md-4">
                <div class="form-group">
                  <label for="">{{  trans('pventa.jornada') }} *</label>
                  <select class="form-control" name="workingDay">
                    <option value="">{{  trans('pventa.jornada') }}</option>
                    <option value="AM">{{  trans('pventa.am') }}</option>
                    <option value="PM">{{  trans('pventa.pm') }}</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <label for="" class="fw_bold">{{  trans('pventa.desde') }}</label>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="btn-group btn-group-toggle" data-toggle="buttons">
                  <label class="btn btn_enjoit_light_pv_mesa btn_check_details fw_bold">
                    <input type="radio" name="options" value="1"> <i class="fa fa-desktop" aria-hidden="true"></i>{{  trans('pventa.pos') }}
                  </label>
                  <label class="btn btn_enjoit_light_pv_mesa btn_check_details fw_bold">
                    <input type="radio" name="options" value="3"> <i class="fa fa-phone" aria-hidden="true"></i>{{  trans('pventa.llamada') }}
                  </label>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col">
              <a href="javascript:;" class="btn btn-success btn-block" onclick="new_order_split_account()"><i class="fa fa-plus" aria-hidden="true"></i>{{  trans('pventa.agregar') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Domicilios -->
  <div class="modal fade" id="idNewAddressDomicilios" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title">{{  trans('pventa.agregar_direccion') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="form_validate_add_address">
            <input type="hidden" id="idClientAddAddress" name="id">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.alias') }}</label>
                  <div class="input-group mb-3">
                    <input type="text" name="name" class="form-control" placeholder="{{  trans('pventa.alias') }}" autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.detalle_direccion') }}</label>
                  <div class="input-group mb-3">
                    <input type="text" name="observation" class="form-control" placeholder="{{  trans('pventa.descripcion_detalle') }}" autocomplete="off">
                  </div>
                </div>
              </div>
            </div>
            {{-- <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label class="fw_bold">{{  trans('pventa.direccion') }} *</label>
                  <div class="input-group mb-3">
                    <select class="form-control" name="via">
                      <option value="Calle">{{  trans('pventa.calle') }}</option>
                      <option value="Carrera">{{  trans('pventa.carrera') }}</option>
                      <option value="Avenida">{{  trans('pventa.avenida') }}</option>
                      <option value="Avenida Carrera">{{  trans('pventa.avenida_kr') }}</option>
                      <option value="Avenida Calle">{{  trans('pventa.avenida_calle') }}</option>
                      <option value="Circular">{{  trans('pventa.circular') }}</option>
                      <option value="Circunvalar">{{  trans('pventa.circunvalar') }}</option>
                      <option value="Diagonal">{{  trans('pventa.diagonal') }}</option>
                      <option value="Manzana">{{  trans('pventa.manzana') }}</option>
                      <option value="Transversal">{{  trans('pventa.transversal') }}</option>
                      <option value="Via">{{  trans('pventa.via') }}</option>
                    </select>
                    <input type="text" name="num1" class="form-control" autocomplete="off">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-hashtag"></i>
                      </span>
                    </div>
                    <input type="text" name="num2" class="form-control" autocomplete="off">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="fa fa-minus"></i>
                      </span>
                    </div>
                    <input type="number" name="num3" class="form-control" autocomplete="off">
                  </div>
                </div>
              </div>
            </div> --}}
            <div class="row mb-5">
              <div class="col">
                <div class="form-group">
                  <label for="tipoVia"> {{  trans('pventa.direccion') }} <span class="text-danger">*</span></label>
                  <input class="form-control" type="text" name="AddressGoogleApi" id="AddressGoogleApi" placeholder="Digite la direccion formato Ej:(Calle 51B 84-86)" autocomplete="on" >
                  <input type="hidden" name="latGoogleApi" id="latGoogleApi"  >
                  <input type="hidden" name="lngGoogleApi" id="lngGoogleApi"  >
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <button type="button" id="idButtonValidateAddAddress" class="btn btn-sm btn-success btn-block" onclick="validate_add_address()"><i class="fa fa-check" aria-hidden="true"></i>{{  trans('pventa.validar') }}</button>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="contentMapAddAddress">
                  <div id="idAddAddressMap" class="mapAddAddress"></div>
                  <div id="idPointAddAddressMap" class="mapPointAddAddress">
                    <img src="{{asset('assets/media/icon_map.png')}}" alt="">
                  </div>
                </div>
              </div>
            </div>
            <input type="hidden" id="idAddAddressLat" name="lat">
            <input type="hidden" id="idAddAddressLng" name="lng">
          </form>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col">
              <a href="javascript:;" onclick="add_address_domicilios()" class="btn btn-success btn-block"><i class="fa fa-plus" aria-hidden="true"></i>{{  trans('pventa.agregar_direccion2') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="idMapNewOrderDomicilios" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title">{{  trans('pventa.confirm_ubicacion') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="contentMapNewOrderDomicilios">
                <div id="idNewOrderDomiciliosMap" class="mapNewOrderDomicilios"></div>
                <div id="idPointNewOrderDomiciliosMap" class="mapPointNewOrderDomicilios">
                  <img src="{{asset('assets/media/icon_map.png')}}" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="row">
            <div class="col">
              <a href="javascript:;" onclick="new_order_domicilios()" class="btn btn-success btn-block">{{-- <i class="fa fa-plus" aria-hidden="true"> --}}</i>{{  trans('pventa.confirmar') }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="idAddDomiciliary" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit">
        <div class="modal-header">
          <h5 class="modal-title">{{  trans('pventa.asignar_dom') }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body assignDomiciliary">
          <ul class="nav nav-pills nav-justified mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a class="nav-link active" id="pills-domiciliary-tab" data-toggle="pill" href="#pills-domiciliary" role="tab" aria-controls="pills-domiciliary" aria-selected="true">{{  trans('pventa.domiciliario') }}</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" id="pills-addDomiciliary-tab" data-toggle="pill" href="#pills-addDomiciliary" role="tab" aria-controls="pills-addDomiciliary" aria-selected="false">{{  trans('pventa.asignar') }}</a>
            </li>
          </ul>
          <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="pills-domiciliary" role="tabpanel" aria-labelledby="pills-domiciliary-tab">
              <div class="contentAddDomiciliary">
                <div class="row align-items-center">
                  <div class="col-md-3">
                    <img src="{{asset('assets/media/system/user/user_cliente.jpg')}}" alt="">
                  </div>
                  <div class="col-md-9">
                    <h4 id="idNameDomiciliary"></h4>
                    <span class="badge badge-dark" id="idPhoneDomiciliary"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="tab-pane fade" id="pills-addDomiciliary" role="tabpanel" aria-labelledby="pills-addDomiciliary-tab">
              <div class="contentAddDomiciliary">
                {{-- <div class="row">
                  <div class="col-md-12">
                    <div class="form-group">
                      <div class="input-group">
                        <input type="text" class="form-control" placeholder="Nombre o Documento">
                        <div class="input-group-append">
                          <button class="btn btn-dark" type="button"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div> --}}
                <div class="row align-items-center">
                  <div class="col-md-12">
                    <div class="tableAddDomiciliary scroll">
                      <table class="table">
                        <thead class="thead-light">
                          <tr>
                            <th scope="col">#</th>
                            <th scope="col">{{  trans('pventa.nombre') }}</th>
                            <th scope="col">{{  trans('pventa.opciones') }}</th>
                          </tr>
                        </thead>
                        <tbody id="idTableAssignDomiciliary">
                          {{-- <tr>
                            <th scope="row">1</th>
                            <td>Mark Otto</td>
                            <td></td>
                          </tr> --}}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Cambio de estado -->
  @sidebar('ordenar.cambioEstadoPedido')
    <div class="modal fade" id="openChangeState" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content modalEnjoit">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">{{  trans('pventa.cambio_estado') }}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="row">
              <div class="col-md-12">
                <div class="list-group" id="listState">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  @endsidebar

  <!-- Chat -->
  <div class="modal fade" id="idOpenChat" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit chatEnjoit">
        <div class="modal-header">
          <h5 class="modal-title" id="idNameClientChat"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="contentNumOrderChat text-center">
            <div class="row">
              <div class="col-md-12">
                <h4>{{  trans('pventa.no_pedido') }} <b id="idNumOrderChat"></b></h4>
              </div>
            </div>
          </div>



          <div class="contentChat scroll" id="idContentItemChat">

            {{-- <div class="row justify-content-start">
              <div class="col-md-10 text-left">
                <div class="itemChatLeft">
                  <b>Nombre</b>
                  <p>mensajes aqui</p>
                  <small>10/02/2012 - 08:30 AM</small>
                </div>
              </div>
            </div>
            <div class="row justify-content-end">
              <div class="col-md-10 text-right">
                <div class="itemChatRight">
                  <b>Nombre</b>
                  <p>mensajes aqui</p>
                  <small>10/02/2012 - 08:30 AM</small>
                </div>
              </div>
            </div> --}}
          </div>
        </div>
        <div class="modal-footer">



          <div class="row">
            <div class="col-md-12">
              <div class="input-group">
                <input type="text" class="form-control" id="idMessageChat" placeholder="{{  trans('pventa.mensaje') }}">
                <div class="input-group-append">
                  <button class="btn " onclick="openFile()" type="button"><i class="fa fa-paperclip" aria-hidden="true"></i></button>
                  <input type="file" name="imageSend" id="imageSend"  style="display: none" accept="image/*" onchange="sendImage()">
                </div>
                <div class="input-group-append">
                  <button class="btn btn-dark" onclick="send_firebase_chat()" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                </div>
              </div>
            </div>
          </div>



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

  {{-- Chat Domiciliario --}}
  <div class="modal fade" id="idOpenChatDom" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content modalEnjoit chatEnjoit">
        <div class="modal-header">
          <h5 class="modal-title" id="idNameClientChatDom"></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="contentNumOrderChat text-center">
            <div class="row">
              <div class="col-md-12">
                <h4>{{  trans('pventa.pventas.panel.no_pedido_chat') }} <b id="idNumOrderChatDom"></b></h4>
              </div>
            </div>
          </div>
          <div class="contentChat scroll" id="idContentItemChatDom">

            {{-- <div class="row justify-content-start">
              <div class="col-md-10 text-left">
                <div class="itemChatLeft">
                  <b>Nombre</b>
                  <p>mensajes aqui</p>
                  <small>10/02/2012 - 08:30 AM</small>
                </div>
              </div>
            </div>
            <div class="row justify-content-end">
              <div class="col-md-10 text-right">
                <div class="itemChatRight">
                  <b>Nombre</b>
                  <p>mensajes aqui</p>
                  <small>10/02/2012 - 08:30 AM</small>
                </div>
              </div>
            </div> --}}
          </div>
        </div>
        <div class="modal-footer">



          <div class="row">
            <div class="col-md-12">
              <div class="input-group">
                <input type="text" class="form-control" id="idMessageChatDom" placeholder="{{  trans('pventa.pventas.panel.mensaje') }}">
                <div class="input-group-append">
                  <button class="btn " onclick="openFileDom()" type="button"><i class="fa fa-paperclip" aria-hidden="true"></i></button>
                  <input type="file" name="imageSendDom" id="imageSendDom"  style="display: none" accept="image/*" onchange="sendImage('domicilios')">
                </div>
                <div class="input-group-append">
                  <button class="btn btn-dark" onclick="send_firebase_chatDom()" type="button"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                </div>
              </div>
            </div>
          </div>



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

  <audio id="notifyAudioPventas" loop>
    <source src="{{asset('assets/media/notify/comanda.mp3')}}" type="audio/mp3">
  </audio>
@endsection

@section('js')
  <script type="text/javascript">
  isPventas = true;
    var idOrderGlobalPos = "{{$orderData->idOrder}}";
    var nameServiceGlobalPos = ("{{$orderData->service}}" != null) ? "{{$orderData->service}}" : "";
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places&key={{env('KEY_GOOGLE_API')}}"></script>


  <script src="{{asset('assets/js/ordenar.js')}}"></script>
  <script src="{{asset('assets/js/parallevar.js')}}"></script>
  <script src="{{asset('assets/js/app.js')}}"></script>
  <script src="{{asset('assets/js/domicilios.js')}}"></script>
  <script src="{{asset('assets/js/reservas.js')}}"></script>
  <script>
    $( document ).ready(function() {
      initAutocomplete()
});
  function initAutocomplete() {

  // Create the search box and link it to the UI element.
  const input = document.getElementById("AddressGoogleApi");
  const searchBox = new google.maps.places.SearchBox(input);

  searchBox.addListener("places_changed", () => {
    const places = searchBox.getPlaces();
    console.log(places)
    if (places.length == 0) {
      return;
    }


    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();

  });
}
  </script>
@endsection