@extends('layout.mainlayout')
@section('content')
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Create Certificate</h4>
                <h6>Add a new driving certificate</h6>
            </div>
        </div>
        <form action="{{ route('certificates.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Student Name</label>
                                <input type="text" name="student_name" required>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Registration Number</label>
                                <input type="text" name="registration_number" required>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Course Name</label>
                                <input type="text" name="course_name" required>
                            </div>
                        </div>
                        <div class="col-lg-3 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Certificate Number</label>
                                <input type="text" name="certificate_number" required>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Issue Date</label>
                                <input type="date" name="issue_date" required class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>Start Date</label>
                                <input type="date" name="start_date" required class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6 col-12">
                            <div class="form-group">
                                <label>End Date</label>
                                <input type="date" name="end_date" required class="form-control">
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-12">
                            <div class="form-group">
                                <label>Batch Number</label>
                                <input type="text" name="batch_number" required placeholder="e.g. BATCH 01/025" class="form-control">
                            </div>
                        </div>
                        

                        
                        <div class="col-lg-6 col-sm-12">
                            <div class="form-group">
                                <label> Upload Certificate (PDF/Image) <span class="text-muted">(Optional)</span></label>
                                <div class="image-upload">
                                    <input type="file" name="certificates_file">
                                    <div class="image-uploads">
                                        <img src="{{ URL::asset('/build/img/icons/upload.svg') }}" alt="img">
                                        <h4>Drag and drop Certificate</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-lg-12">
                            <h5>Ufundi Subjects Results</h5>
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Subject</th>
                                            <th>Code</th>
                                            <th>Grade</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody id="results_table_body">
                                        <!-- Default row -->
                                        <tr>
                                            <td>
                                                <select name="results[0][subject]" class="form-control subject-select" required>
                                                    <option value="">Select Subject</option>
                                                    @foreach($subjects as $subject)
                                                        <option value="{{ $subject->subject_name }}" data-code="{{ $subject->subject_code }}">{{ $subject->subject_name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="results[0][code]" class="form-control" placeholder="Subject Code">
                                            </td>
                                            <td>
                                                <input type="text" name="results[0][grade]" class="form-control" placeholder="Grade">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm delete-row"><i class="fa fa-trash"></i></button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <button type="button" class="btn btn-primary mt-2" id="add_row_btn"><i class="fa fa-plus"></i> Add Subject</button>
                            </div>
                        </div>

                        <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                let rowIdx = 1;
                                const tableBody = document.getElementById('results_table_body');
                                const addBtn = document.getElementById('add_row_btn');

                                addBtn.addEventListener('click', function() {
                                    const tr = document.createElement('tr');
                                    let options = '<option value="">Select Subject</option>';
                                    @foreach($subjects as $subject)
                                        options += '<option value="{{ $subject->subject_name }}" data-code="{{ $subject->subject_code }}">{{ $subject->subject_name }}</option>';
                                    @endforeach

                                    tr.innerHTML = `
                                        <td>
                                            <select name="results[${rowIdx}][subject]" class="form-control subject-select" required>
                                                ${options}
                                            </select>
                                        </td>
                                        <td>
                                            <input type="text" name="results[${rowIdx}][code]" class="form-control subject-code" placeholder="Subject Code">
                                        </td>
                                        <td>
                                            <input type="text" name="results[${rowIdx}][grade]" class="form-control" placeholder="Grade">
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm delete-row"><i class="fa fa-trash"></i></button>
                                        </td>
                                    `;
                                    tableBody.appendChild(tr);
                                    rowIdx++;
                                });

                                // Event delegation for subject change to auto-fill code
                                tableBody.addEventListener('change', function(e) {
                                    if (e.target.classList.contains('subject-select')) {
                                        const selectedOption = e.target.options[e.target.selectedIndex];
                                        const code = selectedOption.getAttribute('data-code');
                                        const row = e.target.closest('tr');
                                        const codeInput = row.querySelector('input[name*="[code]"]') || row.querySelector('.subject-code');
                                        // Since the initial row uses specific name, we need to find input by generic selector if possible or class
                                        // Let's ensure the initial row code input has the same class logic or find by index
                                        // Simpler: find the code input in the same row.
                                        const inputs = row.querySelectorAll('input');
                                        // Assuming code is the first input in the row or we can add a class to it.
                                        // Let's add class 'subject-code' to the initial row too in a separate edit or assume 2nd column
                                        // Using specific query:
                                        const codeField = row.querySelector('td:nth-child(2) input'); 
                                        if(codeField) codeField.value = code || '';
                                    }
                                });

                                tableBody.addEventListener('click', function(e) {
                                    if (e.target.closest('.delete-row')) {
                                        const row = e.target.closest('tr');
                                        if (tableBody.querySelectorAll('tr').length > 1) {
                                            row.remove();
                                        } else {
                                            alert("At least one subject is required.");
                                        }
                                    }
                                });
                            });
                        </script>
                                </table>
                            </div>
                        </div>

                        <div class="col-lg-12">
                            <button type="submit" class="btn btn-submit me-2">Submit</button>
                            <a href="{{ route('certificates.index') }}" class="btn btn-cancel">Cancel</a>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection