@extends('admin.layout.master')

@section('title', 'Students')

@section('body')
    <div class="page-header d-xl-flex d-block">
        <div class="page-leftheader">
            <h4 class="page-title">Import Student</h4>
        </div>
    </div>
    <div class="row container">
        <div class="col-xl-12 col-md-12 col-lg-12">
            <div class="card">
                <form id="import_student_with_column" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12 col-sm-12">
                                <label class="form-label">Import file *</label>
                                <input type="file" class="dropify" accept=".csv" name="uploaded_file"
                                    data-height="180" />
                                <div class="text-red" id="emoji-image-error"></div>
                                @error('file')
                                    <div class="text-red">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group-download with-button cust_download_sample_button">
                            <a href="{{ route('admin.download_file') }}" class="download_import_excel_file"
                                id="student_import_sample_template">
                                <input readonly="" value="Download template" type="text"
                                    class="cust_download_sample_input" id="student_download_template_name">
                                <div class="btn cust_download_sample_div" style="cursor: pointer;"><i
                                        class="icon-feather-download"></i></div>
                            </a>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success import-csv-file">Add</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="col-xl-12 col-md-12 col-lg-12 ">
            <div class="card student_mapping_field_content">
            </div>
        </div>
    </div>

    <div class="modal fade" id="error_popup" tabindex="-1" role="dialog" aria-labelledby="error_popup" aria-hidden="true">
        <div class="modal-dialog window-popup create-friend-group create-friend-group-1 csv_column_popup_content"
            role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="title">Errors detected in header</h6>
                </div>
                <div class="modal-body import_error_div">
                    <p>There are <span id="error_count" class="error_count"></span></p>
                    <hr>
                    <div class="error_messages_section">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $('#import_student_with_column').submit(function(e) {
            e.preventDefault();
            $('.import-csv-file').attr('disabled', 'disabled');

            var formData = new FormData($("#import_student_with_column")[0]);
            $.ajax({
                url: "{{ route('admin.check_bulk_student_header_validation') }}",
                contentType: false,
                processData: false,
                data: formData,
                type: 'post',
                success: function(response) {
                    var response = $.parseJSON(response);
                    if (response.status == 0) {
                        custom_message('error', response.message)
                    } else if (response.status == 1) {
                        $("#error_popup").modal('hide');
                        $(".student_mapping_field_content").html(response.html);
                        $("#student_mapping_popup").modal('show');
                    } else if (response.status == 2) {
                        $("#error_count").html(response.message);
                        $(".error_messages_section").html(response.html);
                        $("#error_popup").modal('show');
                    }
                }
            });
        });
    </script>
@endpush