@extends('Root.layout.master')
@section('title', 'Student List')
@section('page_name', 'Student')

@push('styles')
    <style>
        .nav-tabs .nav-link.active {
            border-bottom: 3px solid red;
            font-weight: 600;
        }

        .modal-body .row {
            align-items: center;
        }
        .modal-body .col-md-3 {
            color: #555;
        }

    </style>
@endpush

@section('content')

    <!-- Modal -->
    <div class="modal fade" id="studentDetailsModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">

                <!-- Header -->
                <div class="modal-header">
                    <h5 class="modal-title">Active Student Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <!-- Body -->
                <div class="modal-body">

                    <!-- Student Info Table -->
                    <div class="table-responsive mb-4">
                        <table class="table table-bordered">
                            <thead class="table-light">
                            <tr>
                                <th>Name:</th>
                                <th>Email:</th>
                                <th>Phone:</th>
                                <th>Gender:</th>
                                <th>Created At:</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td id="s_name"></td>
                                <td id="s_email"></td>
                                <td id="s_phone"></td>
                                <td id="s_address"></td>
                                <td id="s_created"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Results Title -->
                    <h6 class="mb-2">Results</h6>

                    <!-- Results Table -->
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                            <tr>
                                <th>#</th>
                                <th>Course Name</th>
                                <th>Institution Name</th>
                                <th>Board</th>
                                <th>Result</th>
                                <th>Roll No</th>
                                <th>Reg No</th>
                                <th>Certificate No</th>
                                <th>Passing Year</th>
                                <th>Certificate Copy</th>
                                <th>Submitted At</th>
                                <th>Updated At</th>
                            </tr>
                            </thead>
                            <tbody id="resultTableBody">
                            <!-- AJAX data will append here -->
                            </tbody>
                        </table>
                    </div>

                </div>

                <!-- Footer Buttons -->
                <div class="modal-footer justify-content-center gap-2">



                    <form action="{{route('admin.student.suspend')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id"  id="user_id">
                        <button type="submit" class="btn btn-info text-white px-4">
                            <i class="bi bi-person"></i> Suspend Account
                        </button>
                    </form>

                    <form action="{{route('admin.student.verified')}}" method="post">
                        @csrf
                        <input type="hidden" name="user_id"  id="user_id">
                        <button type="submit" class="btn btn-success text-white px-4">
                            <i class="bi bi-check"></i> Verified Account
                        </button>
                    </form>

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


    <div class="container mt-4">

        <!-- Tabs -->
        <ul class="nav nav-tabs" id="consultantTabs" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#active">Active</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#verified">Verified</button>
            </li>

            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#suspended">Suspended</button>
            </li>



        </ul>
        <div class="tab-content p-4 border border-top-0 bg-light">

            <!-- Active -->
            <div class="tab-pane fade show active" id="active">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>User Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($stu_active as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td class="d-flex justify-content-center">
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- verified -->
            <div class="tab-pane fade" id="verified">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>User Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($stu_verified as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

            <!-- suspended -->
            <div class="tab-pane fade" id="suspended">
                <table class="table table-hover table-bordered">
                    <tr>
                        <th>SL</th>
                        <th>User Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Actions</th>
                    </tr>
                    <tbody>
                    @foreach($stu_suspended as $c)
                        <tr>
                            <td>{{$loop->iteration}}</td>
                            <td>{{$c->u_name}}</td>
                            <td>{{$c->u_email}}</td>
                            <td>{{$c->u_phone}}</td>
                            <td>
                                <button class="btn btn-outline-info btn-sm viewUser" data-id="{{$c->id}}"><i class="bi bi-eye"> VIEW</i></button>

                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).on('click', '.viewUser', function () {

            let userId = $(this).data('id');

            let url = "{{ route('admin.ajax.student.detail', ':id') }}";
            url = url.replace(':id', userId);

            $.ajax({
                url: url,
                type: "GET",
                success: function (data) {

                    $('#s_name').text(data[0].u_name);
                    $('#s_email').text(data[0].u_email);
                    $('#s_phone').text(data[0].u_phone);
                    $('#s_address').text(data[1].gender);
                    function formatDateTime(datetime){
                        let d = new Date(datetime);

                        return d.toLocaleString('en-GB', {
                            day:'2-digit',
                            month:'short',
                            year:'numeric',
                            hour:'2-digit',
                            minute:'2-digit',
                            hour12:true
                        });
                    }

                    $('#s_created').text(formatDateTime(data[0].created_at));

                    /// Results
                    let rows = '';
                    const storageUrl = "{{ asset('storage') }}";

                    data[2].forEach((r,index)=>{

                        // Adjust path depending on your storage folder
                        let fileUrl = r.file_path
                            ? `${storageUrl}/${r.file_path}`
                            : null;

                        rows += `
        <tr>
            <td>${index+1}</td>
            <td>${r.result_type ?? ''}</td>
            <td>${r.institute_name ?? ''}</td>
            <td>${r.board ?? ''}</td>
            <td>${r.result ?? ''}</td>
            <td>${r.roll_no ?? ''}</td>
            <td>${r.reg_no ?? ''}</td>
            <td>${r.certificate_no ?? ''}</td>
            <td>${r.passing_year ?? ''}</td>
            <td>
                ${
                            fileUrl
                                ? `<a href="${fileUrl}" target="_blank" class="btn btn-sm btn-primary">View</a>`
                                : `<span class="text-muted">No File</span>`
                        }
            </td>
            <td>${formatDateTime(r.created_at)}</td>
            <td>${formatDateTime(r.updated_at)}</td>
        </tr>
    `;
                    });

                    $('#resultTableBody').html(rows);

                    document.querySelectorAll('#user_id').forEach(function(el){
                        el.value = data[0].id;
                    });


                    var modal = new bootstrap.Modal(
                        document.getElementById('studentDetailsModal')
                    );
                    modal.show();
                }
            });

        });
    </script>
@endpush