@extends('layouts.admin')
@section('content')



<div class="col-9 main-dash-left">
    <div class="analytics">
        <div class="name-head">
            <h2>User Analytics</h2>
            <select class="form-select select-main-head" aria-label="Default select example" id="timeFilter">
                <option value="year" {{ request('time_filter', 'year') == 'year' ? 'selected' : '' }}>Year</option>
                <option value="month" {{ request('time_filter') == 'month' ? 'selected' : '' }}>Month</option>
                <option value="week" {{ request('time_filter') == 'week' ? 'selected' : '' }}>Week</option>
                <option value="day" {{ request('time_filter') == 'day' ? 'selected' : '' }}>Day</option>
            </select>
        </div>
       
        <div class="cards-dashboard">
            <div class="row row-gap-3">
                <div class="col-lg-3 col-md-6">
                    <div class="inner-dashboard-card back-green">
                        <div class="ing-sec-acrd-dash">
                            <figure class="logo-card"><img src="{{asset('admin/images/total.png')}}" alt=""></figure>
                            <div class="main-card-analy d-flex">
                                <div class="text-disc-card">
                                    <p>Total Number of Users</p>
                                    <h4>{{ $analytics['total_users'] }}</h4>
                                </div>
                                <figure class="img-graph">
                                    <img src="{{asset('admin/images/green-line.png')}}" alt="">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="inner-dashboard-card back-purple">
                        <div class="ing-sec-acrd-dash">
                            <figure class="logo-card"><img src="{{asset('admin/images/return.png')}}" alt=""></figure>
                            <div class="main-card-analy d-flex">
                                <div class="text-disc-card">
                                    <p>Returning Customers % (min 1/year)</p>
                                    <h4>{{ $analytics['returning_percentage'] }}%</h4>
                                </div>
                                <figure class="img-graph">
                                    <img src="{{asset('admin/images/white-line.png')}}" alt="">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="inner-dashboard-card back-yellow">
                        <div class="ing-sec-acrd-dash">
                            <figure class="logo-card"><img src="{{asset('admin/images/top.png')}}" alt=""></figure>
                            <div class="main-card-analy d-flex">
                                <div class="text-disc-card">
                                    <p>Top Customers % (>1/year)</p>
                                    <h4>{{ $analytics['top_percentage'] }}%</h4>
                                </div>
                                <figure class="img-graph">
                                    <img src="{{asset('admin/images/orange-line.png')}}" alt="">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="inner-dashboard-card back-parrot">
                        <div class="ing-sec-acrd-dash">
                            <figure class="logo-card"><img src="{{asset('admin/images/lost.png')}}" alt=""></figure>
                            <div class="main-card-analy d-flex">
                                <div class="text-disc-card">
                                    <p>Lost Customer %  (did not come back this year)</p>
                                    <h4>{{ $analytics['lost_percentage'] }}%</h4>
                                </div>
                                <figure class="img-graph">
                                    <img src="{{asset('admin/images/parot-line.png')}}" alt="">
                                </figure>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <form id="exportForm" method="GET" action="{{ route('admin.users.download.csv') }}" style="display: none;">
    <input type="hidden" name="search" id="exportSearch">
    <input type="hidden" name="sort_by" id="exportSort">
    <input type="hidden" name="time_filter" id="exportTimeFilter">
