@extends('layouts.theme_selector')

@section('content')
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-10">
        <div class="card {{session('theme_card')}}">

          <div class="card-header">
            <a href="{{ url()->previous() }}" class="text-decoration-none text-primary mr-2">
              <i class="bi bi-caret-left"></i>
            </a>
            Comisiones
          </div>

          <div class="card-body {{session('theme_bg_black')}}">

            <form class="form" action="{{ route('ComisionesPorMes') }}" enctype="multipart/form-data" method="post">
              @csrf
              <div class="row justify-content-around m-2">
                <div class="input-group col col-md-6">
                  <label class="input-group-text" for="desde">Desde:</label>
                  <input class="form-control {{session('theme_bg_black')}}" type="date" name="desde" value="{{old('desde') ?? '' }}">
                </div>
              </div>
              <div class="row justify-content-around m-2">
                <div class="input-group col col-md-6">
                  <label class="input-group-text" for="hasta">Hasta:</label>
                  <input class="form-control {{session('theme_bg_black')}}" type="date" name="hasta" value="{{old('hasta') ?? '' }}">
                </div>
              </div>
              <div class="row justify-content-around m-2">
                <div class="col text-center">
                  <br>
                  <input class="btn btn-outline-danger" type="submit" value="Descargar">
                </div>
              </div>
            </form>

            <br>
            @include('layouts.alerts.error')
            @include('layouts.alerts.success')
            <br>

          </div>

        </div>
      </div>
    </div>
  </div>
@endsection

@push('scripts')
  <script type="text/javascript">
  $(document).ready( function () {
    var table = $('#tablaComisiones').DataTable({
      responsive: true,
      order: [[0, 'desc']],
      language: {
        url: "//cdn.datatables.net/plug-ins/1.11.4/i18n/es_es.json"
      },
      buttons: [ 'excel' ],
      lengthMenu: [ [ 10 ] ],
      dom: '<"row my-3 text-center"<"col"B>> <"row my-2 text-center"<"col mx-auto tableFinder"f>> t <"row mt-3"<"col-md-5 mx-auto"p>> ',
    });
  });
  </script>
@endpush

@include('layouts/datatable')