@extends('layouts.client')

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

@push('head')
@include('partials.analytics')
<style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
        }

        .glass-card {
            background: rgba(15, 23, 42, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(59, 130, 246, 0.2);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            border: none;
            font-weight: 600;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        }

        .btn-secondary {
            background: rgba(71, 85, 105, 0.8);
            color: #e2e8f0;
            padding: 12px 24px;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.3);
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .btn-secondary:hover {
            background: rgba(71, 85, 105, 1);
            border-color: rgba(148, 163, 184, 0.5);
            transform: translateY(-2px);
        }

        .text-primary { color: #60a5fa; }
        .text-secondary { color: #cbd5e1; }
        .text-muted { color: #94a3b8; }
        .text-success { color: #34d399; }
        .text-warning { color: #fbbf24; }
        .text-danger { color: #f87171; }
    </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">
            <div class="glass-card rounded-xl p-8">
                <!-- Studio 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>
                    <div class="text-secondary flex items-center justify-center space-x-6">
                        @if($studio->phone)
                            <span class="flex items-center">
                                <i class="fas fa-phone mr-2"></i>{{ $studio->phone }}
                            </span>
                        @endif
                        @if($studio->email)
                            <span class="flex items-center">
                                <i class="fas fa-envelope mr-2"></i>{{ $studio->email }}
                            </span>
                        @endif
                    </div>
                </div>

                <!-- Appointment Info -->
                <div class="glass-card p-6 mb-6">
                    <h2 class="text-2xl font-semibold text-primary mb-4">
                        <i class="fas fa-file-signature mr-2"></i>Digital Consent Form
                    </h2>
                    <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 Form 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 Checkboxes -->
                    <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('consent.submit', $consentLink->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>

                <!-- Link Expiry Notice -->
                <div class="text-center mt-6 text-muted text-sm">
                    <i class="fas fa-clock mr-2"></i>This link expires on {{ $consentLink->expires_at->format('F j, Y \a\t g:i A') }}
                </div>
            </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 support
            canvas.addEventListener('touchstart', function(e) {
                e.preventDefault();
                startDrawing(e);
            });

            canvas.addEventListener('touchmove', function(e) {
                e.preventDefault();
                draw(e);
            });

            canvas.addEventListener('touchend', function(e) {
                e.preventDefault();
                stopDrawing();
            });

            // Mouse events
            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