@extends('crm.layouts.app')

@section('title', 'Body Sketch Tool')

@section('content')
<div class="min-h-screen bg-gray-50 pb-8">
    <!-- Header -->
    <div class="mb-6">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div>
                <nav class="flex mb-4" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="{{ route('crm.appointments.index') }}" class="text-sm font-medium text-gray-700 hover:text-indigo-600">
                                Appointments
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-1 text-sm font-medium text-gray-500">Sketch Tool</span>
                            </div>
                        </li>
                    </ol>
                </nav>
                <h1 class="text-2xl font-bold text-gray-900">Body Sketch Tool</h1>
                <p class="mt-1 text-sm text-gray-600">Draw and plan tattoo placement for {{ $appointment->client->name }}</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
        <!-- Tools Sidebar -->
        <div class="lg:col-span-1">
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg p-4 space-y-4">
                <h3 class="font-semibold text-gray-900">Drawing Tools</h3>

                <!-- View Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Body View</label>
                    <div class="grid grid-cols-2 gap-2">
                        <button id="view-front" onclick="switchView('front')" class="view-btn active px-3 py-2 text-sm font-medium rounded-md bg-indigo-600 text-white">
                            Front
                        </button>
                        <button id="view-back" onclick="switchView('back')" class="view-btn px-3 py-2 text-sm font-medium rounded-md bg-gray-200 text-gray-700">
                            Back
                        </button>
                    </div>
                </div>

                <!-- Tool Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Tool</label>
                    <div class="space-y-2">
                        <button onclick="setTool('pen')" class="tool-btn active w-full flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-600 text-white">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                            Pen
                        </button>
                        <button onclick="setTool('eraser')" class="tool-btn w-full flex items-center px-3 py-2 text-sm font-medium rounded-md bg-gray-200 text-gray-700">
                            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                            Eraser
                        </button>
                    </div>
                </div>

                <!-- Color Selection -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Color</label>
                    <div class="grid grid-cols-5 gap-2">
                        <button onclick="setColor('#000000')" class="w-8 h-8 rounded-full bg-black border-2 border-gray-300"></button>
                        <button onclick="setColor('#EF4444')" class="w-8 h-8 rounded-full bg-red-500 border-2 border-gray-300"></button>
                        <button onclick="setColor('#3B82F6')" class="w-8 h-8 rounded-full bg-blue-500 border-2 border-gray-300"></button>
                        <button onclick="setColor('#10B981')" class="w-8 h-8 rounded-full bg-green-500 border-2 border-gray-300"></button>
                        <button onclick="setColor('#F59E0B')" class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-gray-300"></button>
                    </div>
                </div>

                <!-- Line Width -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Line Width</label>
                    <input type="range" id="line-width" min="1" max="20" value="3" onchange="setLineWidth(this.value)" class="w-full">
                    <div class="text-center text-xs text-gray-500 mt-1">
                        <span id="width-display">3</span>px
                    </div>
                </div>

                <!-- Actions -->
                <div class="pt-4 border-t border-gray-200 space-y-2">
                    <button onclick="clearCanvas()" class="w-full px-3 py-2 text-sm font-medium rounded-md bg-red-600 text-white hover:bg-red-700">
                        Clear All
                    </button>
                    <button onclick="saveSketch()" class="w-full px-3 py-2 text-sm font-medium rounded-md bg-green-600 text-white hover:bg-green-700">
                        Save Sketch
                    </button>
                    <a href="{{ route('crm.appointments.edit', $appointment) }}" class="block w-full px-3 py-2 text-sm font-medium rounded-md bg-gray-200 text-gray-700 hover:bg-gray-300 text-center">
                        Back to Appointment
                    </a>
                </div>
            </div>
        </div>

        <!-- Canvas Area -->
        <div class="lg:col-span-3">
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg p-6">
                <div class="relative" style="max-width: 600px; margin: 0 auto;">
                    <!-- Body Outlines (will switch between front/back) -->
                    <div id="body-front" class="body-outline">
                        <svg viewBox="0 0 400 800" style="width: 100%; height: auto;">
                            <!-- Simple front body outline -->
                            <ellipse cx="200" cy="80" rx="50" ry="60" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Head -->
                            <rect x="175" y="140" width="50" height="100" rx="10" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Torso -->
                            <rect x="160" y="240" width="80" height="120" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Hips -->
                            <!-- Arms -->
                            <rect x="120" y="140" width="30" height="150" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Left arm -->
                            <rect x="250" y="140" width="30" height="150" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Right arm -->
                            <!-- Legs -->
                            <rect x="165" y="360" width="30" height="200" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Left leg -->
                            <rect x="205" y="360" width="30" height="200" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Right leg -->
                        </svg>
                    </div>

                    <div id="body-back" class="body-outline hidden">
                        <svg viewBox="0 0 400 800" style="width: 100%; height: auto;">
                            <!-- Simple back body outline -->
                            <ellipse cx="200" cy="80" rx="50" ry="60" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Head -->
                            <rect x="175" y="140" width="50" height="100" rx="10" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Back -->
                            <rect x="160" y="240" width="80" height="120" rx="15" fill="none" stroke="#ddd" stroke-width="2"/> <!-- Lower back -->
                            <!-- Arms -->
                            <rect x="120" y="140" width="30" height="150" rx="15" fill="none" stroke="#ddd" stroke-width="2"/>
                            <rect x="250" y="140" width="30" height="150" rx="15" fill="none" stroke="#ddd" stroke-width="2"/>
                            <!-- Legs -->
                            <rect x="165" y="360" width="30" height="200" rx="15" fill="none" stroke="#ddd" stroke-width="2"/>
                            <rect x="205" y="360" width="30" height="200" rx="15" fill="none" stroke="#ddd" stroke-width="2"/>
                        </svg>
                    </div>

                    <!-- Drawing Canvas -->
                    <canvas id="sketch-canvas" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: crosshair;"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
const canvas = document.getElementById('sketch-canvas');
const ctx = canvas.getContext('2d');

let isDrawing = false;
let currentTool = 'pen';
let currentColor = '#000000';
let currentWidth = 3;
let currentView = 'front';

// Sketch data storage for front and back
let sketchData = {
    front: null,
    back: null
};

// Load existing sketch if available
@if($appointment->sketch_data)
    sketchData = @json(json_decode($appointment->sketch_data, true));
@endif

// Set canvas size to match container
function resizeCanvas() {
    const container = canvas.parentElement;
    const rect = container.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;

    // Reload sketch for current view
    loadSketchForView(currentView);
}

window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// Drawing functions
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

// Touch support
canvas.addEventListener('touchstart', handleTouch);
canvas.addEventListener('touchmove', handleTouch);
canvas.addEventListener('touchend', stopDrawing);

function startDrawing(e) {
    isDrawing = true;
    const pos = getMousePos(e);
    ctx.beginPath();
    ctx.moveTo(pos.x, pos.y);
}

function draw(e) {
    if (!isDrawing) return;

    const pos = getMousePos(e);

    ctx.lineWidth = currentWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    if (currentTool === 'pen') {
        ctx.globalCompositeOperation = 'source-over';
        ctx.strokeStyle = currentColor;
    } else if (currentTool === 'eraser') {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.strokeStyle = 'rgba(0,0,0,1)';
    }

    ctx.lineTo(pos.x, pos.y);
    ctx.stroke();
}

function stopDrawing() {
    isDrawing = false;
    ctx.beginPath();

    // Save current canvas state
    saveCurrentView();
}

function getMousePos(e) {
    const rect = canvas.getBoundingClientRect();
    const scaleX = canvas.width / rect.width;
    const scaleY = canvas.height / rect.height;

    return {
        x: (e.clientX - rect.left) * scaleX,
        y: (e.clientY - rect.top) * scaleY
    };
}

function handleTouch(e) {
    e.preventDefault();
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent(e.type === 'touchstart' ? 'mousedown' : 'mousemove', {
        clientX: touch.clientX,
        clientY: touch.clientY
    });
    canvas.dispatchEvent(mouseEvent);
}

// Tool functions
function setTool(tool) {
    currentTool = tool;
    document.querySelectorAll('.tool-btn').forEach(btn => {
        btn.classList.remove('active', 'bg-indigo-600', 'text-white');
        btn.classList.add('bg-gray-200', 'text-gray-700');
    });
    event.target.closest('.tool-btn').classList.add('active', 'bg-indigo-600', 'text-white');
    event.target.closest('.tool-btn').classList.remove('bg-gray-200', 'text-gray-700');
}

function setColor(color) {
    currentColor = color;
    currentTool = 'pen';
}

function setLineWidth(width) {
    currentWidth = width;
    document.getElementById('width-display').textContent = width;
}

function switchView(view) {
    // Save current view before switching
    saveCurrentView();

    currentView = view;

    // Update button states
    document.querySelectorAll('.view-btn').forEach(btn => {
        btn.classList.remove('active', 'bg-indigo-600', 'text-white');
        btn.classList.add('bg-gray-200', 'text-gray-700');
    });
    document.getElementById('view-' + view).classList.add('active', 'bg-indigo-600', 'text-white');
    document.getElementById('view-' + view).classList.remove('bg-gray-200', 'text-gray-700');

    // Toggle body outlines
    document.getElementById('body-front').classList.toggle('hidden', view !== 'front');
    document.getElementById('body-back').classList.toggle('hidden', view !== 'back');

    // Load sketch for new view
    loadSketchForView(view);
}

function saveCurrentView() {
    sketchData[currentView] = canvas.toDataURL();
}

function loadSketchForView(view) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (sketchData[view]) {
        const img = new Image();
        img.onload = function() {
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        };
        img.src = sketchData[view];
    }
}

function clearCanvas() {
    if (confirm('Are you sure you want to clear this drawing?')) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        sketchData[currentView] = null;
    }
}

async function saveSketch() {
    // Save current view first
    saveCurrentView();

    try {
        const response = await fetch('{{ route('crm.appointments.update', $appointment) }}', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                sketch_data: JSON.stringify(sketchData),
                _method: 'PUT'
            })
        });

        if (response.ok) {
            alert('Sketch saved successfully!');
        } else {
            alert('Failed to save sketch. Please try again.');
        }
    } catch (error) {
        console.error('Error saving sketch:', error);
        alert('Error saving sketch. Please try again.');
    }
}

// Load initial view
loadSketchForView('front');
</script>
@endsection