@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">
                    @include('frontend.include.backendAlert')
                </div>
            </div>
            <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">
                            
                            @if($studentInfo->researches)
                                <div class="row">
                                    <div class="col">
                                        <h3 class="mb-3 mt-5">Research Grant Application</h3>
                                    </div>
                                </div>
                                @foreach($studentInfo->researches as $research)
                                <div class="row">
                                    <div class="col">
                                        <strong>Session:</strong> {{$research->session}}
                                    </div>
                                    <div class="col">
                                        <strong>Start Date:</strong> {{ $research->start_date ? \Carbon\Carbon::parse($research->start_date)->format('d M, Y') : '' }}
                                    </div>
                                    <div class="col">
                                        <strong>End Date:</strong> {{ $research->end_date ? \Carbon\Carbon::parse($research->end_date)->format('d M, Y') : '' }}
                                    </div>
                                    <div class="col">
                                        <strong>Application Date:</strong> {{ $research->updated_at ? \Carbon\Carbon::parse($research->updated_at)->format('d M, Y') : '' }}
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col">
                                        <a href="{{ route('studentResearchApplicationView', ['student_id' => $studentInfo->id, 'form_id' => $research->id]) }}">
                                            View Application
                                        </a>
                                        You can update the application till {{ $research->end_date ? \Carbon\Carbon::parse($research->end_date)->format('d M, Y') : '' }}
                                        <a href="{{ url('/research-form') }}">Resubmit the application</a>
                                    </div>
                                </div>
                                @endforeach
                            
                            @endif

                            @if($studentInfo->courses)
                            <h3 class="mb-3 mt-5">Course/fees</h3>
                            <table class="table table-bordered table-striped">
                                {{-- <thead>
                                <tr>
                                    <th scope="col">Course Name</th>
                                </tr>
                                </thead> --}}
                                <tbody>
                                    
                                    @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;
                                        }
                                        $paymentTypeText = "Course Fee";
                                        $paymentTypeDescription = "";
                                        if($course->courseFees){
                                            foreach ($course->courseFees as $courseFee) {
                                                if($course->payment_type==$courseFee->type && $course->payment_type_id==$courseFee->id){
                                                $paymentTypeText = $courseFee->name;
                                                $paymentTypeDescription = $courseFee->description;
                                                }
                                            }
                                        }
                                        $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>
                                                <div class="row">
                                                    <div class="col">
                                                        <strong>{{$courseName}}</strong> 
                                                        {{-- - <strong><a href="{{ route('courseDetails', ['course_id' => $course->course_id]) }}" target="_blank">See course details</a></strong> --}}
                                                    </div>
                                                </div>
                                                @if($course->payment_type==0)
                                                <div class="row light-text">
                                                    <div class="col">
                                                        <strong>Start Date:</strong> 
                                                        {{ $course->courseStartDate ? \Carbon\Carbon::parse($course->courseStartDate)->format('d M, Y') : '' }}
                                                        {{-- {{ $course->courseStartDate->format('d M, Y') }} --}}
                                                    </div>
                                                    <div class="col ">
                                                        <strong>End Date:</strong> 
                                                        {{ $course->courseEndDate ? \Carbon\Carbon::parse($course->courseEndDate)->format('d M, Y') : '' }}
                                                        {{-- {{ $course->courseEndDate->format('d M, Y') }} --}}
                                                    </div>
                                                    <div class="col ">
                                                        <strong>Date:</strong> 
                                                        {{ $applicatonDate ? \Carbon\Carbon::parse($applicatonDate)->format('d M, Y') : '' }}
                                                        {{-- {{ $applicatonDate->format('d M, Y') }} --}}
                                                    </div>
                                                    <div class="col"></div>
                                                </div>
                                                @else
                                                <div class="row light-text">
                                                    <div class="col-9">
                                                        
                                                        {!! nl2br(e($paymentTypeDescription)) !!}
                                                    </div>
                                                    <div class="col-3 text-end">
                                                        <strong>Date:</strong> 
                                                        {{ $applicatonDate ? \Carbon\Carbon::parse($applicatonDate)->format('d M, Y') : '' }}
                                                        {{-- {{ $applicatonDate->format('d M, Y') }} --}}
                                                    </div>
                                                </div>
                                                @endif
                                                
                                                <div class="row light-text">
                                                    <div class="col">
                                                        <strong>Type: {{$paymentTypeText}}</strong>
                                                    </div>

                                                    <div class="col">
                                                         <strong>Total Paid: {{ $course->paid_amount }} BDT</strong>
                                                    </div>
                                                    
                                                   
                                                    <div class="col ">
                                                        <strong>Total Due: {{ $dueAmount }} BDT</strong>
                                                    </div>
                                                    <div class="col text-end">
                                                        @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-danger" type="submit">{{$paymentStatus}} Pay Now</button>
                                                            </form>
                                                        @else
                                                        <button class="btn btn-sm btn-success">{{$paymentStatus}}</button>
                                                        @endif


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



                        </div>
                        <div class="col tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                            @include('frontend.include.studentProfileBlockEdit', [
                                'form_type' => 'edit',
                                'action' => route('studentUpdate'),
                                'studnetInfo'=> $studentInfo,
                            ])
                            {{-- @include('frontend.include.studentProfileFormBlock') --}}
                            
                        </div>
                      </div>

            </div>

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

