@canany(['hr_manager_hq', 'employees'])

    @extends('adminlte::page')

    @section('title', config('adminlte.title') . ' | Employees Bulk Import')

@section('content_header')
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6 m-0 text-dark">
                <h1>Import Employees</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.index') }}">Admin</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.employees.index') }}">Employees</a></li>
                    <li class="breadcrumb-item active">Bulk Import</li>
                </ol>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" />
    <style>
        /* Light mode dropzone */
        body:not(.dark-mode) .dropzone {
            background: #ffffff !important;
            border: 2px dashed #dee2e6 !important;
        }

        body:not(.dark-mode) .dropzone .dz-message {
            color: #495057 !important;
        }

        body:not(.dark-mode) .dropzone .dz-preview .dz-details {
            background: #f8f9fa !important;
        }

        /* Dark mode dropzone */
        body.dark-mode .dropzone {
            background: #454d55 !important;
            border: 2px dashed #6c757d !important;
        }

        body.dark-mode .dropzone .dz-message {
            color: #ffffff !important;
        }

        body.dark-mode .dropzone .dz-preview .dz-details {
            background: #343a40 !important;
        }

        .dropzone .dz-preview.dz-error .dz-error-message {
            background: #dc3545 !important;
        }

        .dropzone .dz-preview.dz-error .dz-error-message,
        .dropzone .dz-preview.dz-error .dz-error-mark {
            display: block;
        }

        /* Dark mode select boxes in table */
        body.dark-mode select.form-control-sm {
            background-color: #3a4047 !important;
            color: #ffffff !important;
            border-color: #6c757d !important;
        }

        body.dark-mode select.form-control-sm option {
            background-color: #343a40 !important;
            color: #ffffff !important;
        }
    </style>
@stop

@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Upload CSV File</h3>
                </div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    <div id="error-container" style="display: none;">
                        <div class="alert alert-danger">
                            <ul id="error-list">
                            </ul>
                        </div>
                    </div>

                    <div class="text-center mb-3">
                        <p class="text-muted">Supported file types: CSV | Maximum file size: 2MB</p>
                    </div>
                    <form action="{{ route('admin.employees.bulk_review') }}" method="POST" enctype="multipart/form-data"
                        id="csv-import-form" class="dropzone">
                        @csrf
                        <div class="fallback">
                            <input name="csv_file" type="file" />
                        </div>
                    </form>
                    <div class="text-center mt-3">
                        <button type="button" id="upload-button" class="btn btn-primary btn-lg">
                            <i class="fas fa-upload"></i> Upload and Review
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-4" id="review-section" style="display: none;">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Review Import Data</h3>
                    <div class="card-tools">
                        <span id="total-rows-badge" class="badge badge-info"></span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="icon fas fa-info-circle"></i>
                        <strong>Instructions:</strong> Showing first 10 rows for preview. Select Company, Department,
                        Division, Role, Team and Location
                        for each employee row before importing.
                    </div>

                    <form action="{{ route('admin.employees.bulk_store') }}" method="POST" id="confirm-import-form">
                        @csrf
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-sm"
                                style="width: 100%; table-layout: auto !important;">
                                <thead id="review-table-head"></thead>
                                <tbody id="review-table-body"></tbody>
                            </table>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn btn-success btn-lg mr-4">
                                <i class="fas fa-check"></i> Confirm Import
                            </button>
                            <button type="button" class="btn btn-secondary btn-lg" id="cancel-import">
                                <i class="fas fa-times"></i> Cancel
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('footer')
    &nbsp;
