@extends('layouts.app')



@section('content')
    <div class="container">
        <h1 class="title">Papers</h1>
        <a href="{{ route('papers.create') }}" class="button is-small is-primary" style="border-radius: 0;">Add New Paper</a>

        

        <table class="table is-fullwidth is-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Question Count</th>
                    <th>Status</th>
                    <th>Template</th>
                    <th>Diagram</th>
                    <th>Print</th>
                    <th>Mobile</th>
                    <th>Actions</th>
                    
                </tr>
            </thead>
            <tbody>
                @foreach($papers as $paper)
                    <tr>
                        <td>{{ $paper->id }}</td>
                        <td>{{ $paper->name }}</td>
                        <td>{{ $paper->questions_count }}</td>
                        <td>{{ $paper->status }}</td>
                        <td>{{ $paper->template }}</td>
                        <td>{{ $paper->diagram }}</td>
                        <td>{{ $paper->print }}</td>
                        <td>{{ $paper->mobile }}</td>
                        
                        <td>
                            <a href="{{ route('papers.edit', $paper->id) }}" style="border-radius: 0; " class="button is-small is-warning">Edit</a>
                            <a href="{{ route('papers.viewquestions', $paper->id) }}" style="border-radius: 0; " class="button is-small is-warning">View Questions</a>
                            <a href="{{ route('papers.addquestion', $paper->id) }}" style="border-radius: 0; " class="button is-small is-warning">Add Question</a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

   <div> මිනිස් රුධිර සංසරණ පද්ධතිය,<b>\( ax^3 + bx + c = 0 \)</b> එක එකෙහි සාමාන්‍ය විෂ්කම්භය 8 um වන කේශනාලිකා බිලියනයකින් (109
පමණ සමන්විත වෙයි. 
 \[ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} \]හෘදය මගින් මිනිත්තුවට ලීටර 5ක ශීඝ්‍රතාවකින් රුධිරය පොම්ප කරන්නේ නම්, කේශනාලික තුළින් රුධිරය ගලායන සාමාන්‍ය වේගය මිනිත්තුවට cm වලින් කුමක්  </div>


 <canvas id="projectileCanvas" width="800" height="400"></canvas>

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

        // Constants
        const g = 9.8;  // Gravity
        const v0 = 50;  // Initial velocity in m/s
        const angle = 45;  // Angle in degrees
        const angleRad = (angle * Math.PI) / 180;  // Convert to radians

        const startX = 50;  // Initial x position
        const startY = canvas.height - 50;  // Initial y position (bottom of canvas)
        
        let time = 0;  // Start time
        const interval = 20;  // Time step in ms

        function drawProjectile() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);  // Clear canvas

            // Calculate positions
            const x = startX + v0 * Math.cos(angleRad) * time;
            const y = startY - (v0 * Math.sin(angleRad) * time - 0.5 * g * time * time);

            // Draw the ball
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);  // Ball radius 10
            ctx.fillStyle = 'blue';
            ctx.fill();
            ctx.closePath();

            // Stop animation if the projectile hits the ground
            if (y >= startY) {
                clearInterval(animation);
            } else {
                time += 0.05;  // Increment time
            }
        }

        const animation = setInterval(drawProjectile, interval);  // Run animation
    </script>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
     

@endsection