@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;/ Planes</li>
            <li>&nbsp;&nbsp;/ <a href="{{ url('/admin/plantypes') }}">Tipos de Plan</a></li>
        </ol>
    </div>

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

        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Nombre</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($planTypes as $planType)
                        <tr>
                            <td>{{ $planType->name }}</td>
                            <td>
                                <a href="javascript:void(0)" data-id="{{ $planType->id }}" class="btn btn-primary btn-sm editPlanType">Editar</a>
                                <a href="javascript:void(0)" data-id="{{ $planType->id }}" class="btn btn-danger btn-sm deletePlanType">Eliminar</a>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <!-- Modal para Crear/Editar Tipo de Plan -->
    <div class="modal fade" id="myModalPlanType" 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 Tipo de Plan</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form id="planTypeForm">
                        @csrf
                        <input type="hidden" name="_method" id="method" value="POST">
                        <div class="form-group">
                            <label>Nombre:</label>
                            <input type="text" class="form-control" name="name" id="name" required>
                        </div>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    $('#planTypeForm').on('submit', function(event) {
        event.preventDefault();
        var id = $('#planTypeForm').find('#method').val() == 'PUT' ? $('#planTypeForm').find('[name="id"]').val() : '';
        var method = $('#method').val() == 'PUT' ? 'PUT' : 'POST';
        $.ajax({
            url: method == 'POST' ? '{{ route("plantypes.store") }}' : '{{ url("admin/plantypes") }}/' + id,
            method: method,
            data: $(this).serialize(),
            success: function(response) {
                alert(response.success);
                location.reload();
            },
            error: function(response) {
                alert('Error al guardar el tipo de plan');
            }
        });
    });

    $('.editPlanType').click(function() {
        var id = $(this).data('id');
        $.get('{{ url("admin/plantypes") }}/' + id + '/edit', function(data) {
            $('#name').val(data.name);
            $('#method').val('PUT');
            $('#planTypeForm').append('<input type="hidden" name="id" value="' + id + '">');
            $('#myModalPlanType').modal('show');
        });
    });

    $('.deletePlanType').click(function() {
        var id = $(this).data('id');
        if(confirm('¿Estás seguro de que deseas eliminar este tipo de plan?')) {
            $.ajax({
                url: '{{ url("admin/plantypes") }}/' + id,
                method: 'DELETE',
                data: {_token: '{{ csrf_token() }}'},
                success: function(response) {
                    alert(response.success);
                    location.reload();
                },
                error: function(response) {
                    alert('Error al eliminar el tipo de plan');
                }
            });
        }
    });
</script>
@endsection