@extends('layouts/layoutMaster')
@section('title', 'Créditos')

@section('vendor-style')
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
<link rel="stylesheet" href="{{ asset('assets/vendor/libs/@form-validation/umd/styles/index.min.css') }}" />
@endsection

@section('vendor-script')
<script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/@form-validation/umd/bundle/popular.min.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/cleavejs/cleave.js') }}"></script>
<script src="{{ asset('assets/vendor/libs/cleavejs/cleave-phone.js') }}"></script>
@endsection

@section('page-script')
<script src="{{ asset('assets/js/app-ecommerce-customer-all.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Função para calcular o total com base na quantidade de créditos e preço por crédito
    function calcularTotal(creditos, preco) {
      return (creditos * preco).toFixed(2);
    }

    // Função para calcular o preço por crédito com base na quantidade de créditos e total
    function calcularPreco(creditos, total) {
      return (total / creditos).toFixed(2);
    }

    // Adicionar eventos de input nos campos de edição
    @foreach($rendas_creditos as $plano)
      const editCreditos{{ $plano->id }} = document.getElementById('editPlanoCreditos{{ $plano->id }}');
      const editPreco{{ $plano->id }} = document.getElementById('editPlanoPreco{{ $plano->id }}');
      const editTotal{{ $plano->id }} = document.getElementById('editPlanoTotal{{ $plano->id }}');

      editCreditos{{ $plano->id }}.addEventListener('input', function () {
        editTotal{{ $plano->id }}.value = calcularTotal(editCreditos{{ $plano->id }}.value, editPreco{{ $plano->id }}.value);
      });

      editPreco{{ $plano->id }}.addEventListener('input', function () {
        editTotal{{ $plano->id }}.value = calcularTotal(editCreditos{{ $plano->id }}.value, editPreco{{ $plano->id }}.value);
      });

      editTotal{{ $plano->id }}.addEventListener('input', function () {
        editPreco{{ $plano->id }}.value = calcularPreco(editCreditos{{ $plano->id }}.value, editTotal{{ $plano->id }}.value);
      });
    @endforeach

    // Adicionar eventos de input nos campos de adição
    const addCreditos = document.getElementById('creditos');
    const addPreco = document.getElementById('preco');
    const addTotal = document.getElementById('total');

    addCreditos.addEventListener('input', function () {
      addTotal.value = calcularTotal(addCreditos.value, addPreco.value);
    });

    addPreco.addEventListener('input', function () {
      addTotal.value = calcularTotal(addCreditos.value, addPreco.value);
    });

    addTotal.addEventListener('input', function () {
      addPreco.value = calcularPreco(addCreditos.value, addTotal.value);
    });
  });
</script>
@endsection

@section('content')
<h4 class="py-3 mb-2">
<span class="text-muted fw-light">{{ config('variables.templateName', 'TemplateName') }} / </span>Planos de Créditos
</h4>

<!-- Botão para abrir o modal de adicionar plano de créditos -->
<button class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#addPlanoModal">Adicionar Plano de Créditos</button>

<!-- Planos de Créditos List Table -->
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-planos table border-top">
      <thead>
        <tr>
          <th>ID</th>
          <th>Nome do Plano</th>
          <th>Créditos</th>
          <th>Preço por Crédito</th>
          <th>Total</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        @foreach($rendas_creditos as $plano)
          <tr>
            <th>{{ $plano->id }}</th>
            <td>{{ $plano->nome }}</td>
            <td>{{ $plano->creditos }}</td>
            <td>{{ $plano->preco }}</td>
            <td>R$ {{ $plano->total }}</td>
            <td>
              <form action="{{ route('revenda.destroy', $plano->id) }}" method="POST" style="display:inline;">
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Deletar</button>
              </form>
              <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editPlanoModal{{ $plano->id }}">Editar</button>
            </td>
          </tr>

          <!-- Modal de Edição -->
          <div class="modal fade" id="editPlanoModal{{ $plano->id }}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-simple modal-edit-plano">
              <div class="modal-content p-3 p-md-5">
                <div class="modal-body">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  <div class="text-center mb-4">
                    <h3 class="mb-2">Editar Plano de Créditos</h3>
                    <p class="text-muted">Atualize os detalhes do plano de créditos.</p>
                  </div>
                  <form id="editPlanoForm{{ $plano->id }}" class="row g-3" action="{{ route('revenda.update', $plano->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="col-12">
                      <label class="form-label" for="editPlanoNome{{ $plano->id }}">Nome do Plano</label>
                      <input type="text" id="editPlanoNome{{ $plano->id }}" name="nome" class="form-control" value="{{ $plano->nome }}" required />
                    </div>
                    <div class="col-12">
                      <label class="form-label" for="editPlanoCreditos{{ $plano->id }}">Quantidade de Créditos</label>
                      <input type="number" id="editPlanoCreditos{{ $plano->id }}" name="creditos" class="form-control" value="{{ $plano->creditos }}" required />
                    </div>
                    <div class="col-12">
                      <label class="form-label" for="editPlanoPreco{{ $plano->id }}">Preço por Crédito</label>
                      <input type="number" step="0.01" id="editPlanoPreco{{ $plano->id }}" name="preco" class="form-control" value="{{ number_format((float) $plano->preco, 2, '.', '') }}" required />
                    </div>
                    <div class="col-12">
                      <label class="form-label" for="editPlanoTotal{{ $plano->id }}">Total</label>
                      <input type="number" step="0.01" id="editPlanoTotal{{ $plano->id }}" name="total" class="form-control" value="{{ number_format((float) $plano->total, 2, '.', '') }}" required />
                    </div>
                    <div class="col-12 text-center">
                      <button type="submit" class="btn btn-primary me-sm-3 me-1">Salvar</button>
                      <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<!-- Modal para adicionar novo plano de créditos -->
<div class="modal fade" id="addPlanoModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-simple modal-add-plano">
    <div class="modal-content p-3 p-md-5">
      <div class="modal-body">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        <div class="text-center mb-4">
          <h3 class="mb-2">Adicionar Novo Plano de Créditos</h3>
          <p class="text-muted">Preencha os detalhes do novo plano de créditos.</p>
        </div>
        <form id="addPlanoForm" class="row g-3" action="{{ route('revenda.store') }}" method="POST">
          @csrf
          <div class="col-12">
            <label class="form-label" for="nome">Nome do Plano</label>
            <input type="text" id="nome" name="nome" class="form-control" placeholder="Nome do Plano" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="creditos">Quantidade de Créditos</label>
            <input type="number" id="creditos" name="creditos" class="form-control" placeholder="Quantidade de Créditos" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="preco">Preço por Crédito</label>
            <input type="number" step="0.01" id="preco" name="preco" class="form-control" placeholder="Preço por Crédito" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="total">Total</label>
            <input type="number" step="0.01" id="total" name="total" class="form-control" placeholder="Total" required />
          </div>
          <div class="col-12 text-center">
            <button type="submit" class="btn btn-primary me-sm-3 me-1">Adicionar</button>
            <button type="reset" class="btn btn-label-secondary" data-bs-dismiss="modal" aria-label="Close">Cancelar</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection