@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-7">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header">
                    <h3 class="card-title">Calificaciones Llantas</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover text-nowrap table-sm py-4 no-footer" id="todas">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th>Marca</th>
                                    <th>Modelo</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($datos as $dato)
                                    <tr data-url="" class="">
                                        <td>
                                            <a href=#>
                                                <button class="btn btn-primary btn-sm" disabled>Detallar</button>
                                            </a>
                                        </td>
                                        <td>{{ $dato["marca"] }}</td>
                                        <td>{{ $dato["modelo"] }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card card-primary card-outline card-outline-tabs">
                <div class="card-header">
                    <h3 class="card-title mt-2">Masivo csv</h3>
                    <div class="d-flex justify-content-end">
                        <a href="{{ url('formatosImportacion/calificacionExperto.csv') }}">
                            <button type="button" class="btn btn-primary btn-sm">Plantilla csv</button>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-pane" id="csv" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                        <form action="" id="formCSV">
                            <input type="file" id="csv" name="csv" class="form-control-border border-width-2 system_validador_vacio" accept=".xls, .xlsx, .csv">
                        </form>
                        <div class="row mt-3">
                            <button type="button" id="btn-subir" class="btn btn-primary btn-sm btn-lg ml-2 mt-1">Subir</button>
                        </div>
                        <br><br>

                        <div id="txtErrorMasivo">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function () {
            dataTable(jQuery('#todas'))
        });

        jQuery('#btn-subir').on('click', function () {
            let idform = document.getElementById("formCSV");
            const formulario = new FormData(idform);
            if (system_validarcampos("formCSV")) {
                axios.post('administrar/calificacion/experto/obtenercsv', formulario).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("Datos guardados con exito", '',
                            'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        var datosError = resp.data.mensaje.map(function (datos) {
                            return '<li>' + datos
                        })
                        document.getElementById("txtErrorMasivo").innerHTML = datosError;
                    }
                });
            }
        });
    </script>
@endsection