@extends('Company.layout.master')

@section('title', 'Student Enrollments')
@section('page_name', 'Student Enrollment List')

@section('content')
    <!-- Modal For Basic Information-->
    <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">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>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_created"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>

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

                        <button type="submit" class="btn btn-success text-white px-4 viewResult" data-id="">
                            <i class="bi bi-check"></i> View Result
                        </button>

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

    <!-- Modal For Showing Result-->
    <div class="modal fade" id="studentResultModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">

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

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

                    <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>
            </div>
        </div>
    </div>

    <!-- Tabs -->
    <ul class="nav nav-tabs" id="leadTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="first-tab" data-bs-toggle="tab" data-bs-target="#mylead" type="button" role="tab">My Lead</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="first-tab" data-bs-toggle="tab" data-bs-target="#first" type="button" role="tab">First Lead</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="second-tab" data-bs-toggle="tab" data-bs-target="#second" type="button" role="tab">Second Lead</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="third-tab" data-bs-toggle="tab" data-bs-target="#third" type="button" role="tab">Third Lead</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="fourth-tab" data-bs-toggle="tab" data-bs-target="#fourth" type="button" role="tab">Fourth Lead</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="fifth-tab" data-bs-toggle="tab" data-bs-target="#fifth" type="button" role="tab">Fifth Lead</button>
        </li>
    </ul>

    <!-- Tab Contents -->
    <div class="tab-content mt-3" id="leadTabsContent">

        <!-- My Lead -->
        <div class="tab-pane fade show active" id="mylead" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($lead as $f)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$f->u_name}}</td>
                        <td>{{ucfirst($f->profile->district)}}</td>
                        <td>
                            {{ $f->profile->target_country }}
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- First Lead -->
        <div class="tab-pane fade" id="first" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($first as $f)
                <tr>
                    <td>{{$loop->iteration}}</td>
                    <td>{{$f->u_name}}</td>
                    <td>{{ucfirst($f->profile->district)}}</td>
                    <td>
                        {{ $f->profile->target_country }}
                    </td>
                    <td>
                        <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                    </td>
                </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Second Lead -->
        <div class="tab-pane fade" id="second" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($second as $f)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$f->u_name}}</td>
                        <td>{{ucfirst($f->profile->district)}}</td>
                        <td>
                            {{ $f->profile->target_country }}
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Third Lead -->
        <div class="tab-pane fade" id="third" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>

                @foreach($third as $f)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$f->u_name}}</td>
                        <td>{{ucfirst($f->profile->district)}}</td>
                        <td>
                            {{ $f->profile->target_country }}
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                        </td>
                </tr>
                    @endforeach

                </tbody>
            </table>
        </div>

        <!-- Fourth Lead -->
        <div class="tab-pane fade" id="fourth" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($fourth as $f)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$f->u_name}}</td>
                        <td>{{ucfirst($f->profile->district)}}</td>
                        <td>
                            {{ $f->profile->target_country }}
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>

        <!-- Fifth Lead -->
        <div class="tab-pane fade" id="fifth" role="tabpanel">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Target Country</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                @foreach($fourth as $f)
                    <tr>
                        <td>{{$loop->iteration}}</td>
                        <td>{{$f->u_name}}</td>
                        <td>{{ucfirst($f->profile->district)}}</td>
                        <td>
                            {{ $f->profile->target_country }}
                        </td>
                        <td>
                            <button class="btn btn-primary btn-sm viewUser" data-id="{{$f->id}}">View</button>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

@endsection

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

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

            let url = "{{ route('consultant.student.info', ':id') }}";
            url = url.replace(':id', userId);

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

                    $('#s_name').text(data.u_name);
                    $('#s_email').text(data.u_email);
                    $('#s_phone').text(data.u_phone);
                    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.created_at));
                    document.getElementsByClassName('viewResult')[0].setAttribute('data-id', data.id);



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


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

        });

        $(document).on('click', '.viewResult', function () {

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

            let url = "{{ route('consultant.student.result', ':id') }}";
            url = url.replace(':id', userId);

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

                    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
                        });
                    }
                    // Results
                    let rows = '';
                    const storageUrl = "{{ asset('storage') }}";

                    data.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.id;
                    });


                    var modal = new bootstrap.Modal(
                        document.getElementById('studentResultModal')
                    );
                    modal.show();
                },
                error: function(xhr) {
                    let response = xhr.responseJSON;
                    if(response && response.error) {
                        alert(response.error);
                    } else {
                        alert("Something went wrong!");
                    }
                }
            });
        });
    </script>
@endpush