@extends('layouts.app')

@section('title', 'Upload Attendance File')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('attendance.dashboard') }}">Attendance</a>
        <span class="separator">/</span>
        <span class="current">Upload File</span>
    </div>
@endsection

@section('content')
<div class="max-w-2xl mx-auto">
    <div class="mb-6">
        <h1 class="font-display text-2xl font-semibold text-gray-900">Upload Attendance File</h1>
        <p class="text-sm text-gray-500 mt-1">Upload a CSV or Excel file to bulk import attendance records.</p>
    </div>

    <div class="card">
        <div class="card-body space-y-6">
            {{-- Instructions --}}
            <div class="bg-primary-50 border border-primary-200 rounded-lg p-4">
                <h3 class="text-sm font-semibold text-primary-800 mb-2">File Requirements</h3>
                <ul class="text-sm text-primary-700 space-y-1">
                    <li>• Supported formats: <strong>.csv</strong>, <strong>.xlsx</strong>, <strong>.xls</strong></li>
                    <li>• Maximum file size: 10MB</li>
                    <li>• Must include employee codes and dates</li>
                    <li>• Existing records for the same employee + date will be <strong>overwritten</strong></li>
                    <li>• Time format: HH:MM (24h) or hh:mm AM/PM</li>
                    <li>• Date formats: DD/MM/YYYY, YYYY-MM-DD, or MM/DD/YYYY</li>
                </ul>
            </div>

            {{-- Download Template --}}
            <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div>
                    <p class="text-sm font-medium text-gray-700">Download Template</p>
                    <p class="text-xs text-gray-500">Get a sample CSV with the correct format</p>
                </div>
                <a href="{{ route('attendance.upload.template') }}" class="btn-secondary text-sm">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Download CSV
                </a>
            </div>

            {{-- Upload Form --}}
            <form action="{{ route('attendance.upload.preview') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div>
                    <label for="file" class="form-label">Select File <span class="text-danger-500">*</span></label>
                    <input type="file" name="file" id="file"
                        accept=".csv,.xlsx,.xls"
                        class="form-input @error('file') form-input-error @enderror" required>
                    @error('file')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center justify-between pt-5">
                    <a href="{{ route('attendance.upload.history') }}" class="btn-ghost">View Upload History</a>
                    <button type="submit" class="btn-primary">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                        Upload & Preview
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection