<div>
<x-adminlte-card title="SERVICIOS QUE BRINDA EL CEMENTERIO MUNICIPAL" class="m-2" theme="dark" icon="fas fa-id-card">
        <div class="col-12">                                         
            <div class="row">
                <div class="col-12">
                    <div class="card-body">
                        <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                            <div class="row">
                                <div class="col-sm-12 ">
                                    <br>
                                    <table id="tabla_servicios" class="table table-hover align-middle dataTable dtr-inline collapsed" aria-describedby="example1_info">
                                        <!-- <a href="" class="btn btn-primary" data-toggle="modal" data-target="#modal-addServicio"><i class="fas fa-plus-square"></i></a> -->
                                        <thead class="text-center px-4 py-4 text-nowrap bg-gray">
                                            <tr >
                                                <th>ID</th>
                                                <th>DESCRIPCION</th>
                                                <th>MONTO</th>
                                                <th>RESOLUCION</th>
                                                <th>EDITAR</th>
                                                <th>ELIMINAR</th>
                                            </tr>
                                        </thead>
                                        <tbody class="">
                                            @foreach ($servicios as $servicio)
                                                <tr >
                                                    <td>{{ $servicio->id }}</td>
                                                    <td>{{ $servicio->descripcion }}</td>
                                                    <td>{{ $servicio->monto }}</td>
                                                    <td>{{ $servicio->resolucion }}</td>
                                                    <td>
                                                        <a href="" class="btn btn-warning" data-toggle="modal" data-target="#modal-edit-servicio" wire:click="edit({{ $servicio->id }})"><i class="fas fa-edit"></i></a>
                                                    </td>
                                                    <td>
                                                        <a href="" class="btn btn-danger" wire:click="delete({{ $servicio->id }})"><i class="fas fa-trash"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-adminlte-card>
    <div wire:ignore.self class="modal fade" id="servicioAdd">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">AGREGAR NUEVO SERVICIO</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form wire:submit.prevent="servicioCreate()">
                        <div class="row ">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>DESCRIPCION SERVICIO</label>
                                        <x-adminlte-input wire:model="descripcion" type="text" required name="descripcion" id="descripcion" autocomplete="off" placeholder="Ingrese nombre" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>  
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>MONTO</label>                                       
                                        <x-adminlte-input wire:model="monto" type="text" required name="monto" id="monto" autocomplete="off" placeholder="Ingrese monto" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label>RESOLUCIÓN</label>                                       
                                        <x-adminlte-input wire:model="resolucion" type="text" required name="resolucion" id="resolucion" autocomplete="off" placeholder="Ingrese resolución" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-id-card text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    <button type="button" class="btn btn-primary" id="guardarCambios">Registrar</button>
                </div>
            </div>
        </div>
    </div>
</div>
