@extends('layouts.clinic-admin')

@section('title', 'Import Nurse Management Data')

@section('content')
<div class="container mx-auto px-4 py-8">

    <!-- Page Header -->
    <div class="bg-white rounded-xl shadow-lg p-8 mb-8 border-t-4 border-[#9B5372]">
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between">
            <div class="flex items-center mb-4 md:mb-0">
                <div class="bg-gradient-to-br from-[#9B5372] to-[#7A4159] rounded-full w-16 h-16 flex items-center justify-center mr-4 shadow-lg">
                    <i class="fas fa-file-csv text-white text-2xl"></i>
                </div>
                <div>
                    <h1 class="text-3xl font-bold text-gray-900">Import Nurse Management Data</h1>
                    <p class="text-gray-600 mt-1">
                        <i class="fas fa-hospital mr-1"></i>{{ $clinic->name }}
                    </p>
                </div>
            </div>
            <div class="flex gap-3">
                <a href="{{ route('clinic-admin.nurse-management') }}" 
                   class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-lg font-semibold shadow-md transition-all duration-200 inline-flex items-center">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Nurse Management
                </a>
            </div>
        </div>
    </div>

    <style>
        :root {
            --primary: #9B5372;
            --primary-dark: #7A4159;
            --primary-light: #C97A9A;
            --secondary: #6A89CC;
            --accent: #FF9F68;
            --background: #F8F9ED;
            --card-bg: #ffffff;
        }

        .card {
            background: var(--card-bg);
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .btn-primary {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px -1px rgba(155, 83, 114, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 15px -3px rgba(155, 83, 114, 0.4);
        }

        .btn-primary:active {
            transform: translateY(0);
        }

        .info-box {
            background: linear-gradient(135deg, #EBF4FF 0%, #E0F2FE 100%);
            border-left: 4px solid #3B82F6;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .success-box {
            background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
            border-left: 4px solid #10B981;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .warning-box {
            background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
            border-left: 4px solid #F59E0B;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .step-card {
            position: relative;
            padding-left: 3rem;
        }

        .step-number {
            position: absolute;
            left: 0;
            top: 0;
            width: 2.5rem;
            height: 2.5rem;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.25rem;
            box-shadow: 0 4px 6px -1px rgba(155, 83, 114, 0.3);
        }
    </style>

    <!-- Instructions Card -->
    <div class="card p-8 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-info-circle text-blue-600 mr-3"></i>
            How to Import Nurse Data
        </h2>
        
        <div class="space-y-6">
            <!-- Step 1 -->
            <div class="step-card">
                <div class="step-number">1</div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Download the CSV Template</h3>
                <p class="text-gray-600 mb-3">
                    Download our pre-formatted CSV template to ensure your data is in the correct format.
                </p>
            </div>

            <!-- Step 2 -->
            <div class="step-card">
                <div class="step-number">2</div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Fill in Nurse Details</h3>
                <p class="text-gray-600 mb-3">
                    Open the template in Excel or any spreadsheet application and fill in the required information for each nurse.
                </p>
                <div class="bg-gray-50 rounded-lg p-4 mt-3">
                    <p class="text-sm font-semibold text-gray-700 mb-2">Required Fields:</p>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-600 mr-2"></i><strong>staff_id</strong> - Unique staff identifier (e.g., N001, N002)</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i><strong>name</strong> - Full name of the nurse</li>
                        <li><i class="fas fa-check text-green-600 mr-2"></i><strong>email</strong> - Valid email address (must be unique)</li>
                    </ul>
                    <p class="text-sm font-semibold text-gray-700 mt-3 mb-2">Optional Fields:</p>
                    <ul class="text-sm text-gray-600 space-y-1">
                        <li><i class="fas fa-circle text-blue-400 text-xs mr-2"></i><strong>phone</strong> - Contact phone number</li>
                    </ul>
                </div>
            </div>

            <!-- Step 3 -->
            <div class="step-card">
                <div class="step-number">3</div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Upload Your CSV File</h3>
                <p class="text-gray-600 mb-3">
                    Save your file as CSV format and upload it using the form below. Maximum file size: 2MB.
                </p>
            </div>

            <!-- Step 4 -->
            <div class="step-card">
                <div class="step-number">4</div>
                <h3 class="text-lg font-semibold text-gray-900 mb-2">Review & Import</h3>
                <p class="text-gray-600 mb-3">
                    Review the preview of your data, then click "Import" to add the nurses to your clinic.
                </p>
            </div>
        </div>

        <!-- Important Notes -->
        <div class="mt-8">
            <div class="warning-box">
                <div class="flex items-start">
                    <i class="fas fa-exclamation-triangle text-amber-600 text-xl mr-3 mt-1"></i>
                    <div>
                        <h4 class="font-semibold text-amber-900 mb-2">Important Notes:</h4>
                        <ul class="text-sm text-amber-800 space-y-1">
                            <li>• All imported nurses will be assigned to your clinic: <strong>{{ $clinic->name }}</strong></li>
                            <li>• Default password for all nurses: <strong>Nurse123</strong></li>
                            <li>• Nurses must change their password on first login</li>
                            <li>• Email addresses must be unique across the system</li>
                            <li>• Staff IDs must be unique within your file</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- CSV Import Component -->
    <div class="card p-8">
        <livewire:clinic-admin.nurse-csv-import />
    </div>

    <!-- Sample Data Example -->
    <div class="card p-8 mt-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-table text-purple-600 mr-3"></i>
            CSV Format Example
        </h2>
        
        <div class="info-box">
            <div class="flex items-start">
                <i class="fas fa-lightbulb text-blue-600 text-xl mr-3 mt-1"></i>
                <div>
                    <h4 class="font-semibold text-blue-900 mb-2">Example CSV Content:</h4>
                    <p class="text-sm text-blue-800 mb-3">
                        Your CSV file should look like this (without the line numbers):
                    </p>
                </div>
            </div>
        </div>

        <div class="bg-gray-900 rounded-lg p-6 overflow-x-auto">
            <pre class="text-green-400 font-mono text-sm"><code>staff_id,name,email,phone
N001,Nurse Sarah Johnson,sarah.johnson@clinic.com,0123456789
N002,Nurse Maria Santos,maria.santos@clinic.com,0129876543
N003,Nurse Ahmad Bin Ali,ahmad.ali@clinic.com,0138765432
N004,Nurse Siti Nurhaliza,siti.nur@clinic.com,0147654321</code></pre>
        </div>

        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="bg-green-50 rounded-lg p-4 border border-green-200">
                <h4 class="font-semibold text-green-900 mb-2 flex items-center">
                    <i class="fas fa-check-circle text-green-600 mr-2"></i>
                    Good Examples
                </h4>
                <ul class="text-sm text-green-800 space-y-1">
                    <li>• N001, N002, SN001 (unique staff IDs)</li>
                    <li>• john.doe@clinic.com (valid email)</li>
                    <li>• 0123456789, +60123456789 (phone formats)</li>
                </ul>
            </div>
            <div class="bg-red-50 rounded-lg p-4 border border-red-200">
                <h4 class="font-semibold text-red-900 mb-2 flex items-center">
                    <i class="fas fa-times-circle text-red-600 mr-2"></i>
                    Bad Examples
                </h4>
                <ul class="text-sm text-red-800 space-y-1">
                    <li>• Duplicate staff IDs (N001 used twice)</li>
                    <li>• Invalid email (john@) or missing @</li>
                    <li>• Missing required fields (empty cells)</li>
                </ul>
            </div>
        </div>
    </div>

</div>
@endsection