@include('./util/header')
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Employee CSV Import</h4>
            </div>
            <div class="card-body">
                <div >
                    @if(isset($message))
                        <div class="alert alert-{{ isset($hasErrors) && $hasErrors ? 'warning' : 'success' }} alert-dismissible fade show" role="alert">
                            {{ $message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if(isset($successCount) && $successCount > 0)
                        <div class="alert alert-success">
                            <strong>Success!</strong> {{ $successCount }} record(s) imported successfully.
                        </div>
                    @endif

                    <form action="{{ route('employee-import') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="mb-3">
                            <label for="csv_file" class="form-label">Select CSV File</label>
                            <input type="file" class="form-control" id="csv_file" name="csv_file" accept=".csv,.txt" required>
                            <small class="form-text text-muted">Maximum file size: 10MB. File must be in CSV format.</small>
                        </div>

                        <button type="submit" class="btn btn-primary">Import Employees</button>
                        <a href="{{ route('account') }}" class="btn btn-secondary">Back to Account</a>
                    </form>

                    @if(isset($employees) && $employees->count() > 0)
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">Imported Employees</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="employeeTable" class="table table-bordered table-striped dt-responsive nowrap w-100">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>First Name</th>
                                            <th>Last Name</th>
                                            <th>Email</th>
                                            <th>Date Added</th>
                                            <th>Group Code</th>
                                            <th>Active Record</th>
                                            <th>Admin Access</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($employees as $employee)
                                        <tr>
                                            <td>{{ $employee->id }}</td>
                                            <td>{{ $employee->firstName ?? '-' }}</td>
                                            <td>{{ $employee->lastName ?? '-' }}</td>
                                            <td>{{ $employee->email ?? '-' }}</td>
                                            <td>{{ $employee->dateAdded ? \Carbon\Carbon::parse($employee->dateAdded)->format('Y-m-d') : '-' }}</td>
                                            <td>{{ $employee->groupCode ?? '-' }}</td>
                                            <td>
                                                @if($employee->activeRecord == '1' || $employee->activeRecord == 1)
                                                    <span class="badge bg-success">Yes</span>
                                                @else
                                                    <span class="badge bg-danger">No</span>
                                                @endif
                                            </td>
                                            <td>
                                                @if($employee->adminAccess == '1' || $employee->adminAccess == 1)
                                                    <span class="badge bg-primary">Yes</span>
                                                @else
                                                    <span class="badge bg-secondary">No</span>
                                                @endif
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    @endif

                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title mb-0">CSV Format Requirements</h5>
                        </div>
                        <div class="card-body">
                            <p><strong>Required Fields:</strong></p>
                            <ul>
                                <li><code>userName</code> or <code>email</code> - Email address (must be unique)</li>
                                <li><code>firstName</code> - First name</li>
                                <li><code>lastName</code> - Last name</li>
                            </ul>

                            <p><strong>Optional Fields:</strong></p>
                            <ul>
                                <li><code>ID</code> - Will be ignored (auto-generated)</li>
                                <li><code>activeRecord</code> - Boolean (1/0, true/false) - Default: 1</li>
                                <li><code>dateAdded</code> - Date (YYYY-MM-DD format)</li>
                                <li><code>dateUpdated</code> - Date (YYYY-MM-DD format)</li>
                                <li><code>deletedByAdminID</code> - Integer</li>
                                <li><code>groupCode</code> - String</li>
                                <li><code>passWord</code> - Password (will be hashed, leave empty if not provided)</li>
                                <li><code>adminAccess</code> - Boolean (1/0, true/false) - Default: 0</li>
                                <li><code>webMasterAccess</code> - Boolean (1/0, true/false) - Default: 0</li>
                                <li><code>address</code> - String</li>
                                <li><code>address2</code> - String</li>
                                <li><code>city</code> - String</li>
                                <li><code>state</code> - String</li>
                                <li><code>zip</code> - String</li>
                                <li><code>country</code> - String</li>
                                <li><code>phoneNum</code> - String</li>
                                <li><code>faxNum</code> - String</li>
                                <li><code>notes</code> - Text</li>
                                <li><code>translatorAccess</code> - Boolean (1/0, true/false) - Default: 0</li>
                                <li><code>translatorLanguage</code> - String</li>
                            </ul>

                            <p><strong>Sample CSV Format:</strong></p>
                            <pre class="sample-csv-block p-3 rounded"><code>ID,activeRecord,dateAdded,dateUpdated,deletedByAdminID,groupCode,firstName,lastName,userName,passWord,adminAccess,webMasterAccess,address,address2,city,state,zip,country,phoneNum,faxNum,email,notes,translatorAccess,translatorLanguage
,1,2024-01-01,,,GRP001,John,Doe,john.doe@example.com,password123,0,0,123 Main St,Apt 4,New York,NY,10001,USA,555-1234,555-5678,john.doe@example.com,Employee notes,0,</code></pre>

                            <p class="text-muted mt-3">
                                <strong>Note:</strong> The CSV file must have a header row with column names. 
                                All rows will be processed, and errors will be displayed after the import completes.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if(isset($employees) && $employees->count() > 0)
<style>
    /* Employee Table Styling - Light Mode */
    #employeeTable {
        font-size: 0.9rem;
        color: #212529;
    }
    
    #employeeTable thead th {
        background: #f8f9fa;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: #495057;
        border-bottom: 2px solid #dee2e6;
        padding: 1rem 0.75rem;
    }
    
    #employeeTable tbody tr {
        transition: all 0.2s ease;
    }
    
    #employeeTable tbody tr:hover {
        background-color: #f8f9fa;
        transform: scale(1.01);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    #employeeTable tbody td {
        padding: 1rem 0.75rem;
        vertical-align: middle;
    }
    
    /* Dark Mode Styles */
    body[data-layout-mode="dark"] #employeeTable {
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] #employeeTable thead th {
        background: #323849;
        color: #adb5bd;
        border-bottom: 2px solid #3a4052;
    }

    body[data-layout-mode="dark"] #employeeTable tbody tr {
        background-color: #252b3b;
        border-color: #343b4f;
    }

    body[data-layout-mode="dark"] #employeeTable tbody td {
        border-top: 1px solid #343b4f;
    }
    
    body[data-layout-mode="dark"] #employeeTable tbody tr:nth-of-type(odd) {
        background-color: #202637;
    }
    
    body[data-layout-mode="dark"] #employeeTable tbody tr:hover {
        background-color: #3a4052;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    /* Dark Mode - DataTables Controls for Employee Table */
    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_length,
    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_filter,
    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_info,
    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_paginate {
        color: #adb5bd;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_filter input {
        background-color: #252b3b;
        border: 1px solid #3a4052;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_filter input::placeholder {
        color: #6c757d;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_filter input:focus {
        background-color: #2f3545;
        border-color: #4c78ff;
        box-shadow: 0 0 0 0.15rem rgba(76, 120, 255, 0.25);
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_length select {
        background-color: #252b3b;
        border: 1px solid #3a4052;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_length select:focus {
        background-color: #2f3545;
        border-color: #4c78ff;
        box-shadow: 0 0 0 0.15rem rgba(76, 120, 255, 0.25);
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_paginate .paginate_button {
        color: #adb5bd !important;
        border: 1px solid transparent;
        background-color: transparent;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_paginate .paginate_button.current {
        color: #fff !important;
        background: #4c78ff !important;
        border-color: #4c78ff !important;
        box-shadow: 0 0 0 0.15rem rgba(76, 120, 255, 0.35);
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_paginate .paginate_button:hover {
        color: #fff !important;
        background: #3a4052 !important;
        border-color: #4c78ff !important;
    }

    body[data-layout-mode="dark"] #employeeTable_wrapper .dataTables_paginate .paginate_button.disabled {
        color: #6c757d !important;
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none;
    }

    /* Dark Mode - Cards and Form Elements (scoped to page content) */
    body[data-layout-mode="dark"] .page-content .card {
        background-color: #252b3b;
        border-color: #343b4f;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] .page-content .card-header {
        background-color: #2f3545;
        border-bottom-color: #343b4f;
    }

    body[data-layout-mode="dark"] .page-content .card-title,
    body[data-layout-mode="dark"] .page-content .card-title-desc,
    body[data-layout-mode="dark"] .page-content .form-label {
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] .page-content .form-text.text-muted {
        color: #adb5bd !important;
    }

    body[data-layout-mode="dark"] .page-content .form-control {
        background-color: #252b3b;
        border-color: #343b4f;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] .page-content .form-control:focus {
        background-color: #2f3545;
        border-color: #4c78ff;
        box-shadow: 0 0 0 0.15rem rgba(76, 120, 255, 0.25);
    }

    body[data-layout-mode="dark"] .page-content .form-control::placeholder {
        color: #6c757d;
    }

    body[data-layout-mode="dark"] .page-content .alert {
        background-color: #2f3545;
        border-color: #3a4052;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] .page-content .alert.alert-success {
        border-left: 4px solid #28a745;
    }

    body[data-layout-mode="dark"] .page-content .alert.alert-danger,
    body[data-layout-mode="dark"] .page-content .alert.alert-warning {
        border-left: 4px solid #dc3545;
    }

    /* Dark Mode - Sample CSV Block */
    .sample-csv-block {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        font-size: 0.85rem;
        overflow-x: auto;
    }

    body[data-layout-mode="dark"] .sample-csv-block {
        background-color: #252b3b;
        border-color: #343b4f;
        color: #e9ecef;
    }

    body[data-layout-mode="dark"] .sample-csv-block code {
        color: #e9ecef;
    }
</style>

<script>
    $(document).ready(function() {
        // Initialize DataTable
        $('#employeeTable').DataTable({
            "order": [[4, "desc"]], // Sort by date added descending
            "pageLength": 10,
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            "language": {
                "search": "Search:",
                "lengthMenu": "Show _MENU_ entries",
                "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                "infoEmpty": "No entries found",
                "infoFiltered": "(filtered from _MAX_ total entries)",
                "paginate": {
                    "previous": "Previous",
                    "next": "Next"
                }
            },
            "dom": '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
            "responsive": true,
            "columnDefs": [
                { "orderable": true, "targets": [0, 1, 2, 3, 4, 5, 6, 7] },
                { "searchable": true, "targets": [0, 1, 2, 3, 5] }
            ]
        });
    });
</script>
@endif

@include('./util/footer')