@extends('layouts.header')

@section('content')
    <style>
        @import url('https://fonts.googleapis.com/css2?family=PT+Serif+Caption&family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

        body,
        html {
            height: 100%;
            font-family: 'Poppins', sans-serif;
            background: #f1f8e9b8;
            font-size: 15px;
            margin: 0 auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            max-width: 774px;
            margin-bottom: 30px !important;
            margin-top: 30px !important;
            margin: 0 auto;

        }

        table tr th {
            font-weight: 600;
        }

        table tr td,
        table tr th {
            padding: 7px 10px;
            border: 1px solid #818181;
            text-align: left;
            font-size: 14px;
            font-weight: 500;

        }

        input,
        select {
            padding: 10px;
            background: transparent;
            height: 20px;
            width: 230px;
            border: 1px solid #999999;
            border-radius: 4px;
            font-size: 14px;
            outline: none;
        }

        mark {
            font-size: 26px;
            font-weight: bold;
            background: none;
        }

        p {
            font-size: 14px;
        }

        h1,
        h2,
        p {
            padding: 0;
            margin: 0;
            text-align: center;
        }

        address {
            font-size: 13px;
            text-align: center;
        }

        h1 {
            margin-top: 20px;
            font-size: 35px;
            font-weight: 800;
        }

        h2 {
            margin-top: 10px;
            font-size: 18px;
        }

        .fname {
            font-family: 'PT Serif Caption', serif;
            border-bottom: 2px dotted black;
            margin-bottom: 10px;
        }

        .fname b {
            border-bottom: 3px solid #f2f8eb;
            padding-right: 5px;
        }

        .student tr {
            border: none;
            padding: 5px 0;
            display: flex;
        }

        .student th,
        .student td {
            border: none;
        }

        .student th {
            width: 80px;
            padding-bottom: 0;
        }

        .student td {
            border-bottom: 2px dotted black;
            padding: 0;
        }

        .student td span {
            position: relative;
            top: 6px;
        }

        .col-blue {
            font-size: 16px;
            color: #2196F3;
        }

        .col-green {
            font-size: 16px;
            color: green;
        }

        .col-red {
            font-size: 16px;
            color: red;
        }
    </style>

    <main class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card shadow">
                    <div class="card-body">

                       <h1 class="card-title text-center">Marks Details Form</h1>

                        @if ($errors->any())
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ route('marks.store') }}" method="POST">
                            @csrf

                            @if (Auth::user()->role === '1')
                                <div class="form-group">
                                    <label for="school_name">School Name</label>
                                    <select name="school_name" id="school_name" class="form-control">
                                        <option value="">Select a School</option>
                                        @foreach ($schools as $school)
                                            <option value="{{ $school->Id }}">{{ $school->school_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @elseif(Auth::user()->role === '3')
                                <div class="form-group">
                                    <label for="school_name">School Name</label>
                                    <input type="text" class="form-control" value="{{ $school_name }}" readonly>
                                    <input type="hidden" name="school_name" value="{{ $schools[0]->Id }}">
                                </div>
                            @endif

                            <!-- Student Name Dropdown -->
                            <div class="mb-3">
                                <label for="student" class="form-label">Student Name:</label>
                                <select id="student" name="student_name" class="form-control" required
                                    onchange="updateSelectedStudent()">
                                    <option value="">Select a student</option>
                                    @foreach ($students as $student)
                                        <option value="{{ $student->id }}">{{ $student->student_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <input type="hidden" id="selected_student_id" name="selected_student_id">
                            <input type="hidden" id="selected_student_name" name="selected_student_name">

                            <!-- Exam Name -->
                            <div class="mb-3">
                                <label for="exam_name" class="form-label">Exam Name:</label>
                                <input type="text" id="exam_name" name="exam_name" class="form-control">
                            </div>

                            <!-- Class -->
                            <div class="mb-3">
                                <label for="class" class="form-label">Class:</label>
                                <select id="class" name="class" class="form-control">
                                    <option value="" disabled selected>Select class</option>
                                    <option value="III">III</option>
                                    <option value="V">V</option>
                                    <option value="VII">VII</option>
                                    <option value="IX">IX</option>
                                    <option value="X">X</option>
                                    <option value="XI">XI</option>
                                    <option value="XII">XII</option>
                                </select>
                            </div>

                            <!-- Standard (Courses) -->
                            <div class="mb-3" id="coursesSection" style="display: none;">
                                <label for="standard" class="form-label">Courses:</label>
                                <select id="standard" name="courses" class="form-control">
                                    <option value="" disabled selected>Select Courses</option>
                                    <option value="Maths Biology Group">Maths Biology Group</option>
                                    <option value="Computer Science Group">Computer Science Group</option>
                                    <option value="Commerce Group">Commerce Group</option>
                                </select>
                            </div>

                            <!-- Students Marks Entry -->
                            <fieldset>
                                <h1>Students Marks Entry</h1>
                                <div style="margin:0 auto;"  class="table" >
                                    <table class="table" id="marksTable">
                                        <!-- Default subjects will be inserted here -->
                                    </table>
                                    <table>
                                        <tr>
                                            <td>Total Marks :</td>
                                            <td id="totalmarks"></td>
                                        </tr>
                                        <tr>
                                            <td>Percentage :</td>
                                            <td id="percentage"></td>
                                        </tr>
                                    </table>
                                </div>
                            </fieldset>

                            <div class="text-center">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const classSelect = document.getElementById('class');
            const standardSelect = document.getElementById('standard');
            const coursesSection = document.getElementById('coursesSection');
            const marksTable = document.getElementById('marksTable');

            const defaultSubjects = ['Tamil', 'English', 'Mathematics', 'General Science', 'Social Science'];

            const subjectsByGroup = {
                'Maths Biology Group': ['Tamil', 'English', 'Mathematics', 'Biology', 'Physics', 'Chemistry'],
                'Computer Science Group': ['Tamil', 'English', 'Mathematics', 'Computer Science', 'Physics',
                    'Chemistry'
                ],
                'Commerce Group': ['Tamil', 'English', 'Mathematics', 'Accountancy', 'Physics', 'Economics']
            };

            function populateSubjects(subjects) {
                let tableContent = '<tr><th>Subject</th><th>Marks</th></tr>';
                subjects.forEach(subject => {
                    tableContent += `
                <tr>
                    <td>${subject}</td>
                    <td><input type="number" name="marks[]" placeholder="Enter Marks..." class="marks" /></td>
                </tr>`;
                });
                marksTable.innerHTML = tableContent;
            }

            function toggleCoursesSection(selectedClass) {
                if (selectedClass === 'XI' || selectedClass === 'XII') {
                    coursesSection.style.display = 'block';
                    const selectedGroup = standardSelect.value;
                    if (selectedGroup in subjectsByGroup) {
                        populateSubjects(subjectsByGroup[selectedGroup]);
                    }
                } else {
                    coursesSection.style.display = 'none';
                    populateSubjects(defaultSubjects); // Populate default subjects for lower classes
                }
            }

            classSelect.addEventListener('change', function() {
                const selectedClass = classSelect.value;
                toggleCoursesSection(selectedClass);
            });

            standardSelect.addEventListener('change', function() {
                const selectedGroup = standardSelect.value;
                if (selectedGroup in subjectsByGroup) {
                    populateSubjects(subjectsByGroup[selectedGroup]);
                }
            });

            toggleCoursesSection(classSelect.value); // Initialize on page load

            document.addEventListener('keyup', function() {
                let totalMarks = 0;
                const marksInputs = document.querySelectorAll('.marks');
                marksInputs.forEach(input => {
                    if (input.value !== '') {
                        totalMarks += parseFloat(input.value);
                    }
                });

                const selectedClass = classSelect.value;
                const totalMaxMarks = (selectedClass === 'XI' || selectedClass === 'XII') ? 600 : 500;

                document.getElementById('totalmarks').innerHTML =
                    `<mark>${totalMarks} / ${totalMaxMarks}</mark>`;
                const percentage = (totalMarks / totalMaxMarks) * 100;
                document.getElementById('percentage').innerHTML = `<mark>${percentage.toFixed(2)} %</mark>`;
            });
        });

        function updateSelectedStudent() {
            const select = document.getElementById('student');
            const selectedOption = select.options[select.selectedIndex];
            document.getElementById('selected_student_id').value = selectedOption.value;
            document.getElementById('selected_student_name').value = selectedOption.text;
        }
    </script>

@endsection