@extends('layouts.master')

<title>All Tickets</title>

@section('content')

<script>
    
    $(document).ready(function(){
        $('.side-bar-links a').removeClass('bg-light-color');
        $('.aw-a-inbox').addClass('bg-light-color');
    });
    
</script>

<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet">
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<!-- SweetAlert2 CSS -->
<link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>

@php
$companyId = getSelectedCompany();
$company_users = get_company_users($companyId);
@endphp

<script>
$(document).ready(function() {
    // Toggle filter dropdown on button click
    $('.list-filter-btn').click(function() {
        $('.filter-options').toggle();
    });

    // Initial hide for handle_multiple__options
    $('.filter-options').hide();
    $('.handle_multiple__options').hide();

    // Toggle visibility of handle_multiple__options on button click
    $('.handle-multiple-btn').click(function() {
        $('.handle_multiple__options').toggle();
    });

    // Initially disable all the buttons
    $('.handle_multiple__options .tags button').prop('disabled', true);

    // Enable/disable buttons based on the select all checkbox
    // $('#select-all').change(function() {
    //     if ($(this).is(':checked')) {
    //         $('.handle_multiple__options .tags button').prop('disabled', false);
    //     } else {
    //         $('.handle_multiple__options .tags button').prop('disabled', true);
    //     }
    // });

    // Show the modal when "Assign post" button is clicked
    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
        e.preventDefault();
        $('#customModal').show();
    });

    // Show the modal when "Move" button is clicked
    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
        e.preventDefault();
        $('#customModal2').show();
    });

    // Show the modal when "Reply to multiple" button is clicked
    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
        e.preventDefault();
        $('#customModal3').show();
    });

    // Close the modal when the close button or outside the modal is clicked
    $('.modal-close, .modal').click(function() {
        $('.modal').hide();
    });

    // Prevent modal content from closing the modal when clicked
    $('.modal-content').click(function(e) {
        e.stopPropagation();
    });

    // Update Select status options based on Select filter selection
    $('#filter-select').change(function() {
        var selectedFilter = $(this).val();
        console.log("Selected filter:", selectedFilter); // Debugging log
        updateStatusOptions(selectedFilter);
    });

    // Initially hide filter based data section
    $('.filter_based__data').hide();

    // Function to update status options based on selectedFilter
    function updateStatusOptions(selectedFilter) {
        console.log("Updating status options for:", selectedFilter); // Debugging log
        switch (selectedFilter) {
            case 'Assigned to':
                // $('#status-select').html(`
                //     <option disabled value="">Select assigned to</option>
                //     <option value="Assigned">Assigned</option>
                //     <option value="Unassigned">Unassigned</option>
                //     <option value="Margin">Margin</option>
                // `);
                var options = '<option value="">Select assigned to</option>';
                // Loop through the company_users array
                @foreach($company_users as $company_user)
                    options += '<option value="{{ $company_user->user->id }}">{{ $company_user->user->name }}</option>';
                @endforeach
                
                $('#status-select').html(options);
                $('.filter_based__data').show();
                break;
            case 'With activity':
                $('#status-select').html(`
                    <option value="">Select No activity</option>
                    <option value="last 24 hours">Last 24 hours</option>
                    <option value="last 3 days">Last 3 days</option>
                    <option value="last week">Last week</option>
                    <option value="last month">Last month</option>
                    <option value="last 3 months">Last 3 months</option>
                    <option value="last 6 months">Last 6 months</option>
                    <option value="last year">Last year</option>
                    <option value="the past 2 years">The past 2 years</option>
                    <option value="the past 3 years">The past 3 years</option>
                    <option value="the past 4 years">The past 4 years</option>
                    <option value="the past 5 years">The past 5 years</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'No activity':
                $('#status-select').html(`
                    <option value="">Select No activity</option>
                    <option value="last 24 hours">Last 24 hours</option>
                    <option value="last 3 days">Last 3 days</option>
                    <option value="last week">Last week</option>
                    <option value="last month">Last month</option>
                    <option value="last 3 months">Last 3 months</option>
                    <option value="last 6 months">Last 6 months</option>
                    <option value="last year">Last year</option>
                    <option value="the past 2 years">The past 2 years</option>
                    <option value="the past 3 years">The past 3 years</option>
                    <option value="the past 4 years">The past 4 years</option>
                    <option value="the past 5 years">The past 5 years</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Editor':
                $('#status-select').html(`
                    <option value="">Select Editor</option>
                    <option value="Computer tool">Computer tool</option>
                    <option value="Direct editor">Direct editor</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Spam':
                $('#status-select').html(`
                    <option value="">Select Spam</option>
                    <option value="marked as spam">Marked as spam</option>
                    <option value="marked as not spam">Marked as not spam</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Status':
                $('#status-select').html(`
                    <option value="">Select status</option>
                    <option value="open">Open</option>
                    <option value="waiting">Waiting</option>
                    <option value="done">Done</option>
                `);
                $('.filter_based__data').show();
                break;
            case 'Tags':
                
                var options = '<option value="">Select Tags</option>';
                @foreach($tags as $tag)
                    options += '<option value="{{$tag->name}}">{{$tag->name}}</option>';
                @endforeach
                
                $('#status-select').html(options);
                    
                $('.filter_based__data').show();
                break;
            case 'Users':
                
                var options = '<option value="">Select Users</option>';
                // Loop through the company_users array
                @foreach($company_users as $company_user)
                    options += '<option value="{{ $company_user->user->id }}">{{ $company_user->user->name }}</option>';
                @endforeach
                
                // Update the select element with the generated options
                $('#status-select').html(options);
                $('.filter_based__data').show();
                break;
            default:
                $('#status-select').html(`
                    <option disabled value="">Select status</option>
                `);
                $('.filter_based__data').show();
                break;
        }
    }
});

</script>


<style>
    .handle_multiple__options {
        display: none;
        background-color: #f8f9fa; 
        padding: 10px; 
        border: 1px solid #ddd; 
        margin-top: 10px;
    }

    .handle_multiple__options label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .handle_multiple__options .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px; 
    }

    .handle_multiple__options .tags button {
        background-color: #748C62; 
        color: white; 
        border: none; 
        padding: 5px 10px; 
        border-radius: 4px; 
        cursor: pointer; 
    }

    .handle_multiple__options .tags button:hover {
        background-color: #383F33; 
    }
    .handle_multiple__options .tags button:disabled {
    background-color: #ccc; 
    cursor: not-allowed;
}

.handle_multiple__options input{
    width: 32px;
    height: 19px;
}
.handle_multiple__options .common_shre{
    display: flex;
    justify-content: space-between;
}
/* Custom Modal CSS */
.modal {
        display: none;
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%;
        overflow: auto; 
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0,0.4); 
    }

    .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 13%;
    border-radius: 10px;
    position: relative;
}
   #customModal3 .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
    border-radius: 10px;
    position: relative;
}
    .modal-content .btn-primary{
        background-color: #748C62 !important;

}

    .modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        right: 20px;
        top: 10px;
        cursor: pointer;
    }

    .modal-close:hover,
    .modal-close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }
    .filter-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #f3f3f3;
}

.filter {
    display: flex;
    align-items: center;
}

.filter select {
    margin-right: 10px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
/* Hide checkboxes initially */
.checkbox-wrapper {
    display: none;
}

/* Show checkboxes when 'Handle Multiple' is active */
.handle-multiple-active .checkbox-wrapper {
    display: block;
}



/* Show checkboxes when 'Handle Multiple' is active */
.handle-multiple-active .checkbox-wrapper {
    display: block;
}

.chat-content {
    padding: 12px 11px !important;
}

.chat-user-img{
    margin-left:12px !important;
}


 input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
  }

  /* When checkbox is checked, set background to green */
  input[type="checkbox"]:checked {
    background-color: #748C62;
    border-color: #748C62;
  }
  
  /* Optional: Add checkmark icon or any visual effect */
input[type="checkbox"]:checked::before {
    transform: translate(0px, -1px);
    content: '✔';
    display: block;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: -1px;
}
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    margin-right: 7px;
}
.handle_multiple__options label {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
}
.handle_multiple__options label {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
    /* margin-top: 12px; */
    transform: translate(2px, 6px);
}
#cannedResponseModal ul {
    list-style: none;
    padding: 0;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.canned-response {
    background-color: #748C62 !important;
    color: white;
}


</style>

<div class="content-wrapper">
    <div class="ui card chat-card">
        <div class="content chat-card-header d-flex align-items-center justify-content-between">
            <div class="header">Chats</div>
            <div class="data-actions d-flex justify-content-end">

                <button class="action-button d-flex align-items-center list-filter-btn">
                    <img src="{{ asset('images/icons/list-filter.png') }}" alt="">
                </button>

                <button class="action-button bg-dark-green-color color-light handle-multiple-btn">
                    <img src="{{ asset('images/icons/Add_Plus.png') }}" alt="Plus Icon">
                    <span>Handle Multiple</span>
                </button>

            </div>
                 
        </div>
        <div class="filter-options">
            <div class="filter">
       <span> <b>Filter on:</b> &nbsp;</span>
               <select id="filter-select" name="">
                    <option value="select_filter_default">Select filter</option>
                    <option value="Assigned to">Assigned to</option>
                    <option value="With activity">With activity</option>
                    <option value="No activity">No activity</option>
                    <!--<option value="Editor">Editor</option>-->
                    <option value="Spam">Spam</option>
                    <option value="Status">Status</option>
                    <option value="Tags">Tags</option>
                    <!--<option value="Users">Users</option>-->
                </select>
                    <div class="filter_based__data">
                    <select id="status-select" name="">
                        <option disabled>Select status</option>
                        <!-- Options will be dynamically updated based on selected filter -->
                    </select>
                </div>
            </div>
            </div>
        <div class="handle_multiple__options">
           <div class="common_shre">
           <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
            <div class="tags">
                <button>Assign post</button>
                <button id="delete-posts">Delete</button>
                <!--<button>Move</button>-->
                <button data-status="open" class="update-posts-status">Open</button>
                <button data-status="waiting" class="update-posts-status">Waiting</button>
                <button data-status="done" class="update-posts-status">Done</button>
                <!--<button>Tag</button>-->
                <!--<button>Not spam</button>-->
                <button>Reply to multiple</button>
            </div>
           </div>
        </div>
        <div class="content chat-content">
            <ul class="chat-details">
                @foreach($tickets as $ticket)
                <li>
                    <a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
                        <div class="checkbox-wrapper">
                            <input type="checkbox" class="ticket-checkbox" id="ticket-{{$ticket->id}}">
                        </div>
                        <div class="chat-user-img all-tickets position-relative">
                            <img style="height: 42px; width: 42px; border-radius: 50%;" src="{{ asset('dummy-image.jpg') }}" alt="User">
                            <div
                                class="chat-status-icon rounded-circle text-center align-content-center position-absolute">
                                <img src="{{ asset('images/icons/chat-round.svg') }}" alt="Chat Round">
                            </div>
                        </div>
                        <div class="chat-message-info d-flex align-self-baseline">
                            <div class="chat-ticket-row d-flex justify-content-between">
                                <div class="ticket-status d-flex">
                                    <p class="color-light-green">#{{$ticket->id}}</p>
                                    <div class="ui tiny label bg-light-green-color color-light">
                                        {{$ticket->status}}
                                    </div>
                                </div>
                                <p class="color-dark-green">{{\Carbon\Carbon::parse($ticket->created_at)->format('d/m/Y')}}</p>
                            </div>
                            <div class="chat-ticket-row d-flex justify-content-between">
                                <div class="ticket-status d-flex">
                                    <p class="color-dark-green receiver-name">{{ $ticket->sender_name }}</p>
                                    <p class="receiver-message"> - {{\Illuminate\Support\Str::limit($ticket->subject, 90)}}</p>
                                </div>
                                <p class="color-dark-green bold message-time">{{\Carbon\Carbon::parse($ticket->created_at)->format('h:i A')}}</p>
                            </div>
                        </div>
                    </a>
                </li>
                @endforeach

            </ul>
        </div>

    </div>