@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>
    <script>
        // Ensure Dropzone is loaded
        if (typeof Dropzone === 'undefined') {
            console.error('Dropzone not loaded! Please check your internet connection.');
            alert('Failed to load file upload component. Please refresh the page or check your internet connection.');
        }

        // Disable auto discover for all elements
        Dropzone.autoDiscover = false;

        // Initialize Dropzone with custom configuration
        var myDropzone = new Dropzone("#csv-import-form", {
            paramName: "csv_file",
            maxFilesize: 2, // MB
            acceptedFiles: '.csv,.txt',
            autoProcessQueue: false,
            maxFiles: 1,
            addRemoveLinks: true,
            dictDefaultMessage: '<i class="fas fa-file-upload fa-2x"></i><br>Drop your CSV file here or click to upload',
            dictFileTooBig: function(file) {
                return 'File is too big (' + (file.size / (1024 * 1024)).toFixed(1) + 'MB). Max filesize: 2MB.';
            },
            dictInvalidFileType: 'Only CSV files are allowed.',
            dictResponseError: function(statusCode) {
                return 'Server responded with ' + statusCode + ' code.';
            },
            dictCancelUpload: 'Cancel upload',
            dictUploadCanceled: 'Upload canceled.',
            dictRemoveFile: 'Remove file',
            dictMaxFilesExceeded: 'You can only upload one file at a time.',
            createImageThumbnails: false,
            init: function() {
                var dz = this;

                this.on("success", function(file, response) {
                    console.log('Upload successful', response);

                    $('#review-section').show();
                    $('#total-rows-badge').text('Total Rows: ' + response.total_rows);

                    // Build table headers
                    let head = '<tr>';
                    head += '<th style="width: 50px;">#</th>';
                    response.headers.forEach(header => {
                        head += '<th>' + header + '</th>';
                    });
                    head += '<th style="min-width: 200px;">Company</th>';
                    head += '<th style="min-width: 200px;">Department</th>';
                    head += '<th style="min-width: 200px;">Division</th>';
                    head += '<th style="min-width: 200px;">Role</th>';
                    head += '<th style="min-width: 200px;">Team</th>';
                    head += '<th style="min-width: 200px;">Location</th>';
                    head += '</tr>';
                    $('#review-table-head').html(head);

                    // Build table body with dropdowns
                    let body = '';
                    response.data.forEach((row, index) => {
                        body += '<tr>';
                        body += '<td>' + (index + 1) + '</td>';

                        response.headers.forEach(header => {
                            let value = row[header] || '';
                            body += '<td>' + value + '</td>';
                        });

                        // Company dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][company_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Company --</option>';
                        @foreach ($companies as $company)
                            body +=
                                '<option value="{{ $company->id }}">{{ $company->companyname }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        // Department dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][department_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Department --</option>';
                        @foreach ($departments as $department)
                            body +=
                                '<option value="{{ $department->id }}">{{ $department->departmentname }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        // Division dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][division_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Division --</option>';
                        @foreach ($divisions as $division)
                            body +=
                                '<option value="{{ $division->id }}">{{ $division->divisionname }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        // Role dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][role_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Role --</option>';
                        @foreach ($roles as $role)
                            body +=
                                '<option value="{{ $role->id }}">{{ $role->rolename }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        // Team dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][team_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Team --</option>';
                        @foreach ($teams as $team)
                            body +=
                                '<option value="{{ $team->id }}">{{ $team->team }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        // Location dropdown
                        body += '<td>';
                        body += '<select name="mappings[' + index +
                            '][location_id]" class="form-control form-control-sm">';
                        body += '<option value="">-- Select Location --</option>';
                        @foreach ($locations as $location)
                            body +=
                                '<option value="{{ $location->id }}">{{ $location->locationname }}</option>';
                        @endforeach
                        body += '</select>';
                        body += '</td>';

                        body += '</tr>';
                    });
                    $('#review-table-body').html(body);

                    // Scroll to review section
                    $('html, body').animate({
                        scrollTop: $("#review-section").offset().top - 100
                    }, 500);

                    // Remove the uploaded file from dropzone
                    dz.removeAllFiles();
                    $('#upload-button').show();
                });

                this.on("error", function(file, errorMessage) {
                    let errors = [];
                    if (typeof errorMessage === 'object') {
                        if (errorMessage.errors) {
                            // Handle Laravel validation errors
                            Object.keys(errorMessage.errors).forEach(function(key) {
                                errorMessage.errors[key].forEach(function(error) {
                                    errors.push(error);
                                });
                            });
                        } else if (errorMessage.message) {
                            errors.push(errorMessage.message);
                        }
                    } else if (typeof errorMessage === 'string') {
                        errors.push(errorMessage);
                    } else {
                        errors.push('Upload failed');
                    }

                    // Display errors in the error container
                    const errorList = document.getElementById('error-list');
                    errorList.innerHTML = errors.map(error => `<li>${error}</li>`).join('');
                    document.getElementById('error-container').style.display = 'block';

                    // Scroll to error container
                    document.getElementById('error-container').scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });

                    this.removeFile(file);
                });

                this.on("addedfile", function(file) {
                    // Remove previous files if any
                    if (this.files.length > 1) {
                        this.removeFile(this.files[0]);
                    }
                });
            }
        });

        $("#upload-button").click(function() {
            if (myDropzone.files.length === 0) {
                alert('Please select a CSV file first');
                return;
            }

            // Clear any previous errors
            document.getElementById('error-list').innerHTML = '';
            document.getElementById('error-container').style.display = 'none';

            myDropzone.processQueue();
            $(this).hide();
        });

        $("#cancel-import").click(function() {
            if (confirm('Are you sure you want to cancel this import?')) {
                $('#review-section').hide();
                $('#upload-button').show();
                myDropzone.removeAllFiles();
            }
        });

        /*
         // Form validation before submit
        $("#confirm-import-form").submit(function(e) {
            var confirmed = confirm('Are you sure you want to import all employees? This action cannot be undone.');
            if (!confirmed) {
                e.preventDefault();
                return false;
            }

            // Show loading indicator
            $(this).find('button[type="submit"]').prop('disabled', true).html(
                '<i class="fas fa-spinner fa-spin"></i> Importing...');
        });
        */
        // Form validation before submit
        $("#confirm-import-form").submit(function(e) {
            e.preventDefault();
            alert(
                'Coming soon! This feature is currently being enhanced to support additional company data requirements.'
            );
            return false;
        });
    </script>
@stop

@endcanany