@extends('admin.layout.master')

@section('content')
<main>
    <div class="breadcrumb-area">
        <h1>Dashboard</h1>
        <ol class="breadcrumb">
            <li><a href="{{ url('/admin') }}"><i class='bx bx-home-alt' style="font-size: 18px;color: #F31519;"></i></a></li>
            <li><a href="{{ url('/admin') }}">Principal</a></li>
            <li>&nbsp;&nbsp;/ PayPal Configuración</li>
            <li>&nbsp;&nbsp;/ <a href="{{ url('/admin/paypalproducts') }}">Productos</a></li>
        </ol>
    </div>

    <div class="card mb-30">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3>Productos de PayPal</h3>
            <a href="javascript:void(0)" class="btn btn-info rounded-pill" data-toggle="modal" data-target="#myModalProduct">
                <i class='bx bx-plus'></i> Nuevo Producto
            </a>
        </div>

        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Descripción</th>
                        <th>Tipo</th>
                        <th>Categoría</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($products as $product)
                        <tr>
                            <td>{{ $product->name }}</td>
                            <td>{{ $product->description }}</td>
                            <td>{{ $product->type }}</td>
                            <td>{{ $product->category }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal para Crear Producto -->
    <div class="modal fade" id="myModalProduct" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content col-lg-6 mx-auto">
                <div class="modal-header">
                    <h4 class="modal-title">Crear Producto</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="productForm">
                        @csrf
                        <div class="form-group">
                            <label>Nombre:</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                        <div class="form-group">
                            <label>Descripción:</label>
                            <textarea class="form-control" name="description" required></textarea>
                        </div>
                        <div class="form-group">
                            <label>Tipo:</label>
                            <select class="form-control" name="type">
                                <option value="SERVICE">Servicio</option>
                                <option value="PHYSICAL">Físico</option>
                                <option value="DIGITAL">Digital</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Categoría:</label>
                            <select class="form-control" name="category">
                                <option value="SOFTWARE">Software</option>
                                <option value="EDUCATIONAL_AND_TEXTBOOKS">Educación</option>
                                <!-- Agrega otras categorías relevantes aquí -->
                            </select>
                        </div>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    $('#productForm').on('submit', function(event) {
        event.preventDefault();
        $.ajax({
            url: '{{ route("paypal.products.store") }}',
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                alert(response.success);
                location.reload();
            },
            error: function(response) {
                alert('Error al crear el producto');
            }
        });
    });
</script>
@endsection