@extends('layouts.client')

@section('title', 'Progress.Blade')

@section('content')
<div class="min-h-screen py-8 px-4">
        <div class="max-w-3xl mx-auto">
            <!-- Back to Dashboard -->
            <div class="mb-6">
                <a href="{{ route('appointment.show', $appointmentLink->token) }}" class="inline-flex items-center text-primary hover:text-[var(--stencil-deep)] transition-colors">
                    <i class="fas fa-arrow-left mr-2"></i>Back to Dashboard
                </a>
            </div>

            <div class="glass-card rounded-xl p-8">
                <!-- Header -->
                <div class="text-center mb-8 pb-6 border-b rule">
                    @if($studio->logo_url)
                        <img src="{{ $studio->logo_url }}" alt="Studio Logo" class="h-20 mx-auto mb-4 rounded-lg">
                    @endif
                    <h1 class="text-3xl font-bold text-primary mb-2">{{ $studio->studio_name ?: 'Tattoo Studio' }}</h1>
                    <p class="text-secondary">Upload Progress Photos</p>
                </div>

                <!-- Appointment Info -->
                <div class="glass-card p-6 mb-6">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <h3 class="text-lg font-medium text-secondary mb-2">Client Information</h3>
                            <p class="text-primary text-xl font-semibold">{{ $appointment->client->name }}</p>
                            <p class="text-secondary">{{ $appointment->client->email }}</p>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-secondary mb-2">Appointment Date</h3>
                            <p class="text-primary text-lg font-semibold">{{ $appointment->scheduled_at->format('F j, Y') }}</p>
                            <p class="text-secondary">{{ $appointment->scheduled_at->format('g:i A') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Progress Photos Form -->
                <form method="POST" action="{{ route('appointment.progress.submit', $appointmentLink->token) }}" enctype="multipart/form-data">
                    @csrf

                    <!-- Upload Instructions -->
                    <div class="glass-card p-6 mb-6 rule">
                        <h3 class="text-lg font-semibold text-primary mb-4">
                            <i class="fas fa-info-circle mr-2"></i>Photo Upload Instructions
                        </h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <h4 class="font-semibold text-success mb-2">Best Practices:</h4>
                                <ul class="space-y-1 text-secondary text-sm">
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Take photos in good lighting</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Keep camera steady</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Show entire tattoo area</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-check text-success mr-2 mt-1"></i>
                                        <span>Multiple angles if needed</span>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="font-semibold text-warning mb-2">File Requirements:</h4>
                                <ul class="space-y-1 text-secondary text-sm">
                                    <li class="flex items-start">
                                        <i class="fas fa-file-image text-warning mr-2 mt-1"></i>
                                        <span>JPG, PNG, or GIF format</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-weight text-warning mr-2 mt-1"></i>
                                        <span>Maximum 10MB per photo</span>
                                    </li>
                                    <li class="flex items-start">
                                        <i class="fas fa-images text-warning mr-2 mt-1"></i>
                                        <span>Up to 5 photos at once</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- File Upload Zone -->
                    <div class="mb-6">
                        <label class="block text-secondary font-semibold mb-4">Upload Progress Photos:</label>
                        <div class="upload-zone glass-card p-8 rounded-lg text-center">
                            <input type="file" id="photos" name="photos[]" multiple accept="image/*" class="hidden" required>
                            <div id="upload-content">
                                <i class="fas fa-cloud-upload-alt text-4xl text-primary mb-4"></i>
                                <p class="text-secondary mb-2">Drag and drop photos here or click to select</p>
                                <p class="text-muted text-sm">Maximum 5 photos, 10MB each</p>
                                <button type="button" onclick="document.getElementById('photos').click()" class="btn-primary mt-4">
                                    <i class="fas fa-folder-open mr-2"></i>Select Photos
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Selected Files Preview -->
                    <div id="file-preview" class="mb-6 hidden">
                        <h3 class="text-lg font-semibold text-secondary mb-4">Selected Photos:</h3>
                        <div id="preview-container" class="grid grid-cols-2 md:grid-cols-3 gap-4"></div>
                    </div>

                    <!-- Notes -->
                    <div class="mb-6">
                        <label for="notes" class="block text-secondary font-semibold mb-2">Notes (optional):</label>
                        <textarea
                            id="notes"
                            name="notes"
                            rows="4"
                            class="w-full p-3 glass-card rounded-lg border rule bg-transparent text-[var(--ink)] placeholder-gray-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-500/50 focus:outline-none resize-none"
                            placeholder="Any notes about the healing progress, concerns, or questions..."
                        ></textarea>
                    </div>

                    <!-- Submit Button -->
                    <div class="text-center">
                        <button type="submit" class="btn-primary w-full" id="submit-btn" disabled>
                            <i class="fas fa-upload mr-2"></i>Upload Progress Photos
                        </button>
                    </div>
                </form>

                <!-- Previously Uploaded Photos -->
                @if(!empty($appointmentLink->metadata['progress_photos']))
                    <div class="mt-8 pt-6 border-t rule">
                        <h3 class="text-lg font-semibold text-secondary mb-4">Previously Uploaded Photos:</h3>
                        <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
                            @foreach($appointmentLink->metadata['progress_photos'] as $photo)
                                <div class="glass-card p-2 rounded-lg">
                                    <img src="{{ Storage::url($photo['path']) }}" alt="Progress Photo" class="w-full h-32 object-cover rounded-lg mb-2">
                                    <p class="text-muted text-xs">{{ \Carbon\Carbon::parse($photo['uploaded_at'])->format('M j, Y g:i A') }}</p>
                                    @if(!empty($photo['notes']))
                                        <p class="text-secondary text-xs mt-1">{{ $photo['notes'] }}</p>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Contact Information -->
                <div class="mt-6 pt-6 border-t rule">
                    <h3 class="text-lg font-semibold text-secondary mb-4">Questions? Contact Us</h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @if($studio->phone)
                            <div class="flex items-center">
                                <i class="fas fa-phone text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Phone</p>
                                    <p class="text-primary font-semibold">{{ $studio->phone }}</p>
                                </div>
                            </div>
                        @endif
                        @if($studio->email)
                            <div class="flex items-center">
                                <i class="fas fa-envelope text-primary mr-3"></i>
                                <div>
                                    <p class="text-secondary">Email</p>
                                    <p class="text-primary font-semibold">{{ $studio->email }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        const fileInput = document.getElementById('photos');
        const uploadZone = document.querySelector('.upload-zone');
        const filePreview = document.getElementById('file-preview');
        const previewContainer = document.getElementById('preview-container');
        const submitBtn = document.getElementById('submit-btn');
        const uploadContent = document.getElementById('upload-content');

        // Handle file selection
        fileInput.addEventListener('change', handleFiles);

        // Handle drag and drop
        uploadZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            uploadZone.classList.add('dragover');
        });

        uploadZone.addEventListener('dragleave', () => {
            uploadZone.classList.remove('dragover');
        });

        uploadZone.addEventListener('drop', (e) => {
            e.preventDefault();
            uploadZone.classList.remove('dragover');
            const files = e.dataTransfer.files;
            fileInput.files = files;
            handleFiles();
        });

        function handleFiles() {
            const files = fileInput.files;
            if (files.length > 0) {
                displayPreview(files);
                submitBtn.disabled = false;
            } else {
                filePreview.classList.add('hidden');
                submitBtn.disabled = true;
            }
        }

        function displayPreview(files) {
            previewContainer.innerHTML = '';

            if (files.length > 5) {
                alert('Maximum 5 photos allowed');
                fileInput.value = '';
                return;
            }

            for (let i = 0; i < files.length; i++) {
                const file = files[i];

                if (file.size > 10 * 1024 * 1024) {
                    alert(`File ${file.name} is too large. Maximum 10MB allowed.`);
                    fileInput.value = '';
                    return;
                }

                const reader = new FileReader();
                reader.onload = (e) => {
                    const previewItem = document.createElement('div');
                    previewItem.className = 'glass-card p-2 rounded-lg';
                    previewItem.innerHTML = `
                        <img src="${e.target.result}" alt="Preview" class="w-full h-32 object-cover rounded-lg mb-2">
                        <p class="text-muted text-xs truncate">${file.name}</p>
                        <p class="text-secondary text-xs">${(file.size / 1024 / 1024).toFixed(1)}MB</p>
                    `;
                    previewContainer.appendChild(previewItem);
                };
                reader.readAsDataURL(file);
            }

            filePreview.classList.remove('hidden');
        }

        // Auto-expand textarea
        const textarea = document.getElementById('notes');
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = (this.scrollHeight) + 'px';
        });
    </script>
@endpush