</div>

<!--Filter Status Code-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    const filterSelect = $('#filter-select');
    const statusSelect = $('#status-select');
    const statusOptions = $('#status-options');
    const chatDetails = $('.chat-details');

    // Handle status change
    $('#status-select').change(function() {
        fetchTickets();
    });

    // Fetch tickets based on filter
    function fetchTickets() {
        const filter = filterSelect.val();
        const status = $('#status-select').val();

        $.ajax({
            url: '/filter',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            data: {
                filter: filter,
                status: status,
            },
            success: function(data) {
                chatDetails.empty();
                $.each(data.tickets, function(index, ticket) {
                    chatDetails.append(`
                        <li>
                            <a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
                                <div class="checkbox-wrapper">
                                    <input type="checkbox" class="ticket-checkbox" id="ticket-${ticket.id}">
                                </div>
                                <div class="chat-user-img">
                                    <img src="/images/Avatar.png" alt="User">
                                </div>
                                <div class="chat-message-info d-flex align-self-baseline">
                                    <div class="chat-ticket-row d-flex justify-content-between">
                                        <div class="ticket-status d-flex">
                                            <p class="color-light-green">#${ticket.id}</p>
                                            <div class="ui tiny label bg-dark-green-color color-light">
                                                ${ticket.status}
                                            </div>
                                        </div>
                                        <p class="color-dark-green">${new Date(ticket.created_at).toLocaleDateString()}</p>
                                    </div>
                                    <div class="chat-ticket-row d-flex justify-content-between">
                                        <div class="ticket-status d-flex">
                                            <p class="color-dark-green receiver-name">${ticket.sender_name}</p>
                                            <p class="receiver-message"> - ${ticket.subject}</p>
                                        </div>
                                        <p class="color-dark-green bold message-time">${new Date(ticket.created_at).toLocaleTimeString()}</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                    `);
                });
            }
        });
    }
});
</script>

<script>
    $(document).ready(function(){
        const chatDetails = $('.chat-details');
        const filterSelect = $('#filter-select');
        filterSelect.change(function() {
            const selectedFilter = $(this).val();
            
            if (selectedFilter === 'select_filter_default') {
                $.ajax({
                    url: 'default/all-tickets',
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        chatDetails.empty();
                        $.each(data.tickets, function(index, ticket) {
                            chatDetails.append(`
                                <li>
                                    <a href="{{ route('show.ticket', $ticket->id) }}" class="chat-detail-item d-flex align-items-center">
                                        <div class="checkbox-wrapper">
                                            <input type="checkbox" class="ticket-checkbox" id="ticket-${ticket.id}">
                                        </div>
                                        <div class="chat-user-img">
                                            <img src="/images/Avatar.png" alt="User">
                                        </div>
                                        <div class="chat-message-info d-flex align-self-baseline">
                                            <div class="chat-ticket-row d-flex justify-content-between">
                                                <div class="ticket-status d-flex">
                                                    <p class="color-light-green">#${ticket.id}</p>
                                                    <div class="ui tiny label bg-dark-green-color color-light">
                                                        ${ticket.status}
                                                    </div>
                                                </div>
                                                <p class="color-dark-green">${new Date(ticket.created_at).toLocaleDateString()}</p>
                                            </div>
                                            <div class="chat-ticket-row d-flex justify-content-between">
                                                <div class="ticket-status d-flex">
                                                    <p class="color-dark-green receiver-name">${ticket.sender_name}</p>
                                                    <p class="receiver-message"> - ${ticket.subject}</p>
                                                </div>
                                                <p class="color-dark-green bold message-time">${new Date(ticket.created_at).toLocaleTimeString()}</p>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            `);
                        });
                    }
                }); 
            }
        });
    });
</script>


<x-custom-modals />

@endsection