@extends('template.home.index')
@section('title', trans('caja.caja_title'))

@section('style')
  <link rel="stylesheet" href="{{asset('assets/css/caja.css')}}">
  <!--Bootstrap Datepicker [ OPTIONAL ]-->
  <link href="{{asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.css')}}" rel="stylesheet">
@endsection

@section('content')
  <div class="pos_content">
    <div class="container">
      <div class="row mrg_top_50">
        <div class="col-md-7">
          <h3 class="mrg_bottom_30">{{  trans('caja.apertura_caja') }}	</h3>
          <form id="formAperturaCaja" method="post">
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group row">
                    <label for="colFormLabelLg" class="col-sm-5 col-form-label col-form-label-lg">{{  trans('caja.fecha') }}</label>
                    <div class="col-sm-7">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text">
                            <i class="fa fa-calendar" aria-hidden="true"></i>
                          </span>
                        </div>
                        <input type="text" name="fecha" id="dateOpenCaja" class="form-control form-control-lg" autocomplete="off" disabled>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label for="colFormLabelLg" class="col-sm-5 col-form-label col-form-label-lg">{{  trans('caja.monto_sistema') }}</label>
                    <div class="col-sm-7">
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text fw_bold">{{$boxData['symbol']}}</span>
                        </div>
                        <input type="text" class="form-control form-control-lg" value="{{number_format($boxData['value'], 2, ',', '.')}}" disabled>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row">
                      <label for="colFormLabelLg" class="col-sm-5 col-form-label col-form-label-lg">{{  trans('caja.monto_caja_open') }}	</label>
                      <div class="col-sm-7">
                        <div class="input-group">
                          <div class="input-group-prepend">
                            <span class="input-group-text fw_bold">{{$restaurant->currency->symbol}}</span>
                          </div>
                          <input type="text" name="montoCaja" id="openMontoCaja" onkeyup="checkedOpenCaja(this.id, this.value)" onclick="checkedOpenCaja(this.id, this.value)" class="form-control form-control-lg" placeholder="0">
                        </div>
                      </div>
                    </div>
                </div>
              </div>
              <div class="row mrg_top_30">
                {{-- <div class="col-md-6">
                  <a href="#" class="btn btn-danger btn-lg btn-block">CANCELAR</a>
                </div> --}}
                <div class="col-md-12">
                  <button type="button" class="btn btn-success btn-lg btn-block" onclick="openCaja()">{{  trans('caja.abrir') }}	</button>
                </div>
              </div>
            </div>
          </form>
        </div>
        <div class="col-md-5">
          <div class="d-flex flex-column bd-highlight hght_100">
            <div class="p-2 mb-auto d-flex bd-highlight hght_100">
              <div class="container-fluid hght_100 pdd_0">
                <div class="row hght_100">
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(1)">1</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(2)">2</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(3)">3</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-2 mb-auto d-flex bd-highlight hght_100">
              <div class="container-fluid hght_100 pdd_0">
                <div class="row hght_100">
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(4)">4</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(5)">5</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(6)">6</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-2 mb-auto d-flex bd-highlight hght_100">
              <div class="container-fluid hght_100 pdd_0">
                <div class="row hght_100">
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(7)">7</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(8)">8</a>
                  </div>
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(9)">9</a>
                  </div>
                </div>
              </div>
            </div>
            <div class="p-2 mb-auto d-flex bd-highlight hght_100">
              <div class="container-fluid hght_100 pdd_0">
                <div class="row hght_100">
                  <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja" onclick="clickOpenCaja(0)">0</a>
                  </div>
                  <div class="col-md-8">
                    <a href="javascript:;" class="btn btn-info btn_number_caja">
                      <i class="fa fa-arrow-left" aria-hidden="true" onclick="clearOpenCaja()"></i>
                    </a>
                  </div>
                  {{-- <div class="col-md-4">
                    <a href="javascript:;" class="btn btn-info btn_number_caja">Enter</a>
                  </div> --}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection

@section('js')
  <script src="{{asset('assets/js/caja.js')}}"></script>
  <!--Bootstrap Datepicker [ OPTIONAL ]-->
  <script src="{{asset('assets/plugins/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
  <script src="{{asset('assets/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.es.min.js')}}"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      //Datepicker
      $('#dateOpenCaja').datepicker({
        format: "dd/mm/yyyy",
        autoclose:true,
        todayHighlight: true,
        language: "es"
      });
    });
  </script>
@endsection