@extends('layouts/eims_layout')
@section('title', '| ' . $pageTitle)
@section('content')
    @include('successMsg')

    <div class="row add-data-form">
        <div class="col-md-10 col-md-offset-1" style="padding-bottom: 2%">
            <div class="viewTitle">
                <div class="panel-heading" style="padding-bottom:0; ">
                    <div class="panel-title"> {{ $pageTitle }}</div>
                </div>
            </div>
            <div class=" panel panel-default panel-border">

                <div class="panel-body">
                    <div class="row">

                        <div class="col-sm-4 col-xs-12 col-sm-offset-4 text-center">
                            <h5>
                                <ul>
                                    <li style="list-style-type: none;">
                                        <h2 style="text-align:center;">
                                            {{$company?->name ?? ''}}
                                        </h2>
                                    </li>
                                    <li style="list-style-type: none;">
                                        <span style="font-weight: bold;" id="program_heading">Address</span>
                                        : {{$company?->address}}
                                    </li>
                                </ul>
                            </h5>
                        </div>
                        <div class="col-sm-4 hidden">
                            <div style="margin-top: 8%; display: block;">
                                <input type="file" id="importExcelFile" accept=".xlsx, .xls, .csv"
                                       class="form-control dropify inline " data-height="65" style="max-width: 50%;"
                                       autocomplete="off">

                                <button type="button" onclick="importExcelToInputs()"
                                        class="btn btn-sm btn-info inline">Upload
                                </button>

                                <a class="btn btn-sm inline btn-info" style="float: right"
                                   onclick="exportTableToExcel('subjectWiseMarksTableForExcel')">
                                    <i class="fa fa-download"></i> Download Sample
                                </a>

                            </div>
                        </div>
                    </div>

                    {{Form::open(['url' => '/','id' => 'studentAttendanceUploadForm', 'autocomplete' => 'off'])}}

                    <div class="row">

                        {{-- input:file--}}
                        <div class="col-md-12">
                            <div class="form-group row">
                                {{Form::label('upload_file', 'Upload File:', ['class' => 'col-md-2'])}}
                                <div class="col-md-8">
                                    {{Form::file('upload_file', ['class' => 'form-control', 'id' => 'uploadFile', 'required', 'accept' => '.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel'])}}
                                </div>
                                <div class="col-md-2 text-right">
                                    <button type="button" class="btn btn-info" id="uploadButton">Upload</button>
                                    <a class="btn btn-info" href="{{asset("eims/student_attendance_sample.xlsx")}}">
                                        Download Sample
                                    </a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-12" id="studentAttendanceDataHolder" style="margin-bottom: 10px;">
                        </div>

                        <div class="col-md-12 text-right hidden" id="submitButtonHolder">
                            <button type="submit" class="btn btn-info">Submit</button>
                            <a href="{{ url()->current()  }}"
                               style="margin-bottom: 10px;"
                               class="btn btn-danger">Close</a>
                        </div>


                    </div>

                    {{Form::close()}}
                </div>
            </div>
            <div class="viewTitle"></div>
        </div>
    </div>

    <script src="{{asset("js/eims/sheetjs/xlsx.full.min.js")}}"></script>
    <script type="text/javascript">
        const companyType = '{{ $companyType }}';


        $(document).ready(function () {
            // on click of upload button show data of the file
            $('#uploadButton').on('click', function () {
                const fileInput = $('#uploadFile')[0];
                if (fileInput.files.length > 0) {
                    const file = fileInput.files[0];
                    const reader = new FileReader();

                    $(".errormsg").html('')

                    reader.onload = function (e) {
                        const data = e.target.result;
                        const workbook = XLSX.read(data, {type: 'binary'});

                        // append data in studentAttendanceDataHolder
                        let studentAttendanceDataHolder = $('#studentAttendanceDataHolder');
                        studentAttendanceDataHolder.html('');

                        workbook.SheetNames.forEach(function (sheetName) {
                            const XL_row_object = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
                            studentAttendanceDataHolder.append(`
                                    <div class="row font-weight-bold">
                                        <div class="col-md-3">Student ID</div>
                                        <div class="col-md-2">Status</div>
                                        <div class="col-md-3">Date</div>
                                        <div class="col-md-2">Entry Time</div>
                                        <div class="col-md-2">Exit Time</div>
                                    </div>
                                    ${XL_row_object.map(function (object) {
                                return `
                                        <div class="row">
                                            <div class="col-md-3">
                                                <input class="form-control" type="text" name="student_id_no[]" value="${object?.student_id_no}" readonly>
                                                <span class="errormsg student_id_no text-danger"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <input class="form-control" type="text" name="status[]" value="${object?.status}" readonly>
                                                <span class="errormsg status text-danger"></span>
                                            </div>
                                            <div class="col-md-3">
                                                <input class="form-control" type="text" name="attendance_date[]" value="${object?.attendance_date}" readonly>
                                                <span class="errormsg attendance_date text-danger"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <input class="form-control" type="text" name="entry_time[]" value="${object?.entry_time ?? ''}" readonly>
                                                <span class="errormsg entry_time text-danger"></span>
                                            </div>
                                            <div class="col-md-2">
                                                <input class="form-control" type="text" name="exit_time[]" value="${object?.exit_time ?? ''}" readonly>
                                                <span class="errormsg exit_time text-danger"></span>
                                            </div>
                                        </div>
                                        `;
                            }).join('')}
                            `);
                        });

                        $('#submitButtonHolder').removeClass('hidden');
                    };

                    reader.readAsBinaryString(file);
                } else {
                    alert('Please select a file to upload.');
                }
            });

            $('#studentAttendanceUploadForm').submit(function (e) {
                e.preventDefault();
                const form = $(this);
                const url = "{{ route('eims_student_attendance_upload_store') }}";

                $.post(url, form.serialize()).done(function (response) {
                    const {responseTitle, responseText, responseStatus} = response;

                    Swal.fire({
                        title: responseTitle,
                        text: responseText,
                        icon: responseStatus,
                        showConfirmButton: true,
                    }).then(() => {
                        location.reload();
                    });

                }).catch(function (error) {
                    const {responseTitle, responseText, responseStatus, errors} = error.responseJSON;

                    Swal.fire({
                        title: responseTitle,
                        text: responseText,
                        icon: responseStatus,
                        showConfirmButton: true,
                    });

                    if (errors) {
                        Object.keys(errors).forEach(function (key) {
                            // student_id_no.0 divide the class name and it's index
                            let errorKey = key.split('.');
                            // get with index
                            const element = $(`.errormsg.${errorKey[0]}`)[errorKey[1]];

                            $(element).html(errors[key][0])
                        });
                    }
                });
            });
        });
    </script>

@endsection