@extends('painel-admin.menu')
@section('title', 'Soluções')
@section('php')
@stop
@section('content')
  @if(Session::has('success'))
    @php
      $data = Session::get('success');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-success" role="alert">
          <i class="fa fa-check"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-success" role="alert">
        <i class="fa fa-check"></i>
        {{ $data }}
      </div>
    @endif
  @endif

  @if(Session::has('error'))
    @php
      $data = Session::get('error');
    @endphp

    @if (is_array($data))
      @foreach ($data as $msg)
        <div class="alert alert-danger" role="alert">
          <i class="fa fa-times"></i>
          {{ $msg }}
        </div>
      @endforeach
    @else
      <div class="alert alert-danger" role="alert">
        <i class="fa fa-times"></i>
        {{ $data }}
      </div>
    @endif
  @endif
  @csrf
  <div class="row">
      <div class="col-12 mt-3">
          <div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center flex-wrap">
              <h2 class="mb-3 mb-sm-0">Soluções Gerais</h2>

              <div class="d-flex flex-column flex-sm-row flex-wrap" style="gap: 5px;">
                  <a href="{{ route('solucoes.create') }}" class="btn btn-primary">
                      <i class="fa fa-plus"></i> Solução
                  </a>
              </div>
          </div>
      </div>
  </div>
  <br>
  <form method="GET" action="{{ route('solucoes.index') }}">
    <div class="row">
      <div class="col-md-12 mb-3 input-group">
        <input type="text" id="search" name="search" class="form-control" placeholder="Pesquisar" value="{{ request('search') }}">
        <button type="submit" class="btn btn-success"><i class="fas fa-search" ></i></button>
        </div>
    </div>
  </form>
  <div class="row">
    <div class="col-12" id="SOLUCAOresultado">
      @foreach($solucoes as $solucao)
        <div class="card">
          <div class="card-header" id="heading{{ $solucao->id }}">
            <h5 class="mb-0 d-flex justify-content-between align-items-center">
              <button class="btn-link" type="button" data-toggle="collapse" data-target="#collapse{{ $solucao->id }}" aria-expanded="true" aria-controls="collapse{{ $solucao->id }}">
                <i class="fas fa-plus mr-1"></i>{{ $solucao->titulo }}
              </button>
              <div class="d-flex">
                <a href="{{ route('solucoes.edit', $solucao->id) }}" class="btn btn-primary btn-sm"><i class="fas fa-edit"></i></a>
                <form method="POST" id="formDelete{{$solucao->id}}" action="{{route('solucoes.destroy', $solucao->id)}}" enctype="multipart/form-data">
                @csrf
                @method('DELETE')
                  <button type="button" class="btn btn-danger btn-sm btnDeletar" data-id="{{$solucao->id}}">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </div>
            </h5>
          </div>

          <div id="collapse{{ $solucao->id }}" class="collapse" aria-labelledby="heading{{ $solucao->id }}" data-parent="#SOLUCAOresultado">
            <div class="card-body">
                {!! $solucao->solucao !!}
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>
  <div class="row">
    <div class="col-12">
        {{ $solucoes->appends(request()->query())->links('pagination::bootstrap-4') }}
    </div>
  </div>
  
  <style>
    
    .hidden {
      display: none;
    }
    .scrollbar-horizontal {
      overflow-x: auto;
    }
  
  
  </style>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>
      $(document).ready(function() {
          $('#SOLUCAOresultado').on('show.bs.collapse', function() {

              $('#SOLUCAOresultado .collapse').collapse('hide');
          });
      })

     document.querySelectorAll('.btnDeletar').forEach(function(button) {
      button.addEventListener('click', function(event) {
        event.preventDefault();

        const formId = 'formDelete' + button.getAttribute('data-id');
        const form = document.getElementById(formId);

        Swal.fire({
            title: 'Confirmação',
            text: 'Deseja realmente excluir essa Solução?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Confirmar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
      });
    });

    var currentItemId = 'solucoes-link';

  </script>

@endsection