@extends('layouts.app')

@section('title', 'Import Attendance')

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-gray-900">Import Attendance</h1>
                <p class="mt-1 text-sm text-gray-500">Import attendance data from CSV or Excel files</p>
            </div>
            <div class="mt-4 sm:mt-0">
                <a href="{{ route('attendance.daily-logs') }}" class="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                    <i class="fas fa-arrow-left mr-2"></i> Back to Daily Logs
                </a>
            </div>
        </div>
    </div>

    <!-- Import Form -->
    <div class="bg-white rounded-lg shadow p-6">
        <form method="POST" action="{{ route('attendance.import.store') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf
            
            <!-- File Upload -->
            <div>
                <label for="file" class="block text-sm font-medium text-gray-700 mb-2">
                    Select File <span class="text-red-500">*</span>
                </label>
                <input type="file" id="file" name="file" required
                       accept=".csv,.xlsx,.xls"
                       class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                @error('file')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Instructions -->
            <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
                <h3 class="text-sm font-medium text-blue-800 mb-2">
                    <i class="fas fa-info-circle mr-2"></i>Import Instructions
                </h3>
                <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
                    <li>Supported formats: CSV, XLSX, XLS</li>
                    <li>Maximum file size: 10MB</li>
                    <li>CSV format should have columns: email, date, punch_in_time, punch_out_time, notes</li>
                    <li>Date format: YYYY-MM-DD (e.g., 2024-01-15)</li>
                    <li>Time format: HH:MM:SS or HH:MM (e.g., 09:00:00 or 09:00)</li>
                    <li>Users must exist in the system (matched by email)</li>
                </ul>
            </div>

            <!-- Sample CSV Format -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4">
                <h3 class="text-sm font-medium text-gray-800 mb-2">
                    <i class="fas fa-file-csv mr-2"></i>Sample CSV Format
                </h3>
                <pre class="text-xs text-gray-600 bg-white p-3 rounded border overflow-x-auto">
email,date,punch_in_time,punch_out_time,notes
john@example.com,2024-01-15,09:00:00,17:30:00,Regular day
jane@example.com,2024-01-15,08:45:00,17:15:00,Early arrival
bob@example.com,2024-01-15,09:15:00,17:45:00,Late arrival</pre>
            </div>

            <!-- Submit Button -->
            <div class="flex justify-end">
                <button type="submit" class="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                    <i class="fas fa-upload mr-2"></i> Import Attendance
                </button>
            </div>
        </form>
    </div>

    <!-- Success/Error Messages -->
    @if(session('success'))
        <div class="bg-green-50 border border-green-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-green-800">Import Successful</h3>
                    <p class="mt-2 text-sm text-green-700">{{ session('success') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Import Error</h3>
                    <p class="mt-2 text-sm text-red-700">{{ session('error') }}</p>
                </div>
            </div>
        </div>
    @endif

    @if(session('errors') && count(session('errors')) > 0)
        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-triangle text-yellow-400"></i>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-yellow-800">Import Warnings</h3>
                    <ul class="mt-2 text-sm text-yellow-700 space-y-1">
                        @foreach(session('errors') as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection