@extends('backend.layouts.app')
@section('content')
<style>
    .btn-pink {
    background-color: #ff69b4; /* Pink color */
    color: white;
    border: none;
}
  .btn-disabled {
    background-color: #ccc !important;
    color: #555 !important;
    pointer-events: none;
    cursor: not-allowed;
    border: 1px solid #aaa;
    opacity: 0.8;
}
</style>
<div class="card">
        <div class="card-header">
            <h5 class="mb-0 h6">{{ translate('User Tried Payment History') }}</h5>
                @if(auth()->user()->user_type == 'staff')
                    <div class="col mb-2 mb-md-0">
                        @if ($hasIncompleteLead)
                            <a href="javascript:void(0);" class="btn btn-sm btn-disabled" disabled>
                                My Lead
                            </a>
                        @elseif (!$hasUnassignedLead)
                            <a href="javascript:void(0);" class="btn btn-sm btn-disabled" disabled>
                                My Lead
                            </a>
                        @else
                            <a href="javascript:voide(0)" onclick="window.location='{{ route('usertriedpayment.popupleadsave') }}'" class="btn btn-pink btn-sm">
                               My Lead
                            </a>
                        @endif
                    </div>
                @endif
            </div>
               <div class="card-body">
                <table class="table aiz-table mb-0">
                    <thead>
                        <tr>
                            <th>{{ translate('Id')}}</th>
                            <th>{{ translate('Name')}}</th>
                            <th>{{ translate('Email')}}</th>
                            <th>{{ translate('Mobile')}}</th>
                            <th>{{ translate('Pincode ')}}</th>
                            <th>{{ translate('User Type ')}}</th>
                            <th>{{ translate('Status ')}}</th>
                            <th>{{ translate('Date')}}</th>
                            <th>{{translate('Options')}}</th>
                            <th>{{translate('Response')}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($paymentHistory as $key => $value)
                            <tr>
                                <td>{{isset($value->user_id) ? $value->user_id : '' }}</td>
                                <td>{{isset($value->user->name) ? $value->user->name : '' }}</td>
                                <td>{{isset($value->user->email) ? $value->user->email : '-' }}</td>
                                <td>{{isset($value->user->phone) ? $value->user->phone : '-' }}</td>
                                <td>{{isset($value->pincode) ? $value->pincode : '-' }}</td>
                                <td>{{isset($value->user->user_type) ? $value->user->user_type : ''}}</td>
                                <td data-label="{{ translate('User Followup') }}">
                                    @if ($value->latestDetail)
                                        @if ($value->latestDetail->follow_up_status == "followup")
                                            <a href="#" class="btn btn-pink btn-sm">Followup</a>
                                        @elseif ($value->latestDetail->follow_up_status == "not_interest")
                                            <a href="#" class="btn btn-danger btn-sm">Not Interested</a>
                                        @elseif ($value->latestDetail->follow_up_status == "win")
                                            <a href="#" class="btn btn-success btn-sm">Win</a>
                                        @else
                                            <span style="color: black;">Not Connected</span> 
                                        @endif
                                    @else
                                        <span style="color: black;">Not Connected</span> 
                                    @endif
                               </td>
                                <td>{{isset($value->created_at) ? date('d-m-Y',strtotime($value->created_at)) : ''}}</td>
                                <td>
                                    <div class="dropdown">
                                        <button type="button" class="btn btn-sm btn-circle btn-soft-primary btn-icon dropdown-toggle no-arrow" data-toggle="dropdown" href="javascript:void(0);" role="button" aria-haspopup="false" aria-expanded="false">
                                            <i class="las la-ellipsis-v"></i>
                                        </button>
                                        @can('delete_tried_payment_history')
                                            <div class="dropdown-menu dropdown-menu-right dropdown-menu-xs">
                                                <a href="#" class="dropdown-item confirm-delete" data-href="{{route('deleteTriedPayment', $value->id)}}">
                                                    {{translate('Delete')}}
                                                </a>
                                            </div>
                                        @endcan
                                    </div>
                                </td>
                                <td data-label="{{ translate('Action') }}">
                                    <a data-toggle="modal" data-target="#popupbpLead" 
                                    data-popup-id="{{ $value->id }}"
                                    data-popup-userid="{{ $value->user_id }}" 
                                    data-user-response=""
                                    data-user-folloup=""
                                    data-user-createdby=""
                                    data-user-createdbyName=""
                                    data-user-createddate=""
                                    class="btn btn-soft-primary btn-icon btn-circle btn-sm edit-popup-btn">
                                        <i class="las la-external-link-alt aiz-side-nav-icon"></i>
                                    </a>
                               </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            {{$paymentHistory->links()}}
    </div>

<div class="text-form">
    <!-- Modal -->
    <div class="modal fade" id="popupbpLead" tabindex="-1" role="dialog" aria-labelledby="popupbpLeadLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="popupbpLeadLabel">{{ translate('Update User Response Text') }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="updatePopupForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="popup_id" name="popup_id" value="">
                        <input type="hidden" id="created_by" name="created_by" value="{{ Auth::id() }}">
                        <div class="form-group">
                            <label for="user_response_text">{{ translate('User Response Text') }}</label>
                            <textarea class="form-control" id="user_response_text" name="user_response_text" rows="3" placeholder="{{ translate('Enter user response text') }}" required></textarea>
                        </div>
                        <div class="form-group">
                            <label for="follow_up_status">Response</label>
                               <select class="form-control" id="follow_up_status" name="follow_up_status" required>
                                    <option value=''>--Please Select--</option>
                                    <option value="followup">Followup</option>
                                    <option value="not_interest">Not Interested</option>
                                    <option value="win">Win</option>
                                </select>
                        </div>

                        <div id="popup-history" class="mt-3"></div>

                        <!-- <div class="form-group mt-3 border-top pt-2" id="show_responses">
                            <label>Details</label>
                              User response text 
                            <div class="mb-2">
                                <span id="user_detail_response_text" class="text-secondary fst-italic">N/A</span>
                            </div>

                            <div id="popup-details" class="d-flex flex-wrap gap-2">
                                <span><strong>Created By:</strong> <span id="created-by-name">N/A</span></span>
                                <span class="mx-2">|</span>
                                <span><strong>Date:</strong> <span id="created-date">N/A</span></span>
                            </div>
                        </div> -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ translate('Close') }}</button>
                        <button type="submit" class="btn btn-primary">{{ translate('Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
     <!-- Modal  Ends Here -->
</div>    
@endsection
@section('modal')
    @include('modals.delete_modal')
@endsection

@section('script')

<script type="text/javascript">

        $(document).on("change", ".check-all", function() {
            if(this.checked) {
                // Iterate each checkbox
                $('.check-one:checkbox').each(function() {
                    this.checked = true;
                });
            } else {
                $('.check-one:checkbox').each(function() {
                    this.checked = false;
                });
            }

        });

        function sort_products(el){
            $('#sort_products').submit();
        }

        function sort_user_response(){
            $('#sort_products').submit();
        }
        
        function sort_follow_up_status(){
            $('#sort_products').submit();
        }
        
     

        // Handle modal data population when edit button is clicked
       $(document).on('click', '.edit-popup-btn', function() {
            $('#show_responses').show();
            var popupId = $(this).data('popup-id');
            var userID=$(this).data('popup-userid');
            var userResponse = $(this).data('user-response');
            var userFollowup = $(this).data('user-folloup');
            var userCreatedBy = $(this).data('user-createdby');

            if (!userResponse || userResponse === "") {
                $('#show_responses').hide();
            }
            var userCreatedByName = $(this).data('user-createdbyname');
            var userCreatedDateTime = $(this).data('user-createddate'); // e.g., "2025-02-10 14:23:00"

            // Convert to Date object
            var dateObj = new Date(userCreatedDateTime);

            // Month names
            var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                        "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

            // Ordinal function
            function getOrdinal(n) {
                if (n > 3 && n < 21) return n + 'th';
                switch (n % 10) {
                    case 1: return n + "st";
                    case 2: return n + "nd";
                    case 3: return n + "rd";
                    default: return n + "th";
                }
            }

            // Format date
            var formattedDate = getOrdinal(dateObj.getDate()) + ' ' + months[dateObj.getMonth()] + ' ' + dateObj.getFullYear();

            // Format time
            var hours = dateObj.getHours();
            var minutes = dateObj.getMinutes().toString().padStart(2, '0');
            var ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12; // 0 => 12
            var formattedTime = hours + ':' + minutes + ' ' + ampm;

            // Combine date and time
            var dateTimeText = formattedDate + ' ' + formattedTime;

            // Set values in modal
            $('#popup_id').val(popupId);
            $('#user_response_text').val('');
            //$('#created_by').val(userCreatedBy);
            
            //$('#user_detail_response_text').html(userResponse || 'N/A');
            //$('#created-by-name').html(userCreatedByName || 'N/A');
            //$('#created-date').html(dateTimeText);


            $('#popup-history').html('<p>Loading history...</p>');
            // AJax  Show the  Full History of the User 

            $.ajax({
                    url: "{{ route('usertriedpayment.popup.history', '') }}/" + popupId,
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            var html = '';
                            // Filter out records with null user_response_text
                            var filteredData = response.data.filter(item => item.user_response_text);

                            if (filteredData.length > 0) {
                                filteredData.forEach(function(item) {
                                    // Format date & time
                                    var dateObj = new Date(item.created_at);
                                    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", 
                                                "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
                                    var day = dateObj.getDate();
                                    var ordinal = (day > 3 && day < 21) ? day + 'th' : 
                                                (day % 10 === 1 ? day + "st" : day % 10 === 2 ? day + "nd" : day % 10 === 3 ? day + "rd" : day + "th");
                                    var formattedDate = ordinal + ' ' + months[dateObj.getMonth()] + ' ' + dateObj.getFullYear();
                                    var hours = dateObj.getHours();
                                    var minutes = dateObj.getMinutes().toString().padStart(2, '0');
                                    var ampm = hours >= 12 ? 'PM' : 'AM';
                                    hours = hours % 12;
                                    hours = hours ? hours : 12;
                                    var formattedTime = hours + ':' + minutes + ' ' + ampm;

                                    html += `
                                        <div class="form-group mt-3 border-top pt-2">
                                        <div class="d-flex flex-wrap gap-2">
                                                <span>${formattedDate} ${formattedTime}</span> 
                                                <span class="mx-2">|</span>
                                                <span>${item.created_by_user?.name ?? 'N/A'}</span>
                                            </div>
                                            <div class="mb-2">
                                                <span class="text-secondary fst-italic">${item.user_response_text}</span>
                                            </div>
                                        </div>
                                    `;
                                });
                            } else {
                                html = '<p>No history found.</p>';
                            }
                            $('#popup-history').html(html);
                        } else {
                            $('#popup-history').html('<p>Error loading history</p>');
                        }
                    },
                    error: function() {
                        $('#popup-history').html('<p>Server error while loading history.</p>');
                    }
                });
           });
        
        // Handle form submission
        $(document).on('submit', '#updatePopupForm', function(e) {
            e.preventDefault();

            let formData = new FormData($('#updatePopupForm')[0]);
            
            var popupId =  formData.get('popup_id');
            var userResponseText =  formData.get('user_response_text');
            var follow_up_status =  formData.get('follow_up_status');
            var createdby   = formData.get('created_by');
           
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{ route('usertriedpayment.popup.update', '') }}/" + popupId,
                type: 'POST',
                data: {
                    popupId:popupId,
                    user_response_text: userResponseText,
                    follow_up_status: follow_up_status,
                    created_by:createdby,
                },
                success: function (response) {
                    if(response.success) {
                        $('#popupbpLead').modal('hide');
                        location.reload();
                        AIZ.plugins.notify('success', response.message);
                    } else {
                        AIZ.plugins.notify('error', 'Something went wrong');
                    }
                },
                error: function (xhr) {
                    AIZ.plugins.notify('error', 'Something went wrong');
                }
            });
        });
    </script>
@endsection