@extends('frontend.master')
@section('stylesheet')
<link rel="stylesheet" type="text/css" href="{{ asset('assets/plugins/cropper/cropper.min.css') }}"/> 
@endsection
@section('content')
    <section id="UserInfoPage">
        <div class="container my-5">
            <div class="row">
                <div class="col-md-3">
                    <div class="userCardView">
                        <div class="card">
                            <div class="card-header text-center">
                                @if(!empty($studentInfo) && $studentInfo->profile_pic != '')
                                <img src="{{ asset('storage/uploads/students/thumbnail') }}/{{$studentInfo->profile_pic}}" style="width: 200px;background:#fff" />
                                @else
                                <img src="{{ asset('assets/frontend/images/avatar.png') }}" style="width: 200px;background:#fff" />
                                @endif
                                
                                <h5 class="mt-3">{!! $studentInfo->first_name !!} {!! $studentInfo->last_name !!}</h5>
                            </div>
                            {{-- <div class="card-body text-center">
                                <p class="mb-0"><strong class="pr-1">Student ID: </strong>{!! $studentInfo->id_number !!} <span class="d-none">{!! $studentInfo->id !!} </span></p>
                                @if ($studentSummary->course_count>0)
                                <p class="mb-0"><strong class="pr-1">Course Enroll:</strong>{!! $studentSummary->course_count !!}</p>
                                @endif
                                @if ($studentSummary->total_amount_due>0)
                                <p class="mb-0"><strong class="pr-1">Payment Due:</strong>{!! $studentSummary->total_amount_due !!}</p>
                                @endif
                                @if ($studentSummary->total_amount_paid)
                                <p class="mb-0"><strong class="pr-1">Paid:</strong>{!! $studentSummary->total_amount_paid !!}</p>
                                @endif
                            </div> --}}
                        </div>
                    </div>
                </div>
                <div class="col-md-9 studentDashboardTab">
                    <nav class="row">
                        <div class="col nav nav-tabs" id="nav-tab" role="tablist">
                            <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Course</button>
                            <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile Information</button>
                        </div>
                    </nav>
                    <div class="row tab-content" id="nav-tabContent">
                        <div class="col tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                            <h3 class="mb-3 mt-5">My Course</h3>
                            <table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th scope="col">Sl.</th>
                                    <th scope="col">Course Name</th>
                                    <th scope="col">Fees</th>
                                    <th scope="col">Paid Amount</th>
                                    <th scope="col">Due Amount</th>
                                    <th scope="col">Enroll Date</th>
                                    <th scope="col">payment status</th>
                                    {{-- <th scope="col">View Link</th> --}}
                                </tr>
                                </thead>
                                <tbody>
                                        {{-- {{dd($studentInfo)}} --}}
                                {{-- @foreach($studentInfo->applications as $key=>$application)
                                {{var_dump($application->course->amount)}}
                                @endforeach
                                {{dd()}} --}}
                                @foreach($studentInfo->courses as $key=>$course)
                                    @php
                                        $courseAmount = $course->course_amount;
                                        $courseName = $course->course_title;
                                        if($course->course_type=='master'){
                                            $courseAmount = $course->masters_amount;
                                            $courseName = $course->masters_title;
                                        }
                                        $dueAmount = (int)$course->registrationTimeAmount  - (int)$course->paid_amount;
                                        $applicatonDate = strtotime($course->application_date);
                                        $applicatonDate = date('Y-m-d',$applicatonDate);


                                        $paymentStatus = $dueAmount==0 ? 'Paid' : 'Due';

                                        //$paidStatus = $dueAmount == '0' ? $applicaiton->paid_status :($dueAmount == 0 ? 'p':'r');
                                    @endphp
                                    
                                    <tr>
                                        <td>{{$key + 1}}</td>
                                        <td>
                                            {{$courseName}}
                                            {{-- {{!empty($studentPrograms) && isset($studentPrograms[$application->program_id]) ? $studentPrograms[$application->program_id]->title : ""}} --}}
                                        </td>
                                        <td>{{$course->registrationTimeAmount}}</td>
{{--                                                <td>{{!empty($studentPrograms) && isset($studentPrograms[$studentCourse->program_id]) ? ($studentCourse->page_name == 'Certification Program' ? $studentCourse->payment_details_amount : $studentPrograms[$studentCourse->program_id]->amount) : "0"}}</td>--}}
                                        <td>{{$course->paid_amount}}</td>
                                        <td>{{$dueAmount}}</td>
                                        <td>{{$applicatonDate}}</td>
                                        <td>
                                            
                                            @if($paymentStatus=='Due')
                                                <form action="{{ route('studentPayNow') }}" method="POST">
                                                    @csrf
                                                    <input name="payment_id" value="{{$course->payment_id}}" type="hidden" />
                                                    <button class="btn btn-sm btn-primary" type="submit">{{$paymentStatus}} Pay Now</button>
                                                </form>
                                            @else
                                                {{$paymentStatus}}
                                            @endif

                                            {{-- {{$paymentStatus[$paidStatus]}} - {{$studentCourse->paid_status}} - {{$paidStatus}}
                                            @if($paidStatus != 'p')
                                                <form action="{{ route('studentPayNow') }}" method="POST">
                                                    @csrf
                                                    <input name="payment_id" value="{{$studentCourse->payment_id}}" type="hidden" />
                                                    <button class="btn btn-sm btn-primary-sm pull-right" type="submit" onclick="return confirm('Are you sure you want to pay this course?')"><i class="fa fa-dollar">Pay Now</i></button>
                                                </form>
                                            @endif --}}
                                        </td>
                                        {{-- <td><a href="#">View</a></td> --}}
                                    </tr>
                                @endforeach


                                </tbody>
                            </table>
                        </div>
                        <div class="col tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            @include('frontend.include.studentProfileFormBlock')
                        </div>
                      </div>

            </div>

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

