@extends('layouts.app_layout')

@section('content')
<!-- [ Page Header ] start -->
<x-page-header title="{{ $pageTitle }}" button="{!! (isset($button))?$button:'' !!}" backButton="true" />
<!-- [ Page Header ] end -->

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered align-middle">
                    <tbody>
                        <tr>
                            <th width="30%"><i class="fa fa-building"></i> Centre Name</th>
                            <td>Akash Institute</td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-book"></i> Course Name</th>
                            <td>National Genereics Caregiver</td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-users"></i> Batch Name</th>
                            <td>Web Development Batch - 2024</td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-info-circle"></i> Batch Status</th>
                            <td><span class="badge bg-success">Ongoing</span></td>
                        </tr>
                        <tr>
                            <th><i class="fa fa-check-square"></i> Approval Status</th>
                            <td><span class="badge bg-primary">Pending</span></td>
                        </tr>
                    </tbody>
                </table>


                <div class="card mt-3">
                    <div class="card-body">
                        <div class="row">

                            <div class="col-md-6 col-12 mb-3">
                                <strong>Start Date:</strong>
                                <p class="mb-0">31-08-2025</p>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <strong>End Date:</strong>
                                <p class="mb-0">31-09-2025</p>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <strong>Batch Size:</strong>
                                <p class="mb-0">25</p>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <strong>Course:</strong>
                                <p class="mb-0">Full Stack Web Development</p>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <strong>Trainer:</strong>
                                <p class="mb-0">John Smith</p>
                            </div>

                            <div class="col-md-6 col-12 mb-3">
                                <strong>Description:</strong>
                                <p class="mb-0">Comprehensive web development course covering HTML, CSS, JavaScript, and modern frameworks like React and Node.js.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <h5>Student List:</h5>
                <div class="mb-3">
                    <div id="studentsContainer" style="max-height: 400px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
                        <div class="row">



                            <div class="col-md-3 col-sm-6 col-12">
                                <div class="student-card" data-student-id="1">
                                    <div class="card mb-2" style="cursor: pointer;">
                                        <div class="card-body p-2">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/10542/10542459.png" class="rounded-circle" alt="Student Photo" width="50" height="50">
                                                </div>
                                                <div class="col">
                                                    <h6 class="mb-0">John Doe</h6>
                                                    <small class="text-muted">App No: APP001</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6 col-12">
                                <div class="student-card" data-student-id="2">
                                    <div class="card mb-2" style="cursor: pointer;">
                                        <div class="card-body p-2">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/10542/10542459.png" class="rounded-circle" alt="Student Photo" width="50" height="50">
                                                </div>
                                                <div class="col">
                                                    <h6 class="mb-0">Jane Smith</h6>
                                                    <small class="text-muted">App No: APP002</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6 col-12">
                                <div class="student-card" data-student-id="3">
                                    <div class="card mb-2" style="cursor: pointer;">
                                        <div class="card-body p-2">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/10542/10542459.png" class="rounded-circle" alt="Student Photo" width="50" height="50">
                                                </div>
                                                <div class="col">
                                                    <h6 class="mb-0">Mike Johnson</h6>
                                                    <small class="text-muted">App No: APP003</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6 col-12">
                                <div class="student-card" data-student-id="4">
                                    <div class="card mb-2" style="cursor: pointer;">
                                        <div class="card-body p-2">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/10542/10542459.png" class="rounded-circle" alt="Student Photo" width="50" height="50">
                                                </div>
                                                <div class="col">
                                                    <h6 class="mb-0">Sarah Wilson</h6>
                                                    <small class="text-muted">App No: APP004</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3 col-sm-6 col-12">
                                <div class="student-card" data-student-id="5">
                                    <div class="card mb-2" style="cursor: pointer;">
                                        <div class="card-body p-2">
                                            <div class="row align-items-center">
                                                <div class="col-auto">
                                                    <img src="https://cdn-icons-png.flaticon.com/512/10542/10542459.png" class="rounded-circle" alt="Student Photo" width="50" height="50">
                                                </div>
                                                <div class="col">
                                                    <h6 class="mb-0">David Brown</h6>
                                                    <small class="text-muted">App No: APP005</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

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

                <div class="text-center">
                    <p class="mb-2">
                        Click here to approval/rejection of batch
                    </p>
                    <button class="btn btn-success change-status" data-id="1" data-bs-toggle="offcanvas" data-bs-target="#approvalStatusOffcanvas"><i class="fa fa-toggle-on"></i> Approval Status</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Approval status offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="approvalStatusOffcanvas" aria-labelledby="approvalStatusOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="batchStatusOffcanvasLabel">Update Approval Status</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="approvalStatusUpdateForm">
            <input type="hidden" id="approvalId" name="approval_id">

            <div class="mb-3">
                <label for="approvalStatus" class="form-label">Approval Status</label>
                <select name="status" id="approvalStatus" class="form-input form-control" required>
                    <option value="">Select Status</option>
                    <option value="1">Approve</option>
                    <option value="1">Rejected</option>
                </select>
            </div>

            <div class="mb-3">
                <label for="remarks" class="form-label">Remarks</label>
                <textarea name="remarks" id="remarks" rows="4" class="form-input form-control" placeholder="Enter remarks for status change..."></textarea>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">Update Status</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">Cancel</button>
            </div>
        </form>
    </div>
</div>

@endsection

@section('pages-scripts')
<script>
    // Handle Approval status update form submission
    $('#approvalStatusUpdateForm').on('submit', function(e) {
        e.preventDefault();

        window.location.href = `${baseUrl}/secure/batches`;
    });
</script>
@endsection