@extends('layouts.app_layout')

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

@if ($batchDetails)

    {{-- {{ dd($batchDetails) }} --}}
    <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>{{ $batchDetails->centreProgramDetails->centerApplications->basicInformation->centre_name ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa fa-book"></i> Course Name</th>
                                <td>{{ $batchDetails->centreProgramDetails->program->title ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa fa-users"></i> Batch Name</th>
                                <td>{{ $batchDetails->name ?? 'Not Available' }}</td>
                            </tr>
                            <tr>
                                <th><i class="fa fa-info-circle"></i> Batch Status</th>
                                <td><span class="badge bg-success">{{ $batchDetails->batch_status ?? 'Not Available' }}</span></td>
                            </tr>
                            <tr>
                                <th><i class="fa fa-check-square"></i> Approval Status</th>
                                <td><span class="badge bg-primary">{{ $batchDetails->current_approval_status ?? 'Not Available' }}</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">{{ $batchDetails->start_date ?? 'Not Available' }}</p>
                                </div>

                                <div class="col-md-6 col-12 mb-3">
                                    <strong>End Date:</strong>
                                    <p class="mb-0">{{ $batchDetails->end_date ?? 'Not Available' }}</p>
                                </div>

                                <div class="col-md-6 col-12 mb-3">
                                    <strong>Batch Size:</strong>
                                    <p class="mb-0">{{ $batchDetails->size ?? 'Not Available' }}</p>
                                </div>

                                <div class="col-md-6 col-12 mb-3">
                                    <strong>Course:</strong>
                                    <p class="mb-0">{{ $batchDetails->centreProgramDetails->program->title ?? 'Not Available' }}</p>
                                </div>

                                <div class="col-md-6 col-12 mb-3">
                                    <strong>Trainer:</strong>
                                    @foreach ($batchDetails->batchTrainers as $trainers)
                                        <p class="mb-0">{{ $trainers->trainer->name }}</p>    
                                    @endforeach
                                </div>

                                <div class="col-md-6 col-12 mb-3">
                                    <strong>Description:</strong>
                                    <p class="mb-0">{{ $batchDetails->description }}</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">

                                @foreach ($batchDetails->student as $student)
                                    @if ($student)
                                        <div class="col-md-3 col-sm-6 col-12">
                                            <div class="student-card" data-student-id="{{ $student->student_id }}">
                                                <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">{{ $student->studentDetails->personalDetail->name }}</h6>
                                                                <small class="text-muted">{{ $student->studentDetails->application_number }}</small>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                                

                            </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="{{ $batchDetails->id }}" data-bs-toggle="offcanvas" data-bs-target="#approvalStatusOffcanvas"><i class="fa fa-toggle-on"></i> Approval Status</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif


<!-- 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">
            @csrf
            <input type="hidden" id="approvalId" name="batch_id">

            <div class="mb-3">
                <label for="approvalStatus" class="form-label">Approval Status</label>
                <select name="batch_approval_status" id="approvalStatus" class="form-input form-control" required>
                    <option value="">Select Status</option>
                    <option value="APPROVED">Approve</option>
                    <option value="REJECTED">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>

    $(document).on('click', '.change-status', function() {
        const batchId = $(this).data('id'); 
        $('#approvalId').val(batchId);
    });

    // Handle Approval status update form submission
    $('#approvalStatusUpdateForm').validate({
        rules: {
            batch_approval_status: {
                required: true
            },
        },
        messages: {
            batch_approval_status: {
                required: "Please select a status."
            },
        },
        submitHandler: function(form) {
            let formData = new FormData(form);

            $.ajax({
                url: "{{ route('training-centre.batches.batch-status.update-approval-status') }}",
                method: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function(response) {
                    if (response.success) {
                        Swal.fire({
                            title: "Success!",
                            text: response.message,
                            icon: "success",
                            confirmButtonText: "OK"
                        }).then(() => {
                            $('#batchStatusOffcanvas').offcanvas('hide');
                            window.location.href = response.redirect_url;
                        });
                    } else {
                        toastr.error(response.message);
                    }
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join("<br>");
                        Swal.fire({
                            title: "Validation Error",
                            html: errorMessages,
                            icon: "error"
                        });
                    } else {
                        Swal.fire({
                            title: "Error!",
                            text: xhr.responseJSON.message || "Something went wrong. Please try again.",
                            icon: "error"
                        });
                    }
                }
            });
        }
    });
</script>
@endsection