@endsection
@section('customScript')
<script src="{{ asset('assets/plugins/cropper/cropper.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
    // Check if there's a saved tab in localStorage
    var savedTab = localStorage.getItem('activeTab');

    if (savedTab) {
        // Remove 'active' class from all tabs and tab panes
        $('#nav-tab .nav-link').removeClass('active');
        $('.tab-pane').removeClass('show active');

        // Add 'active' class to the saved tab and its corresponding tab pane
        $('#' + savedTab).addClass('active');
        $($('#' + savedTab).data('bs-target')).addClass('show active');
    }

    // Add click event listener to each tab button
    $('#nav-tab .nav-link').on('click', function() {
        // Save the active tab ID in localStorage
        localStorage.setItem('activeTab', $(this).attr('id'));
    });
});


$(document).ready(function() {
    var cropper;
    var $img = $('#cropImage');
    var maxSizeInKB = 512;

    $('#uploadImage').on('change', function(event) {
        var file = event.target.files[0];
        if (!file) return;

        var reader = new FileReader();
        reader.onload = function(e) {
            $img.attr('src', e.target.result).show();

            // Initialize Cropper.js
            cropper = new Cropper($img[0], {
                aspectRatio: 1 / 1,
                viewMode: 1,
                autoCropArea: 1,
                scalable: true,
                zoomable: true,
            });

            $('#cropButton').show();
        };
        reader.readAsDataURL(file);
    });

    $('#cropButton').on('click', function() {
        var croppedCanvas = cropper.getCroppedCanvas({
            fillColor: '#fff',
        });

        // Resize the image to limit its size to 512KB
        function resizeImage(canvas, maxSizeInKB) {
            var quality = 0.9;
            var resizedDataUrl;

            do {
                resizedDataUrl = canvas.toDataURL('image/jpeg', quality);
                var fileSizeInKB = dataURLToBlob(resizedDataUrl).size / 1024;
                quality -= 0.05;
            } while (fileSizeInKB > maxSizeInKB && quality > 0.1);

            return resizedDataUrl;
        }

        var resizedDataUrl = resizeImage(croppedCanvas, maxSizeInKB);
        // Display the resized image inside the div
        $('#resizedImageContainer').html('<img src="' + resizedDataUrl + '" alt="Resized Image" style="max-width: 100%;">');

        // Store the resized image data in the hidden input
        $('#croppedImageData').val(resizedDataUrl);

        // Show the Upload/Save button
        $('#uploadButton').show();
    });

    $('#uploadButton').on('click', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Check if cropped image data is present
        if (!croppedImageData) {
            alert('Please crop the image before submitting.');
            e.preventDefault(); // Prevent form submission
        }

        // Submit the form
        $('#studentProfileUpdate').submit();
    });

    $('#studentProfileUpdate').on('submit', function(e) {
        var croppedImageData = $('#croppedImageData').val();
        
        // Prevent submission if no cropped image data
        // if (!croppedImageData) {
        //     alert('Please crop the image before submitting.');
        //     e.preventDefault(); // Prevent form submission
        // }

        // Additional form validation can go here
    });

    // Utility function to convert dataURL to Blob
    function dataURLToBlob(dataUrl) {
        var arr = dataUrl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type:mime});
    }
});

    </script>
@endsection