@extends('layouts.client')

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

@push('head')
<style>
        /* Signature pad specific styles */
        .signature-pad {
            border: 2px solid rgba(59, 130, 246, 0.3);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.9);
            cursor: crosshair;
        }

        .signature-pad:focus {
            border-color: #3b82f6;
            outline: none;
        }
    </style>
@endpush

@section('content')
<div class="min-h-screen flex items-center justify-center py-8 px-4">
        <div class="w-full max-w-4xl">
            <!-- 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">Digital Consent Form</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>
                            <p class="text-secondary">{{ $appointment->client->phone }}</p>
                        </div>
                        <div>
                            <h3 class="text-lg font-medium text-secondary mb-2">Appointment Details</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>
                            @if($appointment->notes)
                                <p class="text-muted text-sm mt-2">{{ $appointment->notes }}</p>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Consent Content -->
                <div class="glass-card p-6 mb-6">
                    <h3 class="text-xl font-semibold text-primary mb-4">Consent Agreement</h3>
                    <div class="bg-[var(--paper)] p-6 rounded-lg border rule mb-6 max-h-96 overflow-y-auto">
                        <div class="text-secondary space-y-4 text-sm leading-relaxed">
                            <p><strong class="text-primary">INFORMED CONSENT FOR TATTOOING</strong></p>

                            <p>I understand that tattooing is a form of body modification that involves the insertion of pigment into the dermis layer of the skin. I acknowledge that I have received information about the tattooing process, aftercare instructions, and potential risks.</p>

                            <p><strong class="text-primary">RISKS AND COMPLICATIONS:</strong></p>
                            <ul class="list-disc list-inside space-y-1 ml-4">
                                <li>Infection (bacterial, viral, or fungal)</li>
                                <li>Allergic reactions to tattoo pigments</li>
                                <li>Scarring or keloid formation</li>
                                <li>Blood-borne pathogen transmission</li>
                                <li>Nerve damage or numbness</li>
                                <li>Unsatisfactory appearance or color variation</li>
                            </ul>

                            <p><strong class="text-primary">HEALTH VERIFICATION:</strong></p>
                            <p>I confirm that I have disclosed all relevant medical conditions, allergies, medications, and pregnancy status. I understand that failure to disclose this information may result in complications.</p>

                            <p><strong class="text-primary">AFTERCARE:</strong></p>
                            <p>I agree to follow all provided aftercare instructions and understand that proper healing depends on my compliance with these instructions.</p>

                            <p><strong class="text-primary">LEGAL AGREEMENT:</strong></p>
                            <p>I am at least 18 years old and providing this consent voluntarily. I release the artist and studio from any liability related to this procedure.</p>

                            <p><strong class="text-primary">FINAL DESIGN APPROVAL:</strong></p>
                            <p>I understand that the final design and placement will be approved at the studio before the procedure begins.</p>
                        </div>
                    </div>

                    <!-- Health Verification -->
                    <div class="space-y-4 mb-6">
                        <h4 class="text-lg font-semibold text-primary">Health Verification</h4>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" required class="w-4 h-4 text-[var(--stencil)] bg-[var(--surface)] rule rounded focus:ring-blue-500">
                                <span class="text-secondary">I am at least 18 years old</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" required class="w-4 h-4 text-[var(--stencil)] bg-[var(--surface)] rule rounded focus:ring-blue-500">
                                <span class="text-secondary">I am not pregnant or nursing</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" required class="w-4 h-4 text-[var(--stencil)] bg-[var(--surface)] rule rounded focus:ring-blue-500">
                                <span class="text-secondary">I have no known allergies to tattoo ink</span>
                            </label>
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" required class="w-4 h-4 text-[var(--stencil)] bg-[var(--surface)] rule rounded focus:ring-blue-500">
                                <span class="text-secondary">I am not under the influence of drugs/alcohol</span>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Signature Section -->
                <form method="POST" action="{{ route('appointment.consent.submit', $appointmentLink->token) }}" id="consent-form">
                    @csrf
                    <div class="glass-card p-6">
                        <h3 class="text-xl font-semibold text-primary mb-4">
                            <i class="fas fa-signature mr-2"></i>Digital Signature
                        </h3>
                        <p class="text-secondary mb-6">By signing below, I acknowledge that I have read and understood this consent form and agree to proceed with the tattoo procedure.</p>

                        <div class="bg-white rounded-lg p-4 mb-6">
                            <label for="signature-pad" class="block font-medium text-gray-700 mb-2">Please sign here:</label>
                            <canvas id="signature-pad" class="border-2 border-gray-300 w-full h-40 rounded cursor-crosshair"></canvas>
                            <input type="hidden" name="signature" id="signature-input">
                        </div>

                        <div class="mb-6">
                            <label class="flex items-center space-x-3">
                                <input type="checkbox" name="agree_terms" required class="w-4 h-4 text-[var(--stencil)] bg-[var(--surface)] rule rounded focus:ring-blue-500">
                                <span class="text-secondary">I agree to the terms and conditions outlined in this consent form</span>
                            </label>
                        </div>

                        <div class="flex justify-between items-center">
                            <button type="button" id="clear-button" class="btn-secondary">
                                <i class="fas fa-eraser mr-2"></i>Clear Signature
                            </button>
                            <button type="submit" class="btn-primary" disabled id="submit-button">
                                <i class="fas fa-signature mr-2"></i>Submit Consent Form
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
        document.addEventListener('DOMContentLoaded', function() {
            const canvas = document.getElementById('signature-pad');
            const ctx = canvas.getContext('2d');
            const clearButton = document.getElementById('clear-button');
            const submitButton = document.getElementById('submit-button');
            const form = document.getElementById('consent-form');
            const checkboxes = document.querySelectorAll('input[type="checkbox"]');

            let drawing = false;
            let hasSignature = false;

            // Set canvas size
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;

            // Drawing functions
            function startDrawing(e) {
                drawing = true;
                ctx.beginPath();
                const rect = canvas.getBoundingClientRect();
                const x = (e.clientX || e.touches[0].clientX) - rect.left;
                const y = (e.clientY || e.touches[0].clientY) - rect.top;
                ctx.moveTo(x, y);
            }

            function draw(e) {
                if (!drawing) return;
                const rect = canvas.getBoundingClientRect();
                const x = (e.clientX || e.touches[0].clientX) - rect.left;
                const y = (e.clientY || e.touches[0].clientY) - rect.top;
                ctx.lineTo(x, y);
                ctx.stroke();
                hasSignature = true;
                checkFormValidity();
            }

            function stopDrawing() {
                drawing = false;
            }

            // Touch and mouse events
            canvas.addEventListener('touchstart', (e) => { e.preventDefault(); startDrawing(e); });
            canvas.addEventListener('touchmove', (e) => { e.preventDefault(); draw(e); });
            canvas.addEventListener('touchend', (e) => { e.preventDefault(); stopDrawing(); });
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseleave', stopDrawing);

            // Clear signature
            clearButton.addEventListener('click', function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                hasSignature = false;
                checkFormValidity();
            });

            // Check form validity
            function checkFormValidity() {
                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                submitButton.disabled = !(allChecked && hasSignature);
            }

            // Listen for checkbox changes
            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', checkFormValidity);
            });

            // Form submission
            form.addEventListener('submit', function(e) {
                if (!hasSignature) {
                    e.preventDefault();
                    alert('Please provide your signature before submitting.');
                    return;
                }

                const dataURL = canvas.toDataURL();
                document.getElementById('signature-input').value = dataURL;
            });
        });
    </script>
@endpush