@extends('layouts.app')
@section('title', 'Cadastrar Intervalo')
@section('content')
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<!-- Estilizando um componente do select2 que estava desajustando o layout -->
@include('layouts.headers.cards_prod')
<!-- A consulta desta tabela deve envolver INNER JOIN por causa dos nomes da família, nome do grupo e subgrupo, todos vindos das respectivas chaves estrangeiras -->

<div class="container-fluid mt--5">
  <div class="row">
    <div class="col-xl-12 order-xl-1">
      <div class="card bg-secondary shadow">
        <div class="card-header bg-white border-0">
          <div class="row align-items-center">
            <div class="col-8">
              <h3 class="mb-0">{{ __('Ajustar intervalos Reman') }}</h3>
            </div>
            <div class="col-4 text-right">
              <a href="{{ route('intervalo.intervalos') }}" class="btn btn-sm btn-primary">{{ __('Voltar') }}</a>
            </div>
          </div>
        </div>
        <div class="card-body">
          <form method="post" action="{{route('intervalo.salvar_intervalos')}}" id="cadastrar_intervalo">
            {{csrf_field()}}
            @foreach($dias_intervalos as $intervalo)
              <input type="hidden" class="intervalos_cadastrados" id="intervalos_{{$intervalo->id}}" value="{{$intervalo->dias_intervalo}}">
            @endforeach
            <div class="form-group row">
              <div class="col-lg-6">
                <label for="dias_intervalos">Intervalo em dias <small class="font-weight-bold text-danger alert-permissao d-none">- (Intervalo já cadastrado)</small></label>
                <input type="number" step="1" min="1" value="1" class="form-control form-control-alternative" id="dias_intervalos" name="dias_intervalos" >
                <small class='text-warning modal_intervalos'>
                  Intervalos registrados 
                  <a href="#" data-toggle="modal" data-target="#modal_intervalos">
                  <i class="fas fa-question-circle text-success"></i>
                  </a>
                </small>
              </div>
              <div class="col-lg-6 text-center">
                <div class="row">
                  <label class="mx-auto">Situação</label>
                </div>
                  <div class="form-check form-check-inline mr-5">
                    <input class="form-check-input" type="radio" name="situacao_intervalo" id="situacao_intervalo_1" value="1" checked>
                    <label class="form-check-label text-success" for="situacao_intervalo_1">Habilitado</label>
                  </div>
                  <div class="form-check form-check-inline ml-5">
                    <input class="form-check-input" type="radio" name="situacao_intervalo" id="situacao_intervalo_2" value="0">
                    <label class="form-check-label text-danger" for="situacao_intervalo_2">Desabilitado</label>
                  </div>
                </div>
            </div>
            <div class="form-group row mt-3">
              <input type="submit" name="enviar" id="enviar" class="btn btn-info font-weight-bold d-block ml-auto mr-2" value="Cadastrar" disabled>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="modal_intervalos" tabindex="-1" aria-hidden="true" aria-labelledby="modal_intervalos" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Intervalos cadastrados</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-sm table-hover table-bordered">
            <thead>
              <tr>
                <th scope="col">Intervalos cadastrados</th>
                <th scope="col">Situação</th>
              </tr>
            </thead>
            <tbody>
              @foreach($dias_intervalos as $intervalos)
                <tr>
                  <td>{{$intervalos->dias_intervalo}} dias</td>
                  @php echo $intervalos->situacao_intervalo == 1 ? '<td class="text-success font-weight-bold">Habilitado</td>' : '<td class="text-danger font-weight-bold">Desabilitado</td>' @endphp
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@include('layouts.footers.auth')

@endsection

@push('js')
<script type="text/javascript" src="/js/ajustar_intervalo_parcelas.js"></script>

@endpush