@extends('layouts.app')

@section('title', 'Student Profile - ' . $student->student_name)

@section('content')
    <!-- Inner CSS for Action Buttons -->
    <style>
        .btn-action-container {
            display: flex;
            flex-direction: row;
            width: 100%;
            gap: 8px;
            align-items: center;
            flex-wrap: nowrap;
        }

        .btn-action-item {
            flex: 1 1 0px;
            min-width: 0;
            margin: 0;
        }

        .btn-action-custom {
            width: 100% !important;
            height: 42px !important;
            border: none !important;
            border-radius: 6px !important;
            font-weight: 600 !important;
            font-size: 12px !important;
            padding: 0 8px !important;
            transition: all 0.2s ease-in-out !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 6px !important;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .btn-action-custom:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
            color: #ffffff !important;
        }

        .btn-gradient-success {
            background: linear-gradient(135deg, #10b981, #059669) !important;
            color: #ffffff !important;
        }

        .btn-gradient-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626) !important;
            color: #ffffff !important;
        }

        .btn-gradient-warning {
            background: linear-gradient(135deg, #f59e0b, #d97706) !important;
            color: #ffffff !important;
        }

        .btn-gradient-primary {
            background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
            color: #ffffff !important;
        }

        .btn-gradient-info {
            background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
            color: #ffffff !important;
        }

        .btn-action-custom:disabled {
            opacity: 0.85;
            cursor: not-allowed;
            transform: none !important;
        }

        @media (max-width: 768px) {
            .btn-action-container {
                flex-wrap: wrap;
            }
            .btn-action-item {
                flex: 1 1 45%;
            }
        }
    </style>

    <div class="content-header">
        <div class="leftside-content-header">
            <ul class="breadcrumbs">
                <li><i class="fa fa-home" aria-hidden="true"></i><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li><a href="javascript:void(0)">Student</a></li>
                <li><a href="{{ Route::has('student.manage') ? route('student.manage') : 'javascript:void(0)' }}">Management</a></li>
                <li><a href="javascript:void(0)">Student Profile</a></li>
            </ul>
        </div>
    </div>

    <!-- Action Bar -->
    <div class="panel mb-md">
        <div class="panel-content" style="padding: 12px;">
            <div class="btn-action-container">

                <!-- 1. Admission Fee Pay/Status -->
                <!--<div class="btn-action-item">-->
                <!--    @if(isset($student->payment_status) && $student->payment_status == 'Paid')-->
                <!--        <button type="button" class="btn btn-action-custom btn-gradient-success" disabled>-->
                <!--            <i class="fa fa-check-circle"></i> <span>Admission Paid</span>-->
                <!--        </button>-->
                <!--    @else-->
                <!--        <a href="{{ Route::has('fees.collect') ? route('fees.collect', Crypt::encryptString($student->id)) : 'javascript:void(0)' }}" class="btn btn-action-custom btn-gradient-success">-->
                <!--            <i class="fa fa-money"></i> <span>Collect Fee</span>-->
                <!--        </a>-->
                <!--    @endif-->
                <!--</div>-->

                <!-- 2. Final Admission Pay -->
                <!--<div class="btn-action-item">-->
                <!--    <button type="button" class="btn btn-action-custom btn-gradient-warning" onclick="payFinalAdmission('{{ Crypt::encryptString($student->id) }}')">-->
                <!--        <i class="fa fa-credit-card"></i> <span>Pay Final Admission</span>-->
                <!--    </button>-->
                <!--</div>-->

                <!-- 3. Assign Section & Roll Trigger Button -->
                <div class="btn-action-item">
                    <button type="button" class="btn btn-action-custom btn-gradient-primary" id="btnOpenAssignModal" data-toggle="modal" data-target="#assignClassModal" data-bs-toggle="modal" data-bs-target="#assignClassModal">
                        <i class="fa fa-edit"></i> <span>Transfer Section</span>
                    </button>
                </div>

                <!-- 4. Edit Profile -->
                <div class="btn-action-item">
                    <a href="{{ Route::has('student.edit') ? route('student.edit', Crypt::encryptString($student->id)) : 'javascript:void(0)' }}" class="btn btn-action-custom btn-gradient-info">
                        <i class="fa fa-pencil"></i> <span>Edit Student</span>
                    </a>
                </div>

                <!-- 5. Delete Profile -->
                <div class="btn-action-item">
                    <form action="{{ Route::has('student.delete') ? route('student.delete', Crypt::encryptString($student->id)) : '#' }}" method="POST" id="delete-student-form" style="margin: 0;">
                        @csrf
                        @method('DELETE')
                        <button type="button" class="btn btn-action-custom btn-gradient-danger" onclick="confirmDelete()">
                            <i class="fa fa-trash"></i> <span>Delete Student</span>
                        </button>
                    </form>
                </div>

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

    <!-- Student Profile Information -->
    <div class="row animated fadeInUp">
        <!-- Left Column: Student Photo & Basic Card -->
        <div class="col-xl-4 col-lg-5 col-md-12 mb-md">
            <div class="panel p-sm text-center">
                <div class="profile-photo mb-sm">
                    <img class="img-thumbnail rounded-circle shadow-xs" style="height: 110px; width: 110px; object-fit: cover;" alt="Student photo"
                        src="{{ !empty($student->student_photo) ? asset('storage/students/photos/' . $student->student_photo) : asset('image/student_image/default.jpg') }}">
                </div>
                <div class="user-header-info">
                    <h5 class="user-name mb-xs"><b>{{ $student->student_name }}</b></h5>
                    <div class="mb-sm">
                        @if (isset($student->status) && $student->status == 1)
                            <a href="{{ Route::has('student.status.toggle') ? route('student.status.toggle', Crypt::encryptString($student->id)) : 'javascript:void(0)' }}">
                                <span class="badge badge-xs x-success">Active</span>
                            </a>
                        @else
                            <a href="{{ Route::has('student.status.toggle') ? route('student.status.toggle', Crypt::encryptString($student->id)) : 'javascript:void(0)' }}">
                                <span class="badge badge-xs x-danger">Inactive</span>
                            </a>
                        @endif
                    </div>
                    <a class="btn btn-warning btn-xs"
                        href="{{ Route::has('student.edit') ? route('student.edit', Crypt::encryptString($student->id)) : 'javascript:void(0)' }}">
                        <i class="fa fa-pencil"></i> Edit Profile
                    </a>
                </div>
            </div>

            <div class="panel bg-scale-0 b-warning bt-sm mt-md">
                <div class="panel-content">
                    <h4 class="bb-xs pb-xs"><b>Basic Information</b></h4>
                    <ul class="user-contact-info list-unstyled ph-sm">
                        <li class="mb-xs"><b>Class : </b> {{ $student->class_name }}</li>
                        <li class="mb-xs"><b>Section : </b> {{ $student->section_name ?? 'N/A' }}</li>
                        <li class="mb-xs"><b>Roll No : </b> {{ $student->student_roll ?? 'N/A' }}</li>
                        <li class="mb-xs"><b>Registration : </b> {{ $student->registration_no ?? 'N/A' }}</li>
                        <li class="mb-xs"><b>Session : </b> {{ $student->session ?? date('Y') }}</li>
                    </ul>

                    <h4 class="bb-xs pb-xs mt-lg"><b>Contact Information</b></h4>
                    <ul class="user-contact-info list-unstyled ph-sm">
                        <li class="mb-xs">
                            <i class="color-warning mr-sm fa fa-phone"></i>
                            {{ $student->contact_number ?? ($student->father_contact_number ?? 'N/A') }}
                        </li>
                        <li class="mb-xs">
                            <i class="color-warning mr-sm fa fa-envelope"></i> 
                            {{ $student->email ?? 'N/A' }}
                        </li>
                        <li class="mb-xs">
                            <i class="color-warning mr-sm fa fa-globe"></i>
                            {{ $student->present_address ?? 'Nabinagar, Brahmanbaria' }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Right Column: Full Details Panels -->
        <div class="col-xl-8 col-lg-7 col-md-12">
            <!-- Student Basic Information -->
            <div class="panel">
                <div class="panel-header panel-warning">
                    <h3 class="panel-title">Student Basic Information</h3>
                </div>
                <div class="panel-content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered mb-none">
                            <tbody>
                                <tr>
                                    <th style="width: 25%;">Student ID</th>
                                    <td style="width: 25%;">{{ $student->student_id ?? $student->id }}</td>
                                    <th style="width: 25%;">Student Status</th>
                                    <td style="width: 25%;">
                                        @if (isset($student->status) && $student->status == 1)
                                            <span class="badge badge-xs x-success">Active</span>
                                        @else
                                            <span class="badge badge-xs x-danger">Inactive</span>
                                        @endif
                                    </td>
                                </tr>
                                <tr>
                                    <th>Student Name</th>
                                    <td>{{ $student->student_name }}</td>
                                    <th>Student Name (Bangla)</th>
                                    <td>{{ $student->student_name_bangla }}</td>
                                </tr>
                                <tr>
                                    <th>Class</th>
                                    <td>{{ $student->class_name }}</td>
                                    <th>Section</th>
                                    <td>{{ $student->section_name }}</td>
                                </tr>
                                <tr>
                                    <th>Roll No</th>
                                    <td>{{ $student->student_roll }}</td>
                                    <th>Registration No</th>
                                    <td>{{ $student->registration_no ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Scholarship Status</th>
                                    <td>
                                        <span class="badge badge-xs {{ ($student->scholarship_status ?? 0) ? 'x-success' : 'x-danger' }}">
                                            {{ ($student->scholarship_status ?? 0) ? 'Yes' : 'No' }}
                                        </span>
                                    </td>
                                    <th>Stipend Status</th>
                                    <td>
                                        <span class="badge badge-xs {{ ($student->stipend_status ?? 0) ? 'x-success' : 'x-danger' }}">
                                            {{ ($student->stipend_status ?? 0) ? 'Yes' : 'No' }}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <th>Date of Birth</th>
                                    <td>{{ $student->date_of_birth ?? 'N/A' }}</td>
                                    <th>Birth Registration No</th>
                                    <td>{{ $student->birth_certificate_no ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Religion</th>
                                    <td>{{ $student->religion ?? 'N/A' }}</td>
                                    <th>Blood Group</th>
                                    <td>{{ $student->blood_group ?? 'N/A' }}</td>
                                </tr>
                                <tr>
                                    <th>Mobile</th>
                                    <td>{{ $student->contact_number ?? 'N/A' }}</td>
                                    <th>Email</th>
                                    <td>{{ $student->email ?? 'N/A' }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Attendance Information -->
            <div class="panel">
                <div class="panel-header panel-warning">
                    <h3 class="panel-title">Student Attendance Information Log</h3>
                </div>
                <div class="panel-content">
                    <div class="row mb-sm text-center">
                        <div class="col-4"><b>Working Days : </b> {{ $attendanceSummary['working_days'] ?? 0 }}</div>
                        <div class="col-4"><b>Present : </b> {{ $attendanceSummary['present'] ?? 0 }}</div>
                        <div class="col-4"><b>Absent : </b> {{ $attendanceSummary['absent'] ?? 0 }}</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered mb-none">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50px;">SN</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Attendance Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($attendances ?? [] as $key => $attendance)
                                    <tr>
                                        <td class="text-center">{{ $key + 1 }}</td>
                                        <td class="text-center">{{ $attendance->date }}</td>
                                        <td class="text-center">
                                            <span class="badge badge-xs {{ $attendance->status == 'Present' ? 'x-success' : 'x-danger' }}">
                                                {{ $attendance->status }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="3" class="dataTables_empty text-center">No records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Financial Log -->
            <div class="panel">
                <div class="panel-header panel-warning">
                    <h3 class="panel-title">Student Financial Information Log</h3>
                </div>
                <div class="panel-content">
                    <div class="row mb-sm text-center">
                        <div class="col-4"><b>Total Paid : </b> {{ number_format($financialSummary['total_paid'] ?? 0, 2) }}</div>
                        <div class="col-4"><b>Total Due : </b> {{ number_format($financialSummary['total_due'] ?? 0, 2) }}</div>
                        <div class="col-4"><b>Net Amount : </b> {{ number_format(($financialSummary['total_paid'] ?? 0) - ($financialSummary['total_due'] ?? 0), 2) }}</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered mb-none">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50px;">SN</th>
                                    <th class="text-center">Reference No</th>
                                    <th class="text-center">Date</th>
                                    <th class="text-center">Particulars</th>
                                    <th class="text-center">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($financialLogs ?? [] as $key => $log)
                                    <tr>
                                        <td class="text-center">{{ $key + 1 }}</td>
                                        <td class="text-center">{{ $log->reference_no }}</td>
                                        <td class="text-center">{{ $log->date }}</td>
                                        <td>{{ $log->particulars }}</td>
                                        <td class="text-right">{{ number_format($log->amount, 2) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="dataTables_empty text-center">No records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Parent's Information -->
            <div class="panel">
                <div class="panel-header panel-warning">
                    <h3 class="panel-title">Parent's Information</h3>
                </div>
                <div class="panel-content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered mb-none">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50%;">Father's Information</th>
                                    <th class="text-center" style="width: 50%;">Mother's Information</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <ul class="list-unstyled mb-none pl-xs">
                                            <li class="mb-xs"><b>Father's Name : </b>{{ $student->father_name }}</li>
                                            <li class="mb-xs"><b>Father's Name Bangla : </b>{{ $student->father_name_bangla }}</li>
                                            <li class="mb-xs"><b>Profession : </b>{{ $student->father_occupation ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>Yearly Income : </b>{{ $student->father_yearly_income ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>NID Number : </b>{{ $student->father_nid ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>Contact Number : </b>{{ $student->father_contact_number ?? 'N/A' }}</li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul class="list-unstyled mb-none pl-xs">
                                            <li class="mb-xs"><b>Mother's Name : </b>{{ $student->mother_name }}</li>
                                            <li class="mb-xs"><b>Mother's Name Bangla : </b>{{ $student->mother_name_bangla }}</li>
                                            <li class="mb-xs"><b>Profession : </b>{{ $student->mother_occupation ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>Yearly Income : </b>{{ $student->mother_yearly_income ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>NID Number : </b>{{ $student->mother_nid ?? 'N/A' }}</li>
                                            <li class="mb-xs"><b>Contact Number : </b>{{ $student->mother_contact_number ?? 'N/A' }}</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Contact & Address Information -->
            <div class="panel">
                <div class="panel-header panel-warning">
                    <h3 class="panel-title">Contact & Address Information</h3>
                </div>
                <div class="panel-content">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered mb-none">
                            <thead>
                                <tr>
                                    <th class="text-center" style="width: 50%;">Present Address</th>
                                    <th class="text-center" style="width: 50%;">Permanent Address</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <ul class="list-unstyled mb-none pl-xs">
                                            <li class="mb-xs"><b>Care of : </b>{{ $student->father_name }}</li>
                                            <li class="mb-xs"><b>Village/Town : </b>{{ $student->present_village ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>Post Office : </b>{{ $student->present_post_office ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>Post code : </b>{{ $student->present_post_code ?? '3410' }}</li>
                                            <li class="mb-xs"><b>Upazila : </b>{{ $student->present_upazila ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>District : </b>{{ $student->present_district ?? 'Brahmanbaria' }}</li>
                                        </ul>
                                    </td>
                                    <td>
                                        <ul class="list-unstyled mb-none pl-xs">
                                            <li class="mb-xs"><b>Care of : </b>{{ $student->father_name }}</li>
                                            <li class="mb-xs"><b>Village/Town : </b>{{ $student->permanent_village ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>Post Office : </b>{{ $student->permanent_post_office ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>Post code : </b>{{ $student->permanent_post_code ?? '3410' }}</li>
                                            <li class="mb-xs"><b>Upazila : </b>{{ $student->permanent_upazila ?? 'Nabinagar' }}</li>
                                            <li class="mb-xs"><b>District : </b>{{ $student->permanent_district ?? 'Brahmanbaria' }}</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal for Assigning Section & Roll Number -->
    <div class="modal fade" id="assignClassModal" tabindex="-1" role="dialog" aria-labelledby="assignClassModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="{{ Route::has('admission.update_roll_section') ? route('admission.update_roll_section', Crypt::encryptString($student->id)) : '#' }}" method="POST" id="assignSectionRollForm">
                    @csrf
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="assignClassModalLabel" style="display:inline-block; font-weight:600;">
                            Set Section &amp; Roll Number
                        </h5>
                        <button type="button" class="close text-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close" style="outline:none;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <!-- Student Info Summary -->
                        <div class="alert alert-info py-2 mb-3" style="font-size: 13px;">
                            <strong>Student Name:</strong> {{ $student->student_name }}<br>
                            <strong>Class:</strong> {{ $student->class_name }}
                        </div>

                        <!-- Hidden Input for Student's Class Name -->
                        <input type="hidden" id="modal_class_name" value="{{ $student->class_name }}">

                        <!-- Section Dropdown -->
                        <div class="form-group mb-3">
                            <label for="modal_section_name" class="form-label font-weight-bold">Section <span class="text-danger">*</span></label>
                            <select class="form-control" name="section_name" id="modal_section_name" required>
                                <option value="">Select Section</option>
                            </select>
                        </div>

                        <!-- Roll Input Field -->
                        <div class="form-group mb-3">
                            <label for="modal_student_roll" class="form-label font-weight-bold">Roll Number <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" name="student_roll" id="modal_student_roll" value="{{ $student->student_roll ?? '1' }}" placeholder="Enter Roll Number" min="1" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Save Changes</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- JavaScript AJAX Handling -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function confirmDelete() {
            if (confirm("Are you sure you want to delete this student profile? This action cannot be undone.")) {
                document.getElementById('delete-student-form').submit();
            }
        }

        function payFinalAdmission(studentId) {
            // Functionality for Pay Final Admission
            console.log("Pay final admission for ID: " + studentId);
        }

        $(document).ready(function() {
            function fetchSectionsForStudent() {
                var className = $('#modal_class_name').val();
                var sectionSelect = $('#modal_section_name');

                sectionSelect.empty().append('<option value="">Loading Sections...</option>');

                if (className) {
                    $.ajax({
                        url: "{{ Route::has('admission.get_sections') ? route('admission.get_sections') : '#' }}",
                        type: "GET",
                        data: {
                            class_name: className
                        },
                        dataType: "json",
                        success: function(data) {
                            sectionSelect.empty().append('<option value="">Select Section</option>');
                            var currentSection = "{{ $student->section_name ?? 'A' }}";

                            if (Array.isArray(data) && data.length > 0) {
                                $.each(data, function(key, section) {
                                    var secName = section.section_name;
                                    var isSelected = (secName === currentSection) ? 'selected' : '';

                                    sectionSelect.append('<option value="' + secName + '" ' + isSelected + '>' + secName + '</option>');
                                });
                            } else {
                                sectionSelect.append('<option value="">No Sections Found for ' + className + '</option>');
                            }
                        },
                        error: function() {
                            sectionSelect.empty().append('<option value="">Error fetching sections</option>');
                        }
                    });
                } else {
                    sectionSelect.empty().append('<option value="">No Class Specified</option>');
                }
            }

            // Trigger section fetch on Modal display
            $('#assignClassModal').on('show.bs.modal shown.bs.modal', function() {
                fetchSectionsForStudent();
            });

            $('#btnOpenAssignModal').on('click', function() {
                fetchSectionsForStudent();
            });
        });
    </script>
@endsection