@extends('layouts/layoutMaster')
@section('title', 'Planos')

@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>
@endsection

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

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

<!-- Planos List Table -->
<div class="card">
  <div class="card-datatable table-responsive">
    <table class="datatables-planos table border-top">
      <thead>
        <tr>
          <th>Nome</th>
          <th>Preço</th>
          <th>Duração (dias)</th>
          <th>Usuário</th>
          <th>Ações</th>
        </tr>
      </thead>
      <tbody>
        @foreach($planos as $plano)
          <tr>
            <td>{{ $plano->nome }}</td>
            <td>{{ number_format($plano->preco, 2, ',', '.') }}</td>
            <td>{{ $plano->duracao }}</td>
            <td>{{ $plano->user ? $plano->user->name : 'Usuário não encontrado' }}</td>
            <td>
              <form action="{{ route('planos.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="#editPlano{{ $plano->id }}">Editar</button>
            </td>
          </tr>

          <!-- Modal de Edição -->
          <div class="modal fade" id="editPlano{{ $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</h3>
                    <p class="text-muted">Atualize os detalhes do plano.</p>
                  </div>
                   <form id="editPlanoForm{{ $plano->id }}" class="row g-3" action="{{ route('planos.update', $plano->id) }}" method="POST">
                    @csrf
                    @method('PUT')
                    <div class="col-12">
                      <label class="form-label" for="editPlanoNome{{ $plano->id }}">Nome</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="editPlanoPreco{{ $plano->id }}">Preço</label>
                      <input type="number" step="0.01" id="editPlanoPreco{{ $plano->id }}" name="preco" class="form-control" value="{{ $plano->preco }}" required />
                    </div>
                    <div class="col-12">
                      <label class="form-label" for="editPlanoDuracao{{ $plano->id }}">Duração (dias)</label>
                      <input type="number" id="editPlanoDuracao{{ $plano->id }}" name="duracao" class="form-control" value="{{ $plano->duracao }}" 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 -->
<div class="modal fade" id="addPlano" 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</h3>
          <p class="text-muted">Preencha os detalhes do novo plano.</p>
        </div>
                <form id="addPlanoForm" class="row g-3" action="{{ route('planos.store') }}" method="POST">
          @csrf
          <div class="col-12">
            <label class="form-label" for="addPlanoNome">Nome</label>
            <input type="text" id="addPlanoNome" name="nome" class="form-control" placeholder="Nome do Plano" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addPlanoPreco">Preço</label>
            <input type="number" step="0.01" id="addPlanoPreco" name="preco" class="form-control" placeholder="Preço do Plano" required />
          </div>
          <div class="col-12">
            <label class="form-label" for="addPlanoDuracao">Duração (dias)</label>
            <input type="number" id="addPlanoDuracao" name="duracao" class="form-control" placeholder="Duração do Plano em dias" 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