@extends('modules.head') @section('contenido')
<div class="box-header">

  <a class="btn btn-app btnReportProducts" data-toggle="modal" data-target="#modal_import_prices">
    <i class="fa fa-cloud-upload"></i> {{ Lang::get('messagesClient.event_prices.import_price')}}
  </a>
  <a class="auxiliar-black" href="{{ route('event_prices.create', ['event_id' => $event_id]) }}">
    <button class="btn btnAdd pull-right">
      <i style="margin-right:5px;" class="fa fa-plus"></i>{{ __('messages.event_prices.title_12') }}
    </button></a>
</div>

<!-- List event_prices-->
<div class="box">
  <div class="box-header with-border">
    <h3 class="box-title">{{ __('messages.event_prices.title_13') }}</h3>
  </div>

  <!-- /.box-header -->
  <div class="box-body table-responsive ">
    <table id="example2" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
      <thead>
        <tr role="row">
          <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">
            {{ __('messages.event_prices.title_3') }}
          </th>
          <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">
            {{ __('messages.event_prices.title_4') }}
          </th>
          <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">
            {{ __('messages.event_prices.title_5') }}
          </th>
          <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Browser: activate to sort column ascending">
            {{ __('messages.event_prices.title_6') }}
          </th>
          <th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1" aria-label="Engine version: activate to sort column ascending">
            {{ __('messages.event_prices.title_15') }}
          </th>
        </tr>
      </thead>
    </table>
  </div>
  <!-- /.box-body -->
  <div class="modal fade" id="modal_import_prices">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">{{ Lang::get('messagesClient.event_prices.import_price') }}</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <a class="btn btn-app btnReportProducts" href="/event_prices/get_template/{{ $event_id }}">
              <i class="fa fa-cloud-download"></i> {{ Lang::get('messages.event_prices.download_template') }}
            </a>
          </div>
          <div class="row">
            <div class="col-xs-12">
              <div class="form-group">
                <label for="importPrices">{{ Lang::get('messages.screen_products_tag44') }} </label>
                <input type="file" name="importPrices" id="importPrices" required>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">{{ Lang::get('messages.screen_products_tag38') }}</button>
            <button type="button" id="button-import-product" onclick="importTemplateTribunePrices({{ $event_id }})" class="btn btn-primary">{{ Lang::get('messages.screen_products_tag41') }}</button>
            <button type="button" class="btn btn-primary displayNone" id="spinnerButtonProduct">
              <i class="fa fa-spinner fa-spin">{{ Lang::get('messages.importing') }}</i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/event_prices.js') . '?v=' . time() }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>

<script type="text/javascript">
  $(document).ready(function() {
    _table = $('#example2').DataTable({
      responsive: true,
      processing: true,
      serverSide: true,
      order: [],
      language: {
        url: window.DATATABLES_LANGUAGE_URL,
      },
      ajax: '{{ route("event_prices.table" , ["event_id" => $event_id]) }}',
      columns: [{
          data: 'match_event.name',
          name: 'match_event_id'
        },
        {
          data: "zone.name",
          render: function(data, type, row) {
            return row.zone.zone.name + ' - ' + row.zone.name;
          }
        },
        {
          data: 'price',
          name: 'price'
        },
        {
          data: 'price_suscription',
          name: 'price_suscription'
        },
        {
          data: 'actions',
          name: 'actions'
        }
      ]
    });

    // Paginacion
    $('#example2').on('page.dt', function() {
      window.actualPage = $('#example2').DataTable().page();
      localStorage.setItem("setPaginaActual", $('#example2').DataTable().page());
    });

    $('#example2').on('init.dt', function() {
      if (localStorage.getItem("setPaginaActual")) {
        let paginationCurrent = Number(localStorage.getItem("setPaginaActual", $('#example2').DataTable().page()));
        if (parseInt(localStorage.getItem("setPaginaActual")) != paginationCurrent)
          $('#example2').DataTable().page(paginationCurrent).draw('page');
      }
    });

    var info = '<i class="fa  fa-info-circle"  id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Nombre, Orden y Link</p></div>';
    $('#example2_filter').append(info);
    $('#btn-info-busqueda').on('click', function() {
      $('#menuBusqueda').toggle();
    });
  });

  // Paginacion inicial
  var URLactual = window.location.href;
  document.addEventListener('click', function(e) {
    if (e.target.closest('a')) {
      var href = e.target.closest('a').href || '';
      href = href.split('#')[0];
      if (URLactual != href) {
        localStorage.setItem("setPaginaActual", 0);
      }
    }
  }, false);
</script>
@endsection