@extends('adminlte::page')

@section('title', __('New transaction'))

@section('content_header')

  <div class="row">
    <div class="col-auto">
      <h1 class="m-0 text-dark">{{ __('New transaction') }}</h1>
    </div>
    {{-- <div class="col-auto ml-auto">
      <a class="btn btn-secondary" href="{{ route('transactions.index') }}" role="button" data-toggle="tooltip"
        data-placement="top" title="Regresar"><i class="fas fa-chevron-left fa-fw"></i> Regresar</a>
    </div> --}}
  </div>
@stop

@section('content')
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          {!! Form::open(['method' => 'POST', 'route' => ['transactions.store', $resort], 'class' => 'form-horizontal']) !!}

          @include('admin.transactions.includes.form')

          @include('share.buttons.submit_cancel', [
              'routeName' => 'transactions.index',
              'params' => $resort,
          ])

          {!! Form::close() !!}
        </div>
      </div>
    </div>
  </div>
@stop

@section('plugins.duallistbox', true)



@section('adminlte_js')

  <script>
    $('#new_range').click(function() {
      $(".input_date_ranges").append(`
            <div class="input-group mb-2"><input type="text" class="form-control" name="date_ranges[]">
            <div class="input-group-append">
                <button class="btn btn-outline-danger btn-remove" type="button" id="button-addon2">
                <i class="fa fa-times fa-fw"></i></button>
            </div>
            </div>`);

      datarangepicker();

    });

    function datarangepicker() {

      $('input[name="date_ranges[]"]').daterangepicker({
        "showISOWeekNumbers": true,
        "autoApply": true,
        "locale": {
          "format": "YYYYMMDD",
        },
      }, function(start, end, label) {
        console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format(
            'YYYY-MM-DD') +
          ' (predefined range: ' + label + ')');
      });

    }

    $(document).on('click', '.btn-remove', function() {
      this.closest(".input-group").remove();
    });


    datarangepicker();
  </script>
@endsection


@section('plugins.DateRangePicker', true)