@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">
            @include('frontend.include.backendAlert')
            <div class="row">
                <div class="col-md-3">
                    @include('frontend.organization.organizationSidebar')
                </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">Dashboard</button>
                            <button class="nav-link" id="nav-availableCourses-tab" data-bs-toggle="tab" data-bs-target="#nav-availableCourses" type="button" role="tab" aria-controls="nav-availableCourses" aria-selected="false">Available Courses</button>
                            <button class="nav-link" id="nav-subscribedCourses-tab" data-bs-toggle="tab" data-bs-target="#nav-subscribedCourses" type="button" role="tab" aria-controls="nav-subscribedCourses" aria-selected="false">Registered Courses</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>
                            <button class="nav-link" id="nav-paymentTransaction-tab" data-bs-toggle="tab" data-bs-target="#nav-paymentTransaction" type="button" role="tab" aria-controls="nav-paymentTransaction" aria-selected="false">Payment/transaction</button>
                        </div>
                    </nav>
                    <div class="row tab-content" id="nav-tabContent">
                        <div class="col tab-pane fade show active pt-3" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">

                            @if($studentInfo->courses->isEmpty())
                            <div class="row mt-3">
                                <div class="col">
                                    <p class="infoBlockText">
                                    
                                        No registerd courses
                                    
                                </p>
                                </div>
                            </div>
                            @else

                            <div class="row">
                                <div class="col">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th scope="col">Course Name</th>
                                            {{-- <th scope="col">View Link</th> --}}
                                        </tr>
                                        </thead>
                                        <tbody>
                                            
                                            {{-- @dd($studentInfo->courses) --}}
                                            @foreach($studentInfo->courses as $subscribedCourse)
                                            {{-- @dd($subscribedCourse) --}}
                                                @php
                                                    $registeredStudentIds = json_decode($subscribedCourse->registeredStudentIds);
                                                    $registeredStudentCount = count($registeredStudentIds);
                                                    // dd($subscribedCourse);
                                                    
                                                @endphp
                                                <tr>
                                                    <td>
                                                        <div class="row">
                                                            <div class="col">
                                                                <strong>{{ $subscribedCourse->course_title }}</strong> - <strong><a href="{{ route('courseDetails', ['course_id' => $subscribedCourse->course_id]) }}" target="_blank">See course details</a></strong>
                                                            </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                <strong>Start Date:</strong> {{ $subscribedCourse->courseStartDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-center">
                                                                <strong>End Date:</strong> {{ $subscribedCourse->courseEndDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-end">
                                                                <strong>Registration Date:</strong> {{ $subscribedCourse->updated_at->format('d M, Y') }}
                                                            </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                <a href="{{ route('organizationSelectEmployee', ['courseId' => $subscribedCourse->course_id, 'paymentDetailsId' => $subscribedCourse->payment_id]) }}">
                                                                    <strong>Total Registered: {{ $registeredStudentCount }}</strong>
                                                                </a>
                                                            </div>
                                                            <div class="col">
                                                                 <strong>Course Fee/student:</strong> {{ $subscribedCourse->course_amount }} BDT
                                                            </div>
                                                           
                                                            <div class="col text-end">
                                                                <strong>Total Fee: {{ $registeredStudentCount * $subscribedCourse->course_amount }} BDT</strong>
                                                           </div>
                                                        </div>
                                                        
                                                        <div class="row light-text">

                                                            <div class="col">
                                                                 <strong>Total Paid:</strong> {{ $subscribedCourse->paid_amount }} BDT
                                                            </div>
                                                           
                                                            <div class="col text-center">
                                                                <strong>Total Due: {{ $subscribedCourse->amount - $subscribedCourse->paid_amount }} BDT</strong>
                                                            </div>
                                                            <div class="col text-end">
                                                                @if($subscribedCourse->amount - $subscribedCourse->paid_amount>0)
                                                                <form action="{{ route('studentPayNow') }}" method="POST">
                                                                    @csrf
                                                                    <input name="payment_id" value="{{$subscribedCourse->payment_id}}" type="hidden" />
                                                                    <button class="btn btn-sm btn-primary" type="submit">Pay Now</button>
                                                                </form>
                                                                @else
                                                                <strong>Paid</strong>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                               
                                </div>

                            </div>
                            @endif
                            
                            
                        </div>


                        <div class="col tab-pane fade" id="nav-availableCourses" role="tabpanel" aria-labelledby="nav-availableCourses-tab">
                            <div class="row mt-3">
                                <div class="col">
                                    <p class="infoBlockText text-center">
                                    @if($availableCourses->isEmpty())
                                        Currently no courses are open, please check back later.
                                    @else
                                       Select Course and click the register button. You can select employee/student on the next page
                                    @endif
                                </p>
                                </div>
                            </div>
                            @if(!$availableCourses->isEmpty())
                            <div class="row">
                                <div class="col">
                                    <form method="GET" id="courseSelectForm">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th scope="col">Select</th>
                                            <th scope="col">Course Name</th>
                                            {{-- <th scope="col">View Link</th> --}}
                                        </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($availableCourses as $availableCourse)
                                                @if($availableCourse->type>2)
                                                <tr>
                                                    <td>
                                                        <input
                                                            type="radio"
                                                            name="course_id"
                                                            value="{{ $availableCourse->id }}"
                                                            required
                                                        >
                                                    </td>
                                                    <td>
                                                        <div class="row">
                                                            <div class="col">
                                                                <strong>{{ $availableCourse->title }}</strong>
                                                            </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                 <strong>Course Fee/student:</strong> {{ $availableCourse->amount }}
                                                            </div>
                                                            <div class="col text-end">
                                                                <strong><a href="{{ route('courseDetails', ['course_id' => $availableCourse->id]) }}" target="_blank">See course details</a></strong>
                                                           </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                <strong>Start Date:</strong> {{ $availableCourse->lastDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-center">
                                                                <strong>End Date:</strong> {{ $availableCourse->lastDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-end">
                                                                <strong>Register before:</strong> {{ $availableCourse->lastDate->format('d M, Y') }}
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                    <button type="submit" class="btn btn-primary mt-3 mb-5">
                                        Register
                                    </button>
                                </form>
                                </div>

                            </div>
                            @endif


                        </div>

                        

                        <div class="col tab-pane fade" id="nav-subscribedCourses" role="tabpanel" aria-labelledby="nav-subscribedCourses-tab">
                            @if($studentInfo->courses->isEmpty())
                            <div class="row mt-3">
                                <div class="col">
                                    <p class="infoBlockText">
                                    
                                        No registerd courses
                                    
                                </p>
                                </div>
                            </div>
                            @else

                            <div class="row">
                                <div class="col">
                                    <table class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th scope="col">Course Name</th>
                                            {{-- <th scope="col">View Link</th> --}}
                                        </tr>
                                        </thead>
                                        <tbody>
                                            
                                            {{-- @dd($studentInfo->courses) --}}
                                            @foreach($studentInfo->courses as $subscribedCourse)
                                            {{-- @dd($subscribedCourse) --}}
                                                @php
                                                    $registeredStudentIds = json_decode($subscribedCourse->registeredStudentIds);
                                                    $registeredStudentCount = count($registeredStudentIds);
                                                    // dd($subscribedCourse);
                                                    
                                                @endphp
                                                <tr>
                                                    <td>
                                                        <div class="row">
                                                            <div class="col">
                                                                <strong>{{ $subscribedCourse->course_title }}</strong> - <strong><a href="{{ route('courseDetails', ['course_id' => $subscribedCourse->course_id]) }}" target="_blank">See course details</a></strong>
                                                            </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                <strong>Start Date:</strong> {{ $subscribedCourse->courseStartDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-center">
                                                                <strong>End Date:</strong> {{ $subscribedCourse->courseEndDate->format('d M, Y') }}
                                                            </div>
                                                            <div class="col text-end">
                                                                <strong>Registration Date:</strong> {{ $subscribedCourse->updated_at->format('d M, Y') }}
                                                            </div>
                                                        </div>
                                                        <div class="row light-text">
                                                            <div class="col">
                                                                <a href="{{ route('organizationSelectEmployee', ['courseId' => $subscribedCourse->course_id, 'paymentDetailsId' => $subscribedCourse->payment_id]) }}">
                                                                    <strong>Total Registered: {{ $registeredStudentCount }}</strong>
                                                                </a>
                                                            </div>
                                                            <div class="col">
                                                                 <strong>Course Fee/student:</strong> {{ $subscribedCourse->course_amount }} BDT
                                                            </div>
                                                           
                                                            <div class="col text-end">
                                                                <strong>Total Fee: {{ $registeredStudentCount * $subscribedCourse->course_amount }} BDT</strong>
                                                           </div>
                                                        </div>
                                                        
                                                        <div class="row light-text">

                                                            <div class="col">
                                                                 <strong>Total Paid:</strong> {{ $subscribedCourse->paid_amount }} BDT
                                                            </div>
                                                           
                                                            <div class="col text-center">
                                                                <strong>Total Due: {{ $subscribedCourse->amount - $subscribedCourse->paid_amount }} BDT</strong>
                                                            </div>
                                                            <div class="col text-end">
                                                                @if($subscribedCourse->amount - $subscribedCourse->paid_amount>0)
                                                                <form action="{{ route('studentPayNow') }}" method="POST">
                                                                    @csrf
                                                                    <input name="payment_id" value="{{$subscribedCourse->payment_id}}" type="hidden" />
                                                                    <button class="btn btn-sm btn-primary" type="submit">Pay Now</button>
                                                                </form>
                                                                @else
                                                                <strong>Paid</strong>
                                                                @endif
                                                            </div>
                                                        </div>
                                                        
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                               
                                </div>

                            </div>
                            @endif


                        </div>

                        <div class="col tab-pane fade" id="nav-paymentTransaction" role="tabpanel" aria-labelledby="nav-paymentTransaction-tab">
                            <table class="table table-bordered table-striped mt-3">
                                <thead>
                                <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Status</th>
                                    <th scope="col">Tran Id</th>
                                    <th scope="col">Date</th>
                                    <th scope="col">Amount</th>
                                    <th scope="col">Card type</th>
                                </tr>
                                </thead>
                                <tbody>
                                    @forEach($orders as $order)
                                    <tr>
                                        <td>{{$order->id}}</td>
                                        <td>{{$order->status}}</td>
                                        <td>{{$order->transaction_id}}</td>
                                        <td>{{$order->created_at}}</td>
                                        <td>{{$order->amount}}</td>
                                        <td>{{$order->card_type}}</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.organizationProfileFormBlock')
                        </div>
                      </div>

            </div>

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

@endsection
@section('customScript')
<script src="{{ asset('assets/plugins/cropper/cropper.min.js') }}"></script>
<script>
    document.getElementById('courseSelectForm').addEventListener('submit', function (e) {
        e.preventDefault();
    
        const selected = document.querySelector('input[name="course_id"]:checked');
    
        if (!selected) return;
    
        const courseId = selected.value;
    
        window.location.href = "{{ route('organizationSelectEmployee') }}?courseId=" + courseId;
    });
    </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