@extends('layouts.training_centre_layout')

@section('content')
<style>
.hover-shadow:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease-in-out;
}
.card-title {
    font-size: 1rem;
}
.card p {
    margin-bottom: 0.25rem;
}
.rounded-4 {
    border-radius: 1rem !important;
}
.card-body {
    height: auto;
}
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.stat-card {
    flex: 1 1 200px;
    padding: 1rem;
    border-radius: 0.75rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.stat-card.primary { background-color: #0d6efd; }
.stat-card.success { background-color: #198754; }
.stat-card.warning { background-color: #ffc107; color: #212529; }
.stat-card.info { background-color: #0dcaf0; color: #212529; }
.stat-icon { font-size: 2rem; }
.stat-content { flex: 1; }
.stat-value { font-size: 1.5rem; font-weight: bold; }
.stat-label { font-size: 0.9rem; }
</style>

{{-- Flash Messages --}}
@if (session('success'))
<div class="alert alert-success alert-dismissible fade show mt-3 mx-3" role="alert">
    <strong>Success!</strong> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if (session('error'))
<div class="alert alert-danger alert-dismissible fade show mt-3 mx-3" role="alert">
    <strong>Error!</strong> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@if (session('warning'))
<div class="alert alert-warning alert-dismissible fade show mt-3 mx-3" role="alert">
    <strong>Warning!</strong> {{ session('warning') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h5>Welcome to Training Centre Dashboard</h5>
            </div>
        </div>
    </div>
</div>

{{-- Notifications Section --}}
<div class="container mb-4">
    <div class="row">
        <div class="col-12 col-md-10 col-lg-8 col-xl-6">
            <div class="card shadow-sm border-0 rounded-3" id="notificationCard">
                <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center py-3">
                    <h5 class="mb-0 text-dark"><i class="bi bi-bell-fill me-2 text-primary"></i>Inbox Messages</h5>
                </div>
                <ul class="list-group list-group-flush overflow-auto" id="notificationList">
                    @if ($partnerNotifications != null && $partnerNotifications->count() > 0)
                        @foreach ($partnerNotifications as $notifications)
                            @php $date = \Carbon\Carbon::parse($notifications->created_at)->diffForHumans(); @endphp
                            <li class="list-group-item d-flex align-items-start">
                                <div class="flex-shrink-0 me-3">
                                    <i class="bi bi-exclamation-triangle-fill text-danger fs-5 mt-1"></i> 
                                </div>
                                <div class="flex-grow-1 me-2">
                                    <div class="d-flex w-100 justify-content-between">
                                        <strong class="mb-1">{{ $notifications->type_name }}</strong>
                                        <small class="text-muted flex-shrink-0">{{ $date }}</small>
                                    </div>
                                    <div class="d-flex w-100 justify-content-between">
                                        <p class="mb-1">{{ $notifications->message }}</p>
                                        @if ($notifications->type_name == "BATCH")
                                            <a href="{{ route('training-centre.batches.index') }}" class="btn btn-sm btn-primary"><i class="fas fa-eye me-2"></i>View</a>
                                        @elseif ($notifications->type_name == "ASSESSMENTS")    
                                            <a href="{{ route('training-centre.assessments.index') }}" class="btn btn-sm btn-primary"><i class="fas fa-eye me-2"></i>View</a>
                                        @elseif ($notifications->type_name == "STUDENT")
                                            <a href="{{ route('training-centre.students.new-applications') }}" class="btn btn-sm btn-primary"><i class="fas fa-eye me-2"></i>View</a>      
                                        @endif
                                    </div>
                                </div>
                            </li>
                        @endforeach
                        <div class="card-footer text-center bg-white border-top-0">
                            <a href="{{ route('center.center.inbox') }}" class="text-decoration-none text-primary-emphasis">View all inbox messages</a>
                        </div>
                    @else
                        <p class="m-5 text-center">No new inbox messages</p>  
                    @endif
                </ul>
            </div>
        </div>
    </div>
</div>

{{-- Discrepancy Section --}}
@if(isset($scrutinyDetails) && $scrutinyDetails->count() > 0)
@php $status = $centre->application_status ?? ''; @endphp
@if($status == 'DISCREPANCY_FOUND')
<div class="mt-4" id="discrepancy-section">
    <div class="mb-3">
        <h4 class="fw-bold text-danger"><i class="fas fa-exclamation-triangle me-2"></i>Centre Application Discrepancies</h4>
        <p class="text-muted">Review and resolve discrepancies in your submitted applications.</p>
    </div>
    @php $groupedScrutiny = $scrutinyDetails->groupBy('centre_application_id'); @endphp
    <div class="row g-3" id="discrepancy-cards">
        @foreach($groupedScrutiny as $applicationId => $details)
        <div class="col-12">
            <div class="card border-danger shadow-sm rounded-4 h-100 hover-shadow">
                <div class="card-body p-3">
                    <p class="mb-2 small fw-bold">
                        <strong>Application #:</strong> {{ $centre->application_number ?? 'N/A' }}
                        <span class="badge bg-danger text-light">{{ $status }}</span>
                    </p>
                    <div class="row">
                        @foreach($details as $detail)
                        <div class="col-lg-4 col-md-6 mb-3">
                            <div class="border rounded-3 p-2 bg-light h-100">
                                <h6 class="fw-bold text-danger mb-1"><i class="fas fa-exclamation-triangle me-1"></i>{{ $detail->scrutinyList->name ?? 'N/A' }}</h6>
                                <p class="small mb-1"><strong>Remarks:</strong> {{ $detail->remarks ?? '-' }}</p>
                                <p class="small mb-0"><strong>Date:</strong> {{ $detail->scrutiny_date ?? '-' }}</p>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="text-end mt-3">
                        <a href="{{ route('centre.my-application.edit', ['id' => $applicationId]) }}" class="btn btn-danger btn-sm px-3"><i class="fas fa-wrench me-1"></i> Resolve</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>
@endif
@endif

{{-- Payment Pending Modal --}}
@if(isset($centre) && in_array(strtolower($centre->application_status), ['payment_pending']))
<div class="modal fade" id="paymentPendingPopup" tabindex="-1" aria-labelledby="paymentPendingLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-warning">
            <div class="modal-header bg-warning">
                <h5 class="modal-title fw-bold text-dark"><i class="fas fa-exclamation-circle me-2"></i>Payment Required ({{ $centre->application_number }})</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-light border border-warning text-warning">
                    <strong>Your application has been approved.</strong><br>Please complete your payment to continue.
                </div>
                <div class="text-center mt-3">
                    <button class="btn btn-warning text-dark fw-bold px-4" data-bs-target="#paymentModal" data-bs-toggle="modal" data-bs-dismiss="modal"><i class="fas fa-credit-card me-2"></i> Make Payment</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

{{-- Student Discrepancy Cards --}}
@if (isset($studentDetails) && $studentDetails->count() > 0)
@foreach ($studentDetails as $student)
<div class="row">
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 mb-4">
        <div class="card h-100 border-3 border-danger shadow">
            <div class="card-body d-flex flex-column p-4">
                <h5 class="card-title text-dark fw-bold mb-3">{{ $student->courseSelectionDetail[0]->course->title ?? 'Course Details Missing' }}</h5>
                <div class="alert alert-light text-danger border border-danger">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle fa-2x me-3"></i>
                        <div>
                            <h6 class="fw-bold mb-1 text-danger">Discrepancy Found</h6>
                            <p class="mb-0 small">Kindly review and rectify the data.</p>
                        </div>
                    </div>
                </div>
                <a href="{{ route('student.my-application.edit', ["id" => $student->id]) }}" class="btn btn-sm btn-danger"><i class="fas fa-wrench me-1"></i> Resolve Discrepancy</a>
            </div>
        </div>
    </div>
</div>
@endforeach
@endif

{{-- Stats Cards --}}
<div class="row">
    <div class="col-12">
        <section class="content-section active" id="students-section">
            <div class="stats-grid">
                <div class="stat-card primary"><div class="stat-icon"><i class="fas fa-users"></i></div><div class="stat-content"><div class="stat-value text-white">{{ $totalStudentCount }}</div><div class="stat-label text-white">Total Students</div></div></div>
                <div class="stat-card success"><div class="stat-icon"><i class="fas fa-user-check"></i></div><div class="stat-content"><div class="stat-value text-white">{{ $approvedStudentCount }}</div><div class="stat-label text-white">Active Students</div></div></div>
                <div class="stat-card warning"><div class="stat-icon"><i class="fas fa-graduation-cap"></i></div><div class="stat-content"><div class="stat-value text-white">{{ $completedbatchCount }}</div><div class="stat-label text-white">Completed Batches</div></div></div>
                {{-- <div class="stat-card info"><div class="stat-icon"><i class="fas fa-certificate"></i></div><div class="stat-content"><div class="stat-value text-white">0</div><div class="stat-label text-white">Certificates Issued</div></div></div> --}}
            </div>
        </section>
    </div>
</div>

<!-- Payment Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content rounded-4">

            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title fw-bold">
                    <i class="fas fa-credit-card me-2"></i> Application Payment Form
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <form id="payment_form" enctype="multipart/form-data">@csrf 
                <div class="modal-body">

                   <input type="hidden" name="training_centre_id" value="{{ request('id') ?? ($centre->id ?? '') }}">

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="payment_mode">Payment Mode <span class="text-danger">*</span></label>
                            <select name="payment_mode" id="payment_mode" class="form-control" required>
                                <option value="">-- Select Payment Mode --</option>
                                <option value="Cheque" {{ old('payment_mode', $payment->payment_mode ?? '') == 'Cheque' ? 'selected' : '' }}>Cheque</option>
                                <option value="NEFT" {{ old('payment_mode', $payment->payment_mode ?? '') == 'NEFT' ? 'selected' : '' }}>NEFT</option>
                                <option value="RTGS" {{ old('payment_mode', $payment->payment_mode ?? '') == 'RTGS' ? 'selected' : '' }}>RTGS</option>
                                <option value="UPI" {{ old('payment_mode', $payment->payment_mode ?? '') == 'UPI' ? 'selected' : '' }}>UPI</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="transaction_id">Transaction ID <span class="text-danger">*</span></label>
                            <input type="text" name="transaction_id" id="transaction_id" class="form-control"
                                value="{{ old('transaction_id', $payment->transaction_id ?? '') }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="transaction_date">Transaction Date <span class="text-danger">*</span></label>
                            <input type="date" name="transaction_date" id="transaction_date" class="form-control"
                                value="{{ old('transaction_date', $payment->transaction_date ?? '') }}" required>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label for="amount">Amount (in INR) <span class="text-danger">*</span></label>
                            <input type="number" step="0.01" name="amount" id="amount" class="form-control"
                                value="15000" readonly>
                        </div>

                        <div class="col-12 mb-3">
                            <label for="transaction_details">Transaction Details (Optional)</label>
                            <textarea name="transaction_details" id="transaction_details" class="form-control" rows="3">{{ old('transaction_details', $payment->transaction_details ?? '') }}</textarea>
                        </div>

                        <div class="col-12 mb-3">
                            <label for="receipt">Upload Receipt (PDF/Image, Max 5MB) 
                                @if(empty($payment->receipt_path)) 
                                    <span class="text-danger">*</span> 
                                @endif 
                            </label>

                            <input 
                                type="file" 
                                name="receipt" 
                                id="receipt" 
                                class="form-control" 
                                accept=".pdf,.jpg,.jpeg,.png"
                                data-has-file="{{ !empty($payment->receipt_path) ? '1' : '0' }}"
                            >

                            <small class="text-muted">Accepted: .pdf, .jpg, .jpeg, .png. Max Size: 5MB.</small>

                            @if(!empty($payment->receipt_path))
                                <small class="text-success d-block mt-1">
                                    <i class="fa fa-check-circle"></i> Existing file uploaded. Upload a new one to replace it.
                                </small>
                                <a href="{{ asset('storage/' . $payment->receipt_path) }}" target="_blank" class="d-block mt-1">
                                    View Current Receipt
                                </a>
                            @endif
                        </div>
                    </div>

                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" id="save_payment_button" class="btn btn-warning text-dark px-4 fw-bold">
                        <i class="fa fa-save me-2"></i> Submit Payment
                    </button>
                </div>
            </form>

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

@endsection

@section('pages-scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {

    // Show payment modal if status is payment_pending
    @if(isset($centre) && in_array(strtolower($centre->application_status), ['payment_pending']))
        var paymentModal = new bootstrap.Modal(document.getElementById('paymentPendingPopup'));
        paymentModal.show();
    @endif

    let isSubmitting = false;

    // jQuery Validator custom method: File extension
    $.validator.addMethod("fileExtension", function(value, element, param) {
        if(element.files.length === 0) return true; // no file, allow
        var ext = value.split('.').pop().toLowerCase();
        return param.split('|').includes(ext);
    }, "Invalid file type");

    // jQuery Validator custom method: File size (param in KB)
    $.validator.addMethod('filesize', function(value, element, param) {
        if(element.files.length === 0) return true;
        return element.files[0].size <= param * 1024;
    }, 'File size must not exceed {0} KB.');

    // Initialize form validation
    $('#payment_form').validate({
        ignore: [],
        rules: {
            training_centre_id: { required: true },
            payment_mode: { required: true },
            transaction_id: { required: true },
            transaction_date: { required: true, date: true },
            amount: { required: true, number: true, min: 1 },
            receipt: {
                required: function() {
                    return $('#receipt').attr('data-has-file') !== '1';
                },
                fileExtension: "pdf|jpg|jpeg|png",
                filesize: 5120 // 5MB
            }
        },
        messages: {
            training_centre_id: "Centre ID missing.",
            payment_mode: "Select payment mode.",
            transaction_id: "Provide transaction ID.",
            transaction_date: "Select transaction date.",
            amount: "Enter valid amount.",
            receipt: {
                required: "Upload receipt",
                fileExtension: "Allowed formats: PDF/JPG/PNG",
                filesize: "File size must not exceed 5MB."
            }
        },
        errorPlacement: function(error, element) {
            error.insertAfter(element);
        },
        submitHandler: function(form) {
            Swal.fire({
                title: 'Confirm Submission',
                text: "Are you sure you want to submit this payment?",
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Yes, Submit',
                cancelButtonText: 'Cancel',
                reverseButtons: true
            }).then((result) => {
                if(result.isConfirmed){
                    if(isSubmitting) return;
                    isSubmitting = true;

                    const $btn = $('#save_payment_button');
                    const origHtml = $btn.html();
                    $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-2"></i> Saving...');

                    let formData = new FormData(form);

                    $.ajax({
                        url: "{{ route('centre.save-payment') }}",
                        method: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function(response) {
                            if(response.success){
                                Swal.fire("Success!", response.message, "success").then(() => {
                                    $('#paymentModal').modal('hide');
                                    location.reload();
                                });
                            } else {
                                Swal.fire("Error!", response.message || "Something went wrong.", "error");
                            }
                        },
                        error: function(xhr){
                            let msg = "Something went wrong.";
                            if(xhr.responseJSON && xhr.responseJSON.errors){
                                msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            }
                            Swal.fire("Error!", msg, "error");
                        },
                        complete: function(){
                            isSubmitting = false;
                            $btn.prop('disabled', false).html(origHtml);
                        }
                    });
                }
            });
        }
    });

});
</script>
@endsection