@extends('layouts.plantillabase');

@section('css')
<link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">

@endsection

@section('contenido')
<a href="cotizacions/create" class="btn btn-primary mb-3">CREAR</a>

<table id="cotizaciones" class="table table-striped table-bordered shadow-lg mt-4" style="width:100%">
    <thead class="bg-primary text-white">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">Clave</th>
            <th scope="col">Tipo</th>
            <th scope="col">Subtotal</th>
            <th scope="col">Total</th>
            <th scope="col">Acciones</th>
        </tr>
        
    </thead>
    <tbody>
    @foreach ($cotizacions as $cotizacion)
        <tr>
            <td>{{$cotizacion->id}}</td>
            <td>{{$cotizacion->clave}}</td>
            <td>{{$cotizacion->tipo}}</td>
            <td>{{$cotizacion->subtotal}}</td>
            <td>{{$articulo->total}}</td>
            <td>
                <form action="{{ route ('cotizacions.destroy',$cotizacion->id)}}" method="POST">
                <a href="/cotizacions/{{ $cotizacion->id}}/edit" class="btn btn-info">Editar</a>
                @csrf
                @method('DELETE')
                <button type="submit" class="btn btn-danger">Borrar</button>
                </form>
            </td>
        </tr>
    @endforeach    
    </tbody>
</table>

@section('js')
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script>
    $(document).ready(function() {
    $('#cotizaciones').dataTable();
} );
</script>

@endsection
@endsection