@extends('layouts.partner_layout')

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

<!-- [ Page Header ] end -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">{{ $assessment->name ?? 'N/A' }}</h5>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Assessment Status Badge -->
                    <div class="col-12 mb-4">
                        @php
                        $statusClass = match('scheduled') {
                        'scheduled' => 'bg-info',
                        'ongoing' => 'bg-warning',
                        'completed' => 'bg-success',
                        'cancelled' => 'bg-danger',
                        'postponed' => 'bg-secondary',
                        default => 'bg-info'
                        };
                        @endphp
                        <span class="badge {{ $statusClass }} px-3 py-2 fs-6">
                            <i class="fas fa-circle me-1"></i>
                            {{ ucfirst($assessment->assessment_status ?? 'Scheduled') }}
                        </span>
                    </div>

                    <!-- Basic Information -->
                    <div class="col-md-6 col-12 mb-3">
                        <div class="info-group">
                            <label class="info-label">Batch</label>
                            <div class="info-value">
                                <i class="fas fa-users text-primary me-2"></i>
                                {{ $assessment->batchDetails->name ?? 'Web Development - Batch 1' }}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-12 mb-3">
                        <div class="info-group">
                            <label class="info-label">Assessment Date</label>
                            <div class="info-value">
                                <i class="fas fa-calendar text-primary me-2"></i>
                                {{ $assessment && $assessment->assessment_date ? \Carbon\Carbon::parse($assessment->assessment_date)->format('F j, Y') : 'March 15, 2024' }}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-12 mb-3">
                        <div class="info-group">
                            <label class="info-label">Assessor</label>
                            <div class="info-value">
                                <i class="fas fa-user-tie text-primary me-2"></i>
                                {{ $assessment->assessor_name ?? 'Dr. Rajesh Kumar' }}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 col-12 mb-3">
                        <div class="info-group">
                            <label class="info-label">Duration</label>
                            <div class="info-value">
                                <i class="fas fa-clock text-primary me-2"></i>
                                {{ $assessment && $assessment->start_time ? \Carbon\Carbon::parse($assessment->assessment_start_time)->format('h:i A') : '09:00 AM' }}
                                -
                                {{ $assessment && $assessment->end_time ? \Carbon\Carbon::parse($assessment->assessment_end_time)->format('h:i A') : '12:00 PM' }}
                                {{-- @php
                                $startTime = $assessment && $assessment->start_time ? \Carbon\Carbon::parse($assessment->assessment_start_time) : \Carbon\Carbon::parse('09:00');
                                $endTime = $assessment && $assessment->end_times ? \Carbon\Carbon::parse($assessment->assessment_end_time) : \Carbon\Carbon::parse('12:00');
                                $duration = $startTime->diffInHours($endTime);
                                @endphp
                                <span class="text-muted">({{ $duration }} hours)</span> --}}
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    @if($assessment->assessment_description ?? true)
                    <div class="col-12 mb-3">
                        <div class="info-group">
                            <label class="info-label">Assessment Description</label>
                            <div class="info-value">
                                <div class="description-box">
                                    {{ $assessment->description }}
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif

                    <hr>

                    <!-- Action Buttons -->
                    <div class="text-center">
                        <p class="mb-2">
                            Click here to approval/rejection of assessment status.
                        </p>
                        <button class="btn btn-success change-status" data-id="{{ $assessment->id }}" data-bs-toggle="offcanvas" data-bs-target="#approvalStatusOffcanvas"><i class="fa fa-toggle-on"></i> Approval Status</button>
                    </div>
                </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="assessmentStatusOffcanvasLabel">Assessment Approval</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="assessment_id">

            <div class="mb-3">
                <label for="approvalStatus" class="form-label">Approval Status</label>
                <select name="assessment_approval_status" id="approvalStatus" class="form-input form-control" required>
                    <option value="">Select Status</option>
                    <option value="SEND_TO_NISD">Send to NISD</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 assessmentId = $(this).data('id'); 
        $('#approvalId').val(assessmentId);
    });

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

            $.ajax({
                url: "{{ route('training-centre.assessments.approval-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(() => {
                            $('#assessmentStatusOffcanvasLabel').offcanvas('hide');
                            window.location.href = "{{ route('partner.assessment.index') }}";
                        });
                    } 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