@extends('layouts.teacher')

<title>{{ config('app.name', 'Laravel') }} | Teacher | Profile</title>
@include('datepicker')
<style>
    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */
        background-color: rgb(0, 0, 0);
        /* Fallback color */
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

    /* .card {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 8px;
        width: fit-content;
        border-radius: 16px;
        overflow: hidden;
        cursor: default;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        position: relative;
        transform: 0.3s all ease-in-out;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    } */

    .card img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 3px solid white;
    }

    .card .profile-container {
        background-color: #9dbdff;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 40px;
        transition: 0.3s all ease-in-out;
    }

    .card .profile-info {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0px 16px;
    }

    .card .profile-info h1 {
        font-size: 2rem;
        color: rgba(0, 0, 0, 0.7);
    }

    .card .profile-info .job-title {
        color: rgba(0, 0, 0, 0.5);
        font-weight: 700;
    }

    .card .profile-info .desc {
        color: rgba(0, 0, 0, 0.9);
        font-size: 0.9rem;
        max-width: 300px;
        margin-top: 8px;
    }

    .card .profile-social {
        display: flex;
        gap: 8px;
    }

    .card .profile-social a {
        color: #7695ff;
        text-decoration: none;
        font-size: 0.9rem;
    }

    .card .profile-social a:hover {
        text-decoration: underline;
    }

    .card-bottom {
        width: 100%;
        background-color: #ff9874;
        height: 5px;
        transition: 0.3s all ease-in-out;
    }

    .card:hover .card-bottom {
        background-color: #ff6b6b;
    }

    .card:hover .profile-container {
        background-color: #7695ff;
    }
    .card_inline_custom {
        flex-direction: row !important;
        width: 100%
    }
    .card_inline_custom img {
        width: 90px;
        height: 90px;
        object-fit: cover;
    }
    .card_inline_custom .profile-container {
        padding: 10px;
        max-width: 130px;
        flex: 0 0 130px;
    }
    .custom_profile_info {
        max-width: calc(100% - 138px);
        flex: 0 0 calc(100% - 138px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .custom_profile_info .profile-info {
        display: block;
        padding: 0;
        text-align: left;
    }
    .custom_profile_info .profile-info h4 {
        margin: 0;
    }
  
    .dataTables_length label select {
        width: 60px;
    }
    table tr td img{
        object-fit: cover;
        width: 50px !important;
        height: 50px !important;
    }
    .tbl_h5{
        width: 100%;
        text-align: left;
    }
    .table_card{
        margin-bottom: 30px;
    }
    .custom_cardRow{
        margin-top: 20px !important;
        margin-bottom: 50px;
    }
</style>
@section('main-content')
    <!-- Content wrapper -->
    <div id="alert" class="col-md-6">
        @if (Session::has('success'))
            <div class="alert alert-primary" role="alert">
                {{ Session::get('success') }}
            </div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>
    <div class="content-wrapper">
        <!-- Content -->

        <div class="container-xxl row container-p-y">
            <div class="col-6">
                <h4 class="fw-bold py-2 mb-2"><span>My Profile</span></h4>
                <h5 class="fw-bold">
                    @if (isset($class))
                        {{ 'Class Assigned : ' . $class->class }}
                    @else
                        {{ 'Class not assigned yet.' }}
                    @endif
                </h5>
            </div>
                <div class="row custom_cardRow">
                    <h3 class="pt-3">Teachers List</h3>
                    
                    @foreach ($users as $user)
                        <div class="col-xl-6">
                            <div class="card card_inline_custom">
                                <div class="profile-container">
                                    <img src="{{ $user->profile_photo_path }}">
                                </div>

                                <div class="custom_profile_info">
                                    <div class="profile-info">
                                        <h4>{{ $user->first_name }} {{ $user->last_name }}</h4>
                                    </div>
                                    <div class="profile-social">
                                        <a href="/teacher-profile/{{ $user->id }}"
                                            style="object-fit: contain">View/Update-Profile</a>
                                    </div>
                                    <div class="card-bottom"></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>


            <!-- Basic Bootstrap Table -->
                <div class="card pb-3 ms-3 table_card">
                    {{-- <h3 class="pt-3">Students List</h3> --}}
                    <h5 class="pt-3 tbl_h5">Students List</h5>
                    <div class="table dataTable text-nowrap dtbl_dropdown">
                        <table class="table" id="services">
                            <thead>
                                <tr>
                                    <th class="d-none">#</th>
                                    <th class="text-center">User</th>
                                    <th class="ps-1">First Name</th>
                                    <th class="ps-1">Last Name</th>
                                    <th class="ps-1">Email</th>
                                    <th class="ps-1">Phone</th>
                                    <th class="text-center">Status</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody class="table-border-bottom-0">
                                @if (count($studentList) != 0)
                                    @foreach ($studentList as $key => $stdlist)
                                        <!-- {{ $pic = $stdlist->profile_photo_path }} -->
                                        <tr id="row_{{ $stdlist->id }}">
                                            <td class="d-none">{{ $key + 1 }}</td>
                                            @if ($stdlist->profile_photo_path)
                                                <td class="text-center">
                                                    <img src="{{  $stdlist->profile_photo_path }}"
                                                        alt="user" width="50" height="50" class="rounded-circle" />
                                                </td>
                                            @else
                                                <td class="text-center">
                                                    <img src="{{ URL::asset('assets/images/users/avatar.jpg') }}" alt="user"
                                                        width="50" height="50" class="rounded-circle" />
                                                </td>
                                            @endif
                                            <td class="ps-1 name_{{ $stdlist->id }}">{{ ucwords($stdlist->first_name) }}</td>
                                            <td class="ps-1 name_{{ $stdlist->id }}">{{ ucwords($stdlist->last_name) }}</td>

                                            <td class="ps-1 phone_{{ $stdlist->id }}">
                                                @if ($stdlist->parent_id !== null)
                                                    {{ $stdlist->parent->email }}
                                                @else
                                                    {{ $stdlist->email }}
                                                @endif
                                            </td>

                                            <td class="ps-1 phone_{{ $stdlist->id }}">
                                                @if ($stdlist->parent_id !== null)
                                                    {{ $stdlist->parent->phone }}
                                                @else
                                                    {{ $stdlist->phone }}
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                @if ($stdlist->parent_id !== null && $stdlist->parent)
                                                    @if ($stdlist->parent->status == 'active' && $stdlist->status == 'active')
                                                        Active
                                                    
                                                    @else
                                                            In-Active
                                                    
                                                    @endif
                                                @else
                                                    @if ($stdlist->status == 'active')
                                                        Active
                                                    
                                                    @else
                                                            In-Active
                                                    
                                                    @endif
                                                @endif
                                            </td>
                                            <td class="text-center"><a class="dropdown-item view"
                                                    href="/studentdetail/{{ $stdlist->id }}"><i class="bx bx-detail"></i>
                                                    view</a></td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td><span>{{ 'No record found' }}</span></td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                </div>

        </div>


         
        <!-- Content wrapper -->
        <script>
            function savechanges() {
                $('.text-danger').remove();
                $('#save_changes').prop("disabled", true);
                // Show loader while the request is being processed
                $('#loader').show();
                let formData = new FormData();
                const uploaded_img = $('#uploadmyFile').prop('files')[0];
                const sizeInMB = uploaded_img.size / (1024 * 1024).toFixed(2);
                const user_id = $('#user_id').val();
                // const email = $('#email').val();
                const fname = ($('#fname').val()).trim();
                const lname = ($('#lname').val()).trim();
                // const phone = $('#phone').val();
                const gender = $('#gender').val();
                // const education = $('#education').val();
                const dob = ($("#date_of_birth").val()).trim();
                const education_type = $("#education_type").val();
                const course_name = ($("#course_name").val()).trim();
                const course_specialization = ($("#course_specialization").val()).trim();
                const experience_years = ($("#experience_years").val()).trim();
                const experience_months = ($("#experience_months").val()).trim();

                formData.append('fname', fname);
                formData.append('lname', lname);
                // formData.append('email', email)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
                formData.append('gender', gender);
                formData.append('date_of_birth', dob);
                formData.append('education_type', education_type);
                formData.append('course_name', course_name);
                formData.append('course_specialization', course_specialization);
                // formData.append('experience_years', experience_years);
                // formData.append('experience_months', experience_months);
                if (uploaded_img && sizeInMB <= 5) {
                    formData.append('user_img', uploaded_img);
                }
                if (reset_img) {
                    formData.append('reset_img', "yes");
                } else {
                    formData.append('reset_img', "no");
                }

                $.ajax({
                    type: "post",
                    url: "/update-teacher-profile",
                    contentType: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: formData,
                    success: function(data) {
                        if (data["status"] == "success") {
                            $('#save_changes').after(
                                `<div class="alert alert-success w-25 mt-2" role="alert">Your profile updated successfully.</div>`
                            );
                            window.location.reload();
                        } else {
                            $.each(data.errors, function(field_name, error) {
                                if (!$('#' + field_name + '').closest('div').next().hasClass(
                                        'text-danger')) {
                                    $('#' + field_name + '').closest('div').after(
                                        '<span class="text-strong text-danger">' + error + '</span>');
                                }
                            });
                            if (data.errors["user_img"]) {
                                $("#save_changes").closest('div').before('<span class="text-strong text-danger">' +
                                    data.errors["user_img"] + '</span>');
                            }
                            if (data.errors) {
                                $("#save_changes").closest('div').before(
                                    '<span class="text-strong text-danger"> Some required fields are missing. </span>'
                                );
                            }
                        }
                        $('#save_changes').prop("disabled", false);
                    },
                    error: function() {
                        $('#loader').hide();
                        $('#save_changes').prop("disabled", false);
                    },
                    complete: function() {
                        $('#loader').hide();
                        $('#save_changes').prop("disabled", false);
                    }
                });
            }
        </script>
    @endsection