@extends('layout.mainlayout')
@section('content')
<div class="page-wrapper">
    <div class="content">
        <div class="page-header">
            <div class="page-title">
                <h4>Edit Certificate</h4>
                <h6>Update certificate details</h6>
            </div>
        </div>
        <form action="{{ route('certificates.update', $certificate->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <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" value="{{ $certificate->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" value="{{ $certificate->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" value="{{ $certificate->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" value="{{ $certificate->certificate_number }}" required>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form-group">
                                <label>Issue Date</label>
                                <input type="date" name="issue_date" value="{{ $certificate->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" value="{{ $certificate->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" value="{{ $certificate->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" value="{{ $certificate->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">(Leave empty to keep current)</span></label>
                                @if($certificate->file_path)
                                    <div class="mb-2">
                                        <a href="{{ asset($certificate->file_path) }}" target="_blank" class="text-primary">View Current File</a>
                                    </div>
                                @endif
                                <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">
                                        @foreach($certificate->results as $index => $result)
                                        <tr>
                                            <td>
                                                <select name="results[{{ $index }}][subject]" class="form-control subject-select" required>
                                                    <option value="">Select Subject</option>
                                                    @foreach($subjects as $sub)
                                                        <option value="{{ $sub->subject_name }}" data-code="{{ $sub->subject_code }}" {{ $result->subject == $sub->subject_name ? 'selected' : '' }}>{{ $sub->subject_name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <input type="text" name="results[{{ $index }}][code]" class="form-control" value="{{ $result->code }}">
                                            </td>
                                            <td>
                                                <input type="text" name="results[{{ $index }}][grade]" class="form-control" value="{{ $result->grade }}">
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm delete-row"><i class="fa fa-trash"></i></button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </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 = {{ count($certificate->results) }};
                                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 $sub)
                                        options += '<option value="{{ $sub->subject_name }}" data-code="{{ $sub->subject_code }}">{{ $sub->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 codeField = row.querySelector('input[name*="[code]"]') || 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 > 0) {
                                            row.remove();
                                        }
                                    }
                                });
                            });
                        </script>
                                </table>
                            </div>
                        </div>

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