@component('components.superadmin.modal', ['title' => 'RIMBORSO', 'id' => 'refundModal'])

@if (isset($refund))
{{ Form::model($refund, ['action' => ['FormController@index', 'create_refund'], 'method' => 'POST'], ['class' => 'dynamic-form']) }}
@else
{{ Form::open(['action' => ['FormController@index', 'create_refund']]) }}
@endif

{{ Form::hidden('dynamic-form', 1) }}
@if (isset($refund))
{{ Form::hidden('id', $refund->id) }}
@endif
<div class="row text-center">
  <div class="form-group col-md-12">
    {{ Form::label('code', 'Cliente*') }}
    {{ Form::text('code', $refund ? $refund->user->code : $user->code, ['class' => 'form-control',"readonly"]) }}
  </div>

  <div class="form-group col-md-12">
    {{ Form::label('order_id', 'Ordine*') }}
    {{ Form::select('order_id', $orders && is_array($orders) ? [$orders['id'] => $orders['name']] : $orders->pluck('name','id'), null, ['class' => 'custom-select custom-select-sm singleSelection', 'placeholder' => 'Seleziona Ordini', 'data-placeholder' => 'Seleziona Ordini', isset($refund) ? 'disabled' : '']) }}
  </div>
  <div class="form-group col-md-12">
    {{ Form::label('date', 'Data ordine*') }}
    {{ Form::text('date',$refund ? $refund->order->created_at : '', ['class' => 'form-control',"readonly"]) }}
  </div>
  <div class="form-group col-md-12">
    {{ Form::label('products[]', 'Elenco Prodoti*') }}
    {{ Form::select('products[]', $refund ? $products->pluck('product_name','id') : [], null, ['class' => 'custom-select custom-select-sm multiSelect','multiple'=>'multiple',isset($refund) ? 'disabled' : '']) }}
  </div>
  <div class="form-group col-md-12 do-products-data text-left">
    @if($products)
    @foreach($products as $product)
    <div>
      <p> <strong> Prodotto: </strong> {{$product->product_name }}</p>
      <p> <strong>Disegno lente: </strong> {{$product->geometry}}</p>
      <p> <strong>Tipo lente: </strong>{{ $product->type }} </p>
      <p> <strong>Tipo trattamento: </strong> {{$product->treatment }}</p>
      <hr>
    </div>
    @endforeach
    @endif
  </div>
  <div class="form-group col-md-12">
    {{ Form::label('complaint_type', 'Tipo reclamo*') }}
    {{ Form::select('complaint_type',  array_combine(\App\Models\Refund::COMPLAINT_TYPES,\App\Models\Refund::COMPLAINT_TYPES), null, ['class' => 'custom-select custom-select-sm singleSelection', 'placeholder' => 'Seleziona Tipo reclamo', 'data-placeholder' => 'Seleziona Tipo reclamo',isset($refund) ? 'disabled' : '']) }}
  </div>
  <div class="form-group col-md-12">
    {{ Form::label('request', 'Richiesta*') }}
    {{ Form::select('request', array_combine(\App\Models\Refund::REQUESTS,\App\Models\Refund::REQUESTS), null, ['class' => 'custom-select custom-select-sm singleSelection', 'placeholder' => 'Seleziona Richiesta', 'data-placeholder' => 'Seleziona Richiesta',isset($refund) ? 'disabled' : '']) }}
  </div>


</div>
<div class="d-flex justify-content-center">
  @if (!isset($refund))
  <button class="ci-btn btn-green" id="editSaldoVal">
    CREA
  </button>
  @endif
</div>
@if (!isset($refund))
<p class="disclaimer text-center">I campi Contrassegnati da (*) sono obbligatori.</p>
@endif
{{ Form::close() }}
<script type="text/javascript">
  window.onModalShown = function() {

    $(document).on('change', 'select[name="order_id"]', function() {

      let orderId = $(this).val();
      let action = 'order_products'
      let name = $(this).find(":selected").data("name");

      axios
        .get(`/api/filter/${action}`, {
          params: {
            order_id: orderId,
            connection: window.Laravel.connection
          }
        })
        .then(response => {

          let productsSelect = $('select[name="products[]"');

          productsSelect.empty();
          let result = response.data.data;
          let products = result.products;
          let order = result.order;

          products.forEach(function(item) {
            productsSelect.append(
              $("<option />")
              .val(item.id)
              .text(item.product_name)
              .attr('geometry', item.geometry)
              .attr('type', item.type)
              .attr('treatment', item.treatment)

            );
          });
          // Order date
          $('input[name="date"').val(order.date);

        })
        .catch(error => {
          console.log(error);
          alert("Something went wrong :(");
        });



    });

    $(document).on('change', 'select[name="products[]"]', function() {
      let infoSection = $('.do-products-data');
      infoSection.empty();

      $('select[name="products[]"] :selected').each(function() {
        var name = $(this).text();
        var geometry = $(this).attr('geometry');
        var type = $(this).attr('type');
        var treatment = $(this).attr('treatment');
        let element = `
                <div>
                    <p> <strong> Prodotto: </strong> ${name}  </p>
                    <p> <strong>Disegno lente: </strong> ${geometry}  </p>
                    <p> <strong>Tipo lente: </strong> ${type}  </p>
                    <p> <strong>Tipo trattamento: </strong> ${treatment}  </p>
                    <hr>
                 </div> 
                `
        infoSection.append(element);

      });

    });
  };
</script>
@endcomponent