@extends('layouts.app')
@push('css')
    <script>
        $(document).ready(function(e) {
            // $("#incorrect_table").DataTable({
            //     "responsive": true,
            //     "lengthChange": false,
            //     "autoWidth": false,
            //     "buttons": ["copy", "csv", "excel",
            //         "pdf", "print", "colvis"
            //     ]
            // }).buttons().container().appendTo(
            //     '#incorrect_table');
        });
    </script>
    @endpush @section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0 text-dark">Add Teachers' Data</h1>
                </div>
                <!-- /.col -->
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('home') }}" class="btn btn-sm btn-info"><i class="fas fa-home"></i>Home</a>
                        </div>
                        <div class="d-inline p-2 text-white text-right">
                            <a href="{{ route('employees.index') }}" class="btn btn-sm btn-primary text-right"><i
                                    class="fas fa-arrow-circle-left"></i> Back</a>
                        </div>
                    </ol>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <!-- Main row -->
            <div class="row">
                <div class="col-md-6 col-x-6 col-sm-6">
                    <br><br><br>
                    <form action="{{ route('employees.storeexcel') }}" method="POST" enctype="multipart/form-data"
                        id="excel_form">
                        @csrf
                        <fieldset>
                            <legend>Import from Excel(.xls/.xlsx):</legend>
                            <div class="form-group">
                                <label for="file">Choose Excel File</label>
                                <input type="file" name="file" id="ex_file" class="form-control" />
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </fieldset>
                    </form>
                    <!-- /.row (main row) -->
                </div>
                <div class="col-md-6 col-x-6 col-sm-6">
                    <br><br><br>
                    @csrf
                    <fieldset>
                        <legend>Download the Excel File Format :</legend>
                        <div class="form-group">
                            <a href={{ asset('public/ExcelDataFormat/TrainingData.xlsx') }}><img
                                    src={{ asset('public/ExcelDataFormat/excel-logo.png') }} alt="Excel Logo" width="70"
                                    height="80"></a>
                        </div>
                    </fieldset>
                    <!-- /.row (main row) -->
                </div>
                <!-- /.container-fluid -->
            </div>
        </div>
    </section>
    {{-- @if (\Session::has('errorFile'))
        <script>
            Swal.fire({
                icon: 'error',
                title: 'File not uploaded!',
                text: 'Something went wrong! Please try again later!'
            })
        </script>
    @endif --}}
    <!-- /.content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row" id="incorrect_table_head" style="visibility: hidden;">
                <div class="col-4">
                </div>
                <div class="col-4">
                    <h3 id="" class="text-center">List of Data That Couldn't Be Processed</h3>
                </div>
                <div class="col-4">
                    {{-- @csrf
                    <form action="{{ route('employees.downloadexcel') }}" method="POST" enctype="multipart/form-data"
                        id="excel_form"> --}}
                    {{-- <button class="btn btn-info pull-right" id="download_excel_button" name="download_excel_button"
                        type="submit">Download Excel</button> --}}
                    {{-- </form>
                    @csrf --}}
                </div>
            </div>
        </div>
    </section>

    <table id="incorrect_table" class="table table-bordered table-responsive" style="visibility: hidden;">
        <thead>
            <tr>
                <th scope="col">SL.</th>
                <th scope="col">Name</th>
                <th scope="col">NID</th>
                <th scope="col">EMAIL</th>
                <th scope="col">MOBILE</th>
                <th scope="col">INSTITUTE</th>
                <th scope="col">EIIN</th>
                <th scope="col">DESIGNATION</th>
                <th scope="col">SUBJECT(APPOINTMENT)</th>
                <th scope="col">SUBJECT(NCF)</th>
                <th scope="col">DIRECTORATE</th>
                <th scope="col">Problem</th>
            </tr>
        </thead>
        <tbody name="incorrect_table_body" id="incorrect_table_body">
        </tbody>
    </table>
    @endsection @push('js')
    <script>
        var incorrectTeacherInfo = new Array();
        $(document).ready(function(e) {
            // $("#incorrect_table").DataTable({
            //     "responsive": true,
            //     "lengthChange": false,
            //     "autoWidth": false,
            //     "buttons": ["copy", "csv", "excel",
            //         "pdf", "print", "colvis"
            //     ]
            // }).buttons().container().appendTo(
                // '#incorrect_table');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#excel_form').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                if (document.getElementById("ex_file").files.length > 0) {
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "The file will be uploaded!",
                        type: 'question',
                        showCancelButton: true,
                        confirmButtonText: 'Yes, Upload it!',
                        cancelButtonText: 'No, Cancel!',
                        reverseButtons: true
                    }).then((result) => {
                        if (result.value) {
                            $.ajax({
                                type: 'POST',
                                url: "{{ route('employees.storeexcel') }}",
                                data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: (data) => {
                                    this.reset();
                                    Swal.fire(
                                        'Uploaded!',
                                        'Your file has been uploaded.',
                                        'success'
                                    );

                                    var iterator = 1;
                                    incorrectTeacherInfo = data['incorrectTeacherData'];
                                    for (var i = 0; i < data['incorrectTeacherData']
                                        .length; i++) {
                                        var tr = '<tr>';
                                        tr = tr + '<td>' + iterator++ + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][0] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][1] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][2] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][2] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][5] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][6] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][9] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][10] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][11] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][12] + '</td>';
                                        tr = tr + '<td>' + data['incorrectTeacherData'][
                                            i
                                        ][20] + '</td>';
                                        tr = tr + '</tr>';
                                        $('#incorrect_table_body').append(tr);
                                    }
                                    iterator = 1;
                                    $("#incorrect_table").css('visibility', 'visible');
                                    $("#incorrect_table_head").css('visibility',
                                        'visible');


                                },
                                error: function(data) {
                                    Swal.fire({
                                        title: '<strong>Sorry, File cannot be uploaded</strong>',
                                        type: 'error',
                                        html: 'Problem: ' + data.responseJSON
                                            .error +
                                            '</br> Please resolve the problem and try again!',
                                        showCloseButton: true
                                    });
                                }
                            });
                        } else if (result.dismiss === Swal.DismissReason.cancel) {
                            Swal.fire(
                                'Cancelled',
                                'Your file is not uploaded',
                                'error'
                            )
                        }
                    })
                } else {
                    Swal.fire(
                        'Cancelled',
                        'Please choose an excel file to upload',
                        'error'
                    )
                }
            });
        });

        $("#download_excel_button").click(function(e) {
            e.preventDefault();
            console.log(incorrectTeacherInfo);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "{{ route('employees.downloadexcel') }}",
                data: incorrectTeacherInfo,
                success: function(result) {
                    alert('ok');
                },
                error: function(result) {
                    alert('error');
                }
            });
        });
    </script>
@endpush