@endsection
@section('customScript')
<script src="{{ asset('assets/plugins/jqueryvalidate/jquery.validate.min.js') }}"></script>
<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'));
    });


    function setNationality() {
        if ($('#country').val() === 'BD') {
            $('#nationality').val('Bangladeshi');
            $('label[for="nid_birth"]').html('NID <span class="importantText">*</span>');
            $('#nid_birth').attr('placeholder', 'NID number');
        } else {
            $('#nationality').val('');
            $('label[for="nid_birth"]').html('Passport <span class="importantText">*</span>');
            $('#nid_birth').attr('placeholder', 'Passport number');
        }
    }

    // On page load
    //setNationality();

    // On country change
    $('#country').on('change', function () {
        setNationality();
    });


    $("#studentProfileUpdate").validate({
        rules: {

            nid_birth: {
                required: true,
                nidPassport: true
            },
            contact_number: {
                required: true,
                bdMobile: true
            }
        },
        messages: {
        },
        errorElement: "div",
        errorPlacement: function (error, element) {
            var feedbackElement = element.siblings('.invalid-feedback');
            if (feedbackElement.length) {
                feedbackElement.html(error.html());
            } else {
                error.addClass("invalid-feedback");
                element.closest(".col").append(error);
            }
        },
        // errorPlacement: function (error, element) {
        //     error.addClass("invalid-feedback"); // Bootstrap's error class
        //     element.closest(".form-group").append(error);
        // },
        highlight: function (element) {
            $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function (element) {
            $(element).addClass("is-valid").removeClass("is-invalid");
        },
        submitHandler: function (form) {
            // Add 'was-validated' class to trigger Bootstrap validation
            form.classList.add('was-validated');
            form.submit();
            //event.preventDefault();

        }
    });

    $.validator.addMethod("nidPassport", function(value, element) {
    var country = $('#country').val();

        if (country === 'BD') {
            // NID must be 10, 13, or 17 digits
            return this.optional(element) || /^\d{10}$|^\d{13}$|^\d{17}$/.test(value);
        } else {
            // Passport: just require non-empty string
            return this.optional(element) || value.trim().length > 0;
        }
    }, "Please enter a valid NID/Passport");

    // Custom validator for mobile number
    $.validator.addMethod("bdMobile", function(value, element) {
        var country = $('#country').val();
        value = value.trim();

        if (country === 'BD') {
            // Valid formats:
            // +8801715195499  (starts with +880, 13 digits total)
            // 01715195499     (starts with 0, 11 digits total)
            return this.optional(element) || /^\+880\d{10}$/.test(value) || /^0\d{10}$/.test(value);
        } else {
            // Other countries: digits, +, - allowed, at least 5 characters
            return this.optional(element) || /^[\d+\-]{5,}$/.test(value);
        }
    }, "Please enter a valid mobile number");




});


$(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