</form>
        </div>
        <div class="sownload-cv-pdf">
        <a href="#" class="download-csv" onclick="exportData('csv')">Download CSV</a>
        <a href="#" class="download-pdf" onclick="exportData('pdf')">Download PDF</a>
        </div>
        
        <div class="main-notification-messege">
            <div class="notifi-list d-flex">
                <div class="cont-wrap">
                    <h6>User Management</h6>
                    <p style="margin-top: 6px ; font-size: 14px"><strong>Attention:</strong> This section provides a complete overview of all users who have made bookings through this platform, including both SA and SPO users. </p>
                    <p style="font-size: 14px">Customer IDs marked in blue represent those who started as guest users. When they create an account, the user will remain in blue. So we don't see which guest users have an account. Those marked in black indicate the registered account holders (those who created an account from the beginning).</p>
            </div>
                <div class="dropdowns-inner-list d-flex">
                    <div class="dropdowns-inner-list">
                        <div class="icon-search-main">
                            <i class="fa-solid fa-magnifying-glass"></i>
                            <input aria-describedby="passwordHelpBlock" placeholder="Search For User" type="text" id="searchUser" class="form-control" value="{{ request('search') }}">
                        </div>
                    </div>
                    <div class="filter-main-div">
                        <p class="lable-filt">Sort By:</p>
                        <div class="dropdown">
                            <button class="filter-btn dropdown-toggle" type="button" id="sortFilterDropdown"
                                    data-bs-toggle="dropdown" aria-expanded="false">
                                <i class="fa-solid fa-sort"></i>
                                {{ request('sort_by') == 'asc' ? 'Oldest' : 'Newest' }}
                            </button>
                            <ul class="dropdown-menu" aria-labelledby="sortFilterDropdown">
                                <li><a class="dropdown-item sort-option {{ request('sort_by') == 'desc' ? 'active' : '' }}" href="#" data-value="desc">Newest</a></li>
                                <li><a class="dropdown-item sort-option {{ request('sort_by') == 'asc' ? 'active' : '' }}" href="#" data-value="asc">Oldest</a></li>
                            </ul>
                        </div>
                    </div>
                    <form id="sortForm" method="GET">
                        <input type="hidden" name="sort_by" id="sortInput" value="{{ request('sort_by', 'desc') }}">
                    </form>
                    <a class="add-notification-btn" href="{{route('admin.add.user.view')}}">Add User</a>
                </div>
            </div>
            <div class="notification-table pt-0">
                <table id="usersTable" class="table">
                    <thead>
                        <tr class="head-class-td">
                            <th>Customer ID</th>
                            <th>Customer Name</th>
                            <th>contact number</th>
                            <th>email address</th>
                            <th>Address Details</th>
                            <th>Confirmed Bookings</th>
                            <th>Cancelled Bookings</th>
                            <th>Marketing Agreement </th>
                            <th>status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="userResults">
                        
                            @foreach($users as $key => $user)
                            <tr>

                           <td style="{{ $user->is_guest == 1 ? 'color: #a8d8f5; font-weight: bold;' : '' }}">
                                #{{ $user->id }}
                            </td>
                            <td>{{ $user->first_name . ' ' . $user->last_name }}</td>
                            <td>{{ $user->country_code . ' ' . $user->number }}</td>
                            <td>{{$user->email}}</td>
                            <td>
                                {{ $user->street }}<br>
                                {{ $user->zip_code }} {{ $user->city }}<br>
                                {{ $user->region }}<br>
                                {{ $user->country }}
                            </td>
                            <td>{{ $user->confirmed_completed_bookings_count}}</td>
                            <td>{{$user->cancelled_bookings_count}}</td>
                            <td>{{$user->marketing_aggrement == 1 ? 'Yes' : 'No'}}</td>
                            <td>
                                <select class="form-select select-active-block"
                                onchange="openStatusChangeModal('{{ $user->id }}', this.value, this)"
                                data-current-status="{{ $user->status == 1 ? 'Active' : 'Blocked' }}"
                            >
                                <option data-status='Active' class="active-op"  value="Active" {{ $user->status == 1 ? 'selected' : '' }}>Active</option>
                                <option class="block-op" data-status='Blocked' value="Blocked" {{ $user->status == 0 ? 'selected' : '' }}>Blocked</option>
                            </select>
                            </td>

                            

                           
                            <td>
                                <div class="upper-delete-btns d-flex">
                                    <a class="view-btn-eye" href="{{route('admin.user.profile',$user)}}">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                    <a class="edit-btn-eye" href="{{route('admin.user.edit',$user)}}">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </a>
                                    <a class="delete-btn-eye" href="javascript:void(0);" onclick="openDeleteModal('{{ $user->id }}')">
                                        <i class="fa-solid fa-trash"></i>
                                    </a>

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

    </div>
</div>
<div class="modal fade modal-delete-logout" id="changestatus" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="p-0 modal-body">
                <div class="inner-body-delete-logout">
                    <h4 id="status-text">Are you sure you want to change status?</h4>
                    <div class="upper-btns-modal-pair">
                        <button type="button" class="comn-modal-btns-transparent btn btn-primary" data-bs-dismiss="modal" onclick="resetStatusSelect()">No</button>
                        <form id="status-change-form" method="POST" action="{{ route('admin.user.status.update') }}">
                            @csrf
                            <input type="hidden" name="user_id" id="user-id">
                            <input type="hidden" name="new_status" id="new-status">
                            <button type="submit" class="comn-modal-btns-blue btn btn-primary">Yes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-delete-logout" id="deleteuser" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="p-0 modal-body">
                <div class="inner-body-delete-logout">
                    <h4 id="delete-text">Are you sure you want to delete this user?</h4>
                    <div class="upper-btns-modal-pair">
                        <button type="button" data-bs-dismiss="modal" class="comn-modal-btns-transparent btn btn-primary">No</button>
                        <form id="delete-user-form" method="POST">
                            @csrf
                            <input type="hidden" name="user_id" id="delete-user-id">
                            <button type="submit" class="comn-modal-btns-blue btn add-user">Yes</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
    document.getElementById('timeFilter').addEventListener('change', function() {
        const timeFilter = this.value;
        const url = new URL(window.location.href);
        url.searchParams.set('time_filter', timeFilter);
        window.location.href = url.toString();
    });
    $('#usersTable').DataTable({
        paging: true,
        searching: true, 
        info: true,
        lengthChange: true,
        pageLength: 10,
        ordering: false, 
        language: {
            lengthMenu: 'Show _MENU_ entries',
            paginate: {
                previous: '&laquo;',
                next: '&raquo;'
            }
        },
        dom: '<"top"lf>rt<"bottom"ip><"clear">'
    });

    // $('#searchUser').on('keyup', function () {
    //     $('#usersTable').DataTable().search(this.value).draw();
    // });

});

    //  document.getElementById('sort_filter').addEventListener('change', function(){
    //     this.form.submit();
    // });
    document.querySelectorAll('.sort-option').forEach(item => {
        item.addEventListener('click', function (e) {
            e.preventDefault();
            const sortValue = this.getAttribute('data-value');
            document.getElementById('sortInput').value = sortValue;
            document.getElementById('sortForm').submit();
        });
    });
    let statusSelectEl = null;
    function openStatusChangeModal(userId, newStatus, selectEl) {
        statusSelectEl = selectEl; // save reference to dropdown

        const statusText = newStatus === 'Active'
            ? 'Are you sure you want to activate this user?'
            : 'Are you sure you want to block this user?';

        document.getElementById('status-text').innerText = statusText;
        document.getElementById('user-id').value = userId;
        document.getElementById('new-status').value = newStatus;

        const modal = new bootstrap.Modal(document.getElementById('changestatus'));
        modal.show();
    }

    function resetStatusSelect() {
        if (statusSelectEl) {
            const current = statusSelectEl.getAttribute('data-current-status');
            statusSelectEl.value = current;
        }
    }

    function openDeleteModal(userId) {
        document.getElementById('delete-user-id').value = userId;

        var myModal = new bootstrap.Modal(document.getElementById('deleteuser'));
        myModal.show();

        $('#delete-user-form').off('submit').on('submit', function (e) {
            e.preventDefault(); 

            var userId = $('#delete-user-id').val();
            var formData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                user_id: userId
            };

            $.ajax({
                url: "{{route('admin.user.delete')}}",
                type: 'POST',
                data: formData,
                success: function(response) {
                    myModal.hide();
                    location.reload(); 
                },
                error: function(xhr, status, error) {
                    // On error, show an error message
                    alert('Something went wrong! Please try again later.');
                }
            });
        });
    }

    $(document).ready(function() {
        $('#searchUser').on('keyup', function() {
            let searchQuery = $(this).val().toLowerCase();  
            $('.download-pdf, .download-csv').each(function() {
            let href = $(this).attr('href').split('?')[0];
            $(this).attr('href', href + '?search=' + encodeURIComponent(searchQuery));
        });
            // $('#userResults tr').each(function() {  
            //     let rowText = $(this).text().toLowerCase();  
            //     if (rowText.indexOf(searchQuery) === -1) {  
            //         $(this).hide();
            //     } else {
            //         $(this).show();  
            //     }
            // });
            $('#usersTable').DataTable().search(this.value).draw();
        });
    });
    function exportData(type) {
    // Get current filter values
   let sort_by = "{{ request('sort_by') }}";
    $('#exportSearch').val($('#searchUser').val());
    $('#exportSort').val(sort_by);
    $('#exportTimeFilter').val($('#timeFilter').val());
    
    // Set the correct action URL
    let action = type === 'csv' 
        ? "{{ route('admin.users.download.csv') }}" 
        : "{{ route('admin.users.download.pdf') }}";
    $('#exportForm').attr('action', action);
    
    // Submit the form
    $('#exportForm').submit();
}
</script>
@endsection