@extends('layouts.app', ['title' => 'Cargar Participantes', 'titleIconClass' => 'users'])
@section('content')
    @if (isset($errors) && $errors == 1)
            <div class="container px-4">
                <h3 class="text-center text-danger">Se encontraron errores en el análisis del archivo de cargue, ver detalles de errores <a onclick="HideLoadingScreen()" href="{{route('admin.partakers.massive-upload.download-error')}}">aquí.</a></h3>
            </div>
            <br>
    @endif
    <div class="container px-4" id="readExcel">
        <p class="">Aquí puede importar participantes masivamente a la base de datos.
            Debe importar primero a los docentes y padres y por último a los niños/jóvenes, ya que cada niño/joven debe relacionar un docente y un cuidador. Vea las instrucciones de cada ejemplo de importación <a onclick="HideLoadingScreen()" href="{{ asset('archivos')}}/Instrucciones de importación.docx"><small style="font-size: 0.9rem">aqui</small></a>.</p>


        <h2>
            Importación para Docentes
            <a href="{{ asset('archivos')}}/padres y docentes.xlsx" class="ml-2" onclick="HideLoadingScreen()">
                <small style="font-size: 0.9rem">Ejemplo.xlsx</small>
            </a>
        </h2>
        <div class="row mb-5 p-3 border rounded"  id="showTableReadTeaches">
            <form class="form-inline" action="{{route('admin.partakers.massive-upload.store-teachers')}}" method="post" enctype='multipart/form-data'>
                @csrf
                <div class="form-group">
                    <input class="form-control-file" id="file" ref="file" @change="onFileChanged" name="file" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .xlsx" required>
                </div>
                <div class="container px-4" v-show="showTableReadTeaches" style="max-width: 75vw">
                    <div class="text-center my-2">
                        <p><small>Previsualización de los registros</small></p>
                    </div>
                    <x-table>
                        <table class="table align-items-center table-flush table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th><i class="fa fa-user"></i>Nombre</th>
                                    <th><i class="fa fa-signature"></i> Apellido</th>
                                    <th><i class="fa fa-envelope"></i> Email</th>
                                    <th><i class="fa fa-folder-open"></i> Tipo documento</th>
                                    <th><i class="fa fa-address-card"></i> Documento</th>
                                    <th><i class="fa fa-venus-mars"></i> Sexo</th>
                                    <th><i class="fa fa-phone"></i> Telefono</th>
                                </tr>
                            </thead>
                            <tbody class="list">
                                <tr v-for="item in arrayPreviewExcel">
                                    <td>@{{item.nombres}}</td>
                                    <td>@{{item.apellidos}}</td>
                                    <td>@{{item.email}}</td>
                                    <td>@{{item.tipo_documento}}</td>
                                    <td>@{{item.documento}}</td>
                                    <td>@{{item.sexo}}</td>
                                    <td>@{{item.telefono}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </x-table>
                    <div class="container">
                        <div class="col-lg-2 center">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-save"></i> Importar
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="container px-4">
        <h2>
            Importación para Padres
            <a href="{{ asset('archivos')}}/padres y docentes.xlsx" class="ml-2" onclick="HideLoadingScreen()">
                <small style="font-size: 0.9rem">Ejemplo.xlsx</small>
            </a>
        </h2>
        <div class="row mb-5 p-3 border rounded"  id="showTableReadParents">
            <form class="form-inline" action="{{route('admin.partakers.massive-upload.store-parents')}}" method="post" enctype='multipart/form-data'>
                @csrf
                <div class="form-group">
                    <input class="form-control-file" @change="onFileChanged" id="fileParents" name="file" type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .xlsx" required>
                </div>
                <div class="container px-4" v-show="showTableReadParents" style="max-width: 75vw">
                    <div class="text-center my-2">
                        <p><small>Previsualización de los registros</small></p>
                    </div>
                    <x-table>
                        <table class="table align-items-center table-flush table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th><i class="fa fa-user"></i>Nombre</th>
                                    <th><i class="fa fa-signature"></i> Apellido</th>
                                    <th><i class="fa fa-envelope"></i> Email</th>
                                    <th><i class="fa fa-folder-open"></i> Tipo documento</th>
                                    <th><i class="fa fa-address-card"></i> Documento</th>
                                    <th><i class="fa fa-venus-mars"></i> Sexo</th>
                                    <th><i class="fa fa-phone"></i> Telefono</th>
                                </tr>
                            </thead>
                            <tbody class="list">
                                <tr v-for="item in arrayPreviewExcel">
                                    <td>@{{item.nombres}}</td>
                                    <td>@{{item.apellidos}}</td>
                                    <td>@{{item.email}}</td>
                                    <td>@{{item.tipo_documento}}</td>
                                    <td>@{{item.documento}}</td>
                                    <td>@{{item.sexo}}</td>
                                    <td>@{{item.telefono}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </x-table>
                    <div class="container">
                        <div class="col-lg-2 center">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-save"></i> Importar
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

    </div>


    <div class="container px-4">
        <h2>
            Importación para Niños/jóvenes
            <a href="{{ asset('archivos')}}/Niños-jovenes.xlsx" class="ml-2" onclick="HideLoadingScreen()">
                <small style="font-size: 0.9rem">Ejemplo.xlsx</small>
            </a>
        </h2>
        <div class="row mb-5 p-3 border rounded"  id="showTableReadStudents">
            <form class="form-inline" action="{{route('admin.partakers.massive-upload.store-students')}}" method="post" enctype='multipart/form-data'>
                @csrf
                <div class="form-group">
                    <input class="form-control-file" id="file" name="file" type="file" @change="onFileChanged" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .xlsx" required>
                </div>
                <div class="container px-4" v-show="showTableReadStudents" style="max-width: 75vw">
                    <div class="text-center my-2">
                        <p><small>Previsualización de los registros</small></p>
                    </div>
                    <x-table>
                        <table class="table align-items-center table-flush table-hover">
                            <thead class="thead-light">
                                <tr>
                                    <th><i class="fa fa-user"></i>Nombre</th>
                                    <th><i class="fa fa-envelope"></i> Email</th>
                                    <th><i class="fa fa-folder-open"></i> Tipo documento</th>
                                    <th><i class="fa fa-address-card"></i> Documento</th>
                                    <th><i class="fa fa-venus-mars"></i> Sexo</th>
                                    <th><i class="fa fa-sitemap"></i> Grado</th>
                                    <th><i class="fa fa-sun"></i> Jornada</th>
                                    <th><i class="fa fa-address-card-o"></i> CC Cuidador</th>
                                    <th><i class="fa fa-address-card-o"></i> CC Docente</th>
                                </tr>
                            </thead>
                            <tbody class="list">
                                <tr v-for="item in arrayPreviewExcel">
                                    <td>@{{item.nombres}} @{{item.apellidos}}</td>
                                    <td>@{{item.email}}</td>
                                    <td>@{{item.tipo_documento}}</td>
                                    <td>@{{item.documento}}</td>
                                    <td>@{{item.sexo}}</td>
                                    <td>@{{item.grado}}</td>
                                    <td>@{{item.jornada}}</td>
                                    <td>@{{item.documento_acudiente}}</td>
                                    <td>@{{item.documento_docente}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </x-table>
                    <div class="container">
                        <div class="col-lg-2 center">
                            <button class="btn btn-primary" type="submit">
                                <i class="fa fa-save"></i> Importar
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <a href="{{route('admin.partakers.index')}}" class="btn btn-secondary">
            <i class="fa fa-arrow-left"></i> Volver al listado
        </a>
    </div>
@endsection
@push('js')
<script>
    new Vue({
            el: '#showTableReadTeaches',
            data() {
                return {
                    arrayPreviewExcel:[],
                    showTableReadTeaches: false,
                }
            },
            methods: {

                onFileChanged (event) {
                    let selectedFile = event.target.files[0]
                    if(selectedFile){
                        let fileReader = new FileReader();
                        fileReader.readAsBinaryString(selectedFile);
                        fileReader.onload = (event)=>{
                        let data = event.target.result;
                        let workbook = XLSX.read(data,{type:"binary"});
                        workbook.SheetNames.forEach(sheet => {
                            this.arrayPreviewExcel = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
                        });
                        }
                        this.showTableReadTeaches = true;
                    }
                },
            }
        });

    new Vue({

        el: '#showTableReadParents',
        data() {
            return {

                arrayPreviewExcel:[],
                showTableReadParents: false,
            }
        },
        methods: {

            onFileChanged (event) {
                let selectedFile = event.target.files[0]
                if(selectedFile){
                    let fileReader = new FileReader();
                    fileReader.readAsBinaryString(selectedFile);
                    fileReader.onload = (event)=>{
                    let data = event.target.result;
                    let workbook = XLSX.read(data,{type:"binary"});
                    workbook.SheetNames.forEach(sheet => {
                        this.arrayPreviewExcel = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
                    });
                    }

                    this.showTableReadParents = true;
                }
            },
        }
    });
    new Vue({

        el: '#showTableReadStudents',
        data() {
            return {

                arrayPreviewExcel:[],
                showTableReadStudents: false,
            }
        },
        methods: {

            onFileChanged (event) {
                let selectedFile = event.target.files[0]
                if(selectedFile){
                    let fileReader = new FileReader();
                    fileReader.readAsBinaryString(selectedFile);
                    fileReader.onload = (event)=>{
                    let data = event.target.result;
                    let workbook = XLSX.read(data,{type:"binary"});
                    workbook.SheetNames.forEach(sheet => {
                        this.arrayPreviewExcel = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheet]);
                    });
                    }

                    this.showTableReadStudents = true;
                }
            },
        }
    });
</script>
@endpush()