@extends('layouts.admin')

@section('estilos')
<link href="{{ asset('assets/css/bootstrap-datepicker3.min.css') }}" rel="stylesheet">
@endsection
@section('contenido')

@include('admin.vencimientos.modals')
<section>
  <div class="row">
    <div class="col-md-9-center col-xs-6-center">
      <div class="box-body">
        <div class="row">
          <div class="col-xs-12">
            <label>Buscar clientes con servicios cuyo vencimiento sea:</label>
          </div>
          <div class="col-md-3">
            <div class="form-group">
              <label>Desde:</label>
              <input type="text" class="form-control datepicker" id="ini" value="{{$first}}" onchange="busqueda()" readonly>
            </div>
            <div class="form-group">
              <label>Hasta:</label>
              <input type="text" class="form-control datepicker" id="fin" value="{{$mes}}" onchange="busqueda()" readonly>
            </div>
            <div class="form-group">
              <label>Cliente</label>
              <select class="form-control" id="cli" onchange="busqueda()">
                <option value="">Todos</option>
                @foreach ($clientes as $c)
                <option value="{{$c->pros_id}}">{{$c->pros_nombre}}</option>
                @endforeach
              </select>
            </div>
          </div>
          <div class="col-md-9">
            <div class="row text-center">
              <div class="col-md-4">
                <div class="alert alert-danger">
                  <h3>No Pagado</h3>
                  <h4>
                    Subtotal:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="NPtotal" style="font-size:25px">0</span>
                  </h4>
                  <h4>
                    IVA:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="NPIVA" style="font-size:25px">0</span>
                  </h4><hr>
                  <h3>&nbsp;$&nbsp;<span id="NPtotiva">0</span></h3>
                </div>
              </div>
              <div class="col-md-4">
                <div class="alert alert-success">
                  <h3>Pagado</h3>
                  <h4>
                    Subtotal:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="Ptotal" style="font-size:25px">0</span>
                  </h4>
                  <h4>
                    IVA:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="PIVA" style="font-size:25px">0</span>
                  </h4><hr>
                  <h3>&nbsp;$&nbsp;<span id="Ptotiva">0</span></h3>
                </div>
              </div>
              <div class="col-md-4">
                <div class="alert alert-info">
                  <h3>Total</h3>
                  <h4>
                    Subtotal:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="total" style="font-size:25px">0</span>
                  </h4>
                  <h4>
                    IVA:
                    <span style="font-size:20px">&nbsp;$&nbsp;</span>
                    <span id="IVA" style="font-size:25px">0</span>
                  </h4><hr>
                  <h3>&nbsp;$&nbsp;<span id="totiva">0</span></h3>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="scrollx">
        <table class="table table-bordered table-striped" id="tabvenc">
          <thead>
            <th>Cliente</th>
            <th>Fecha de vencimiento</th>
            <th>Subtotal</th>
            <th>IVA</th>
            <th>Total</th>
            <th></th>
          </thead>
        </table>
      </div>
    </div>
    <input type="hidden" id="rol" value="{{Session::get('rol')}}"><input type="hidden" id="empp" name="rol" value="{{Session::get('Empleados')}}">
  </div>
</section>
@endsection

@section('script')
<script src="{{ asset('assets/plugins/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap-datepicker.es.min.js') }}"></script>
<script src="{{asset('js/vencimientos.js')}}"></script>
@endsection