@extends('layouts.admin')
<title>{{ config('app.name', 'Laravel') }} | Transport-Student-Details</title>
<style>
    .edit:hover,
    .delete:hover {
        color: #fff !important;
        border-radius: 5px !important;
    }

    .edit:hover {
        background-color: blue !important;
        border-color: #696cff !important;
    }

    .delete:hover {
        background-color: #e3242b !important;
        border-color: #e3242b !important;
    }

    .dtbl_dropdown .dataTables_length {
        width: 65px;
    }

    .dtbl_dropdown .dataTables_length label {
        width: 100%;
    }

    .card {
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .exam-list-item {
        border: 1px solid #dee2e6;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
    }

    .list-group {
        overflow-y: auto;
        max-height: 900px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    /* .userProfile_img img{
       object-fit: cover;
    } */
</style>

<style>
    /* Popup container */
    .popup {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1100; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    /* Popup content */
    .popup-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 50%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    }

    /* Close button */
    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        margin-top: -30px;
        margin-right: -18px;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
</style>
<link rel="stylesheet" href="{{asset('assets/css/toggle.css')}}">
@section('main-content')

<div id="popup" class="popup">
    <!-- Popup content -->
    <div class="popup-content">
        <span class="close" onclick="closePopup()">&times;</span>
        <h4 class="announcement_head_popup"></h4>
        <h6 class="announcement_head_class"></h6>
        <h6 class="announcement_head_date"></h6>
        <p class="announcement_content_popup"></p>
    </div>
</div>

<!-- Content wrapper -->
<div class="content-wrapper">
    <!-- Content -->
    <div class="container-xxl flex-grow-1 container-p-y">
        <h4 class="fw-bold py-3 mb-1">Student Profile  <span class="ms-1">{{isset($parent[0]->created_at)?$parent[0]->created_at->format('d-m-Y ( h : i a )'):""}}</span>{{-- isset($student[0]->first_name)?ucwords($student[0]->first_name):" " }} {{ isset($student[0]->last_name)?ucwords($student[0]->last_name):" " --}}</h4>
        <h5 class="mb-1">
            @if (isset($teacher_details))
                <a href="{{url('/getTeacher'.'/'.$teacher_details->uuid)}}">( {{$teacher_details->first_name." ".$teacher_details->last_name}} )</a>
            @else
                Teacher not assigned yet.
            @endif
        </h5>
        <h5 class="mb-3">( {{isset($child_add_info) && $child_add_info->student_class?$child_add_info->student_class:"Class not assigned yet."}} )</h5>
        <div class="row mb-5 justify-content-start">

            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card h-70">
                    <!-- Profile Image -->
                    <div class="text-center mt-3 userProfile_img">
                        @if(isset($student->profile_photo_path))
                            <a href="{{  $student->profile_photo_path }}" target="_blank">
                                <img src="{{ $student->profile_photo_path }}" alt="user" class="rounded-circle" width="150" height="150" />
                            </a>
                        @else
                            <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" alt="user" class="rounded-circle" width="150" height="150" />
                        @endif
                    </div>

                    <div class="card-body text-center">
                        <h5 class="mb-3 bg-secondary text-white rounded p-2">{{ isset($student->first_name)?ucwords($student->first_name):" " }} {{ isset($student->last_name)?ucwords($student->last_name):" " }}</h5>
                        <table class="table text-center">
                            <tbody>
                                <tr>
                                    <td class="fs-6 bg-light"> Gender : {{ isset($student->gender)?ucwords($student->gender):" Gender not included yet " }}</td>
                                </tr>
                                <tr>
                                    <td class="fs-6 bg-light"> Age : {{ isset($student->dob)?(calculate_age($student->dob)."y/o ( ".dateformatter($student->dob)." )"):" Date of birth not include yet " }}</td>
                                </tr>
                                <tr>
                                    <td class="fs-6 bg-light"> {{ isset($student->emergency_contact)?"Emergency contact : ".$student->emergency_contact:" Emergency number not included yet " }}</td>
                                </tr>
                                <tr>
                                    <td class="fs-6 bg-light">
                                        @if (isset($child_add_info->birth_certificate))
                                            <a href="{{url('/assets/birth_certifcates/'.$child_add_info->birth_certificate)}}" download="{{ucwords($student->first_name)." ".ucwords($student->last_name)}}_birth_certifcates">Birth Certificate</a>
                                        @else
                                            Birth Certificate not include yet                                            
                                        @endif
                                    </td>
                                </tr>

                                <tr>
                                    <td class="fs-6 bg-light">
                                        @if (isset($child_add_info->vaccination_certificate))
                                            <a href="{{url('/assets/vaccination_certificate/'.$child_add_info->vaccination_certificate)}}" download="{{ucwords($student->first_name)." ".ucwords($student->last_name)}}_vaccination_certificate">Vaccination Card</a>
                                        @else
                                            Vaccination Certificate not include yet                                            
                                        @endif
                                    </td>
                                </tr>

                                @if(isset($child_add_info))
                                                                        <tr>
                                        <td class="fs-6 bg-light"> Allergic : {{isset($child_add_info->allergies)?"Yes":"No"}} </td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light"> Allergy List : {{ isset($child_add_info->allergies)?$allergies_str:" Allergies not included yet " }}</td>
                                    </tr>
                                    <tr>
                                        <td class="fs-6 bg-light"> {{ (isset($child_add_info->description) && $child_add_info->description!="")?"Allergic Description : ".$child_add_info->description:" Description not included yet " }}</td>
                                    </tr>
                                @else
                                    <tr>
                                        <td class="fs-6 bg-light"> Allergic : No</td>
                                    </tr>
                                @endif
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-4 mb-3">
                <h5 class="mb-3 bg-secondary text-white rounded p-2">Payment Months</h5>
                @if(!empty($fee_dates) && count($fee_dates) > 0)
                    <ul class="list-group exam-list p-2">
                        <li class="list-group-item exam-list-item bg-light">
                            <strong>
                                <p class="mb-1 d-flex justify-content-between align-items-center">
                                    <span>Month</span>
                                    <span class="ms-5">Fee Status</span>
                                    <span>Transport Fee</span>
                                </p>
                            </strong>
                        </li>
                        @foreach($fee_dates as $data)
                            <li class="list-group-item exam-list-item bg-light">
                                <p class="mb-1 d-flex justify-content-between align-items-center">
                                    <strong class="w-25">{{dateformatter($data->next_payment_date)}}</strong>
                                    <span class="w-25">
                                        @if ($data->status==1)
                                            <span style="color: yellowgreen;">Paid</span>
                                        @else
                                            <span style="color: red;">
                                                <a href="{{url('/view-feedetail').'/'.$fee_id->uuid}}"  style="color: red;">
                                                    Pending
                                                </a>
                                            </span>
                                        @endif
                                    </span>
                                    @if ($data->transport_charges_paid==1)
                                        <span style="color: yellowgreen;">Paid</span>
                                    @else
                                        @if ($data->status==1)
                                            <a href="javaScript:void(0);" class="btn-primary rounded view_class p-1"
                                                data-student_name="{{ ucwords($student->first_name)." ".ucwords($student->last_name) }}"
                                                data-class_name="{{ ucwords($child_add_info->student_class)}}" 
                                                >
                                                Pay
                                            </a>
                                        @endif
                                    @endif
                                </p>
                            </li>
                        @endforeach
                    </ul>    
                @endif
            </div>

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

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
    function openPopup() {
        document.getElementById("popup").style.display = "block";
    }

    // Function to close the popup
    function closePopup() {
        document.getElementById("popup").style.display = "none";
    }

    $(".view_class").on("click",function(e){
        e.preventDefault();
        openPopup();
        $('.announcement_head_popup').text($(this).data('title'));
        $('.announcement_head_class').text("( "+$(this).data('class_name')+" )");
        $('.announcement_head_date').text("( "+$(this).data('created_on')+" )");
        $('.announcement_content_popup').text($(this).data('content'));
    });
</script>
@endsection