@extends('backend.master_structure')

@section('content')
    <style>
        .buttonyear {
            padding: 4px 13px;
            margin: 2px;
        }
        .month-cell {
    cursor: pointer; /* Change cursor to pointer for month cells */
    color: #007bff; /* Default color for month text */
    transition: color 0.3s ease; /* Smooth transition for color change */
}

.month-cell:hover {
    color: #0056b3; /* Darker color for month text when hovered */
    background-color: #f5f5f5; /* Change background color on hover */
}

@media (min-width: 992px) {
    .modal-lg {
        max-width: 839px;
    }
}
@media (min-width: 576px) {
    .modal-dialog {
        width: 867px;
    }
}

.modal-title{
    color: #FFF;
}
    </style>
    @php
        use App\DashboardModel;
        $session_id = session()->get('session_id');
        $member_data_instance = new DashboardModel();
        $member_data = $member_data_instance->get_member_data($session_id);
        $user_id = $member_data->user_id;
    @endphp

    <div class="card mb-0">
        <div class="card-header">
            <h3 class="card-title"><i class="fa fa-user"></i> Profile Statistics</h3>
        </div>
        <div class="card-body">
                {{-- <div id="yearButtons">
                    <span><strong>Select one year for display the data :</strong></spans>
                    {{-- @php
                        $currentYear = date('Y');
                        $previousYear = $currentYear - 1;
                    @endphp

                    <button class="buttonyear btn btn-primary"
                        onclick="getData('{{ $previousYear }}', '{{ $user_id }}')">{{ $previousYear }}</button>
                    <button class="buttonyear btn btn-primary"
                        onclick="getData('{{ $currentYear }}', '{{ $user_id }}')">{{ $currentYear }}</button>
                        
                </div> --}}
                <form id="filterForm" method="GET" action="{{url('/')}}/year_month">
                    <input type="hidden" name="userId" value="{{ $user_id }}">
                    <div class="form-group">
                        <label for="yearSelect">Select Year</label>
                        <select id="yearSelect" name="year" class="form-select form-control select2 select2-hidden-accessible" onchange="validateSelection()">
                            <option value="">Select Year</option>
                            @foreach(range(2020, Carbon\Carbon::now()->year) as $year)
                                <option value="{{ $year }}" {{ $year == @$currentYear ? 'selected' : '' }}>{{ $year }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="managed-ad table-responsive border-top userprof-tab">
                <table class="table table-bordered table-hover mb-0 text-nowrap" id="table-body">
                    <thead>
                        <tr>
                            <th><strong>Month</strong></th>
                            <th><strong>Profile Views</strong></th>
                            <th><strong>Phone Number</strong></th>
                            <th><strong>Post Views</strong></th>
                            <th><strong>Facebook</strong></th>
                            <th><strong>Website</strong></th>
                            <th><strong>Contact Form</strong></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach(range(1, 12) as $month)
                        <tr onclick="fetchMonthData({{ $month }})">
                            <td class="month-cell">{{ strtoupper(date('M', mktime(0, 0, 0, $month, 1))) }}</td>
                            <td>{{ $data['Profile'][$month - 1] > 0 ? $data['Profile'][$month - 1] : '-' }}</td>
                            <td>{{ $data['PhoneNumber'][$month - 1] > 0 ? $data['PhoneNumber'][$month - 1] : '-' }}</td>
                            <td>{{ $data['View Post'][$month - 1] > 0 ? $data['View Post'][$month - 1] : '-' }}</td>
                            <td>{{ $data['Facebook'][$month - 1] > 0 ? $data['Facebook'][$month - 1] : '-' }}</td>
                            <td>{{ $data['Website'][$month - 1] > 0 ? $data['Website'][$month - 1] : '-' }}</td>
                            <td>{{ $data['Contact Form'][$month - 1] > 0 ? $data['Contact Form'][$month - 1] : '-' }}</td>
                        </tr>
                        @endforeach
                        <tr>
                            <td><strong>Total</strong></td>
                            <td><strong>{{ array_sum($data['Profile']) }}</strong></td>
                            <td><strong>{{ array_sum($data['PhoneNumber']) }}</strong></td>
                            <td><strong>{{ array_sum($data['View Post']) }}</strong></td>
                            <td><strong>{{ array_sum($data['Facebook']) }}</strong></td>
                            <td><strong>{{ array_sum($data['Website']) }}</strong></td>
                            <td><strong>{{ array_sum($data['Contact Form']) }}</strong></td>
                        </tr>
                    </tbody>
                </table>
                
            </div>
        </div>
    </div>
    

    <div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="dataModalLabel">Monthly Data for <span id="modalMonth"></span>, <span id="modalYear"></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Monthly Data Table -->
                    <table class="table table-bordered table-hover mb-0 text-nowrap" id="table-body">
                        <thead>
                            <tr>
                                <th><strong>Day</strong></th>
                                <th><strong>Profile Views</strong></th>
                                <th><strong>Phone Number</strong></th>
                                <th><strong>Post Views</strong></th>
                                <th><strong>Facebook</strong></th>
                                <th><strong>Website</strong></th>
                                <th><strong>Contact Form</strong></th>
                            </tr>
                        </thead>
                        <tbody id="monthlyDataBody">
                            @foreach(range(1, 12) as $month)
                            <tr onclick="fetchMonthData({{ $month }}, '{{ strtoupper(date('M', mktime(0, 0, 0, $month, 1))) }}')">
                                <td>{{ strtoupper(date('M', mktime(0, 0, 0, $month, 1))) }}</td>
                                <td id="profile-{{ $month }}">-</td>
                                <td id="phone-{{ $month }}">-</td>
                                <td id="post-{{ $month }}">-</td>
                                <td id="facebook-{{ $month }}">-</td>
                                <td id="website-{{ $month }}">-</td>
                                <td id="contact-{{ $month }}">-</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    function fetchMonthData(month) {
        var userId = "{{ $member_data->user_id }}";
        var currentYear = "{{ $currentYear }}";
        
        $.ajax({
            url: "{{ url('/fetch-month-data') }}",
            type: "GET",
            data: { month: month, year: currentYear, user_id: userId },
            success: function(response) {
                $('#monthlyDataBody').empty();

                // Populate the table with the data
                const profileViews = response.data.Profile;
                const phoneNumbers = response.data.PhoneNumber;
                const viewPosts = response.data['View Post'];
                const facebookData = response.data.Facebook;
                const websiteData = response.data.Website;
                const contactFormData = response.data['Contact Form'];
                const daysInMonth = new Date(currentYear, month, 0).getDate();
                for (let day = 1; day <= daysInMonth; day++) {
                    const profileViewCount = profileViews[day] !== 0 ? profileViews[day] : '-';
                    const phoneNumberCount = phoneNumbers[day] !== 0 ? phoneNumbers[day] : '-';
                    const viewPostCount = viewPosts[day] !== 0 ? viewPosts[day] : '-';
                    const facebookCount = facebookData[day] !== 0 ? facebookData[day] : '-';
                    const websiteCount = websiteData[day] !== 0 ? websiteData[day] : '-';
                    const contactFormCount = contactFormData[day] !== 0 ? contactFormData[day] : '-';
                    // Only add rows for days that have data
                    if (profileViews[day] !== undefined) {
                    $('#monthlyDataBody').append(`
                        <tr>
                            <td>${day}</td>
                            <td>${profileViewCount}</td>
                            <td>${phoneNumberCount}</td>
                            <td>${viewPostCount}</td>
                            <td>${facebookCount}</td>
                            <td>${websiteCount}</td>
                            <td>${contactFormCount}</td>
                        </tr>
                    `);
                }
                }

                // Open the modal after data is populated
                $('#dataModal').modal('show');
            },
            error: function(xhr, status, error) {
                console.error("An error occurred: " + error);
            }
        });
    }

    function closeModal() {
        $('#dataModal').modal('hide'); // Correct the ID here
        $('#monthlyDataBody').empty(); // Clear content when closed
    }
</script>

<script>
    function validateSelection() {
        const yearSelect = document.getElementById('yearSelect');
    
        if (yearSelect.value === "") {
            // Show alert if year is not selected
            Swal.fire({
                icon: 'warning',
                title: 'Warning',
                text: 'Please select a year before submitting!',
                confirmButtonText: 'OK'
            });
        } else {
            // Submit the form if the year is selected
            document.getElementById('filterForm').submit();
        }
    }
    </script>














@endsection