@extends('admin.layouts.layout')

@section('content')
<div class="mb-4">    
    <div class="servicestitle">
        <h3>Schedule Email</h3>
        <div class="services_searchbtn d-flex align-items-center gap-2 ms-auto">
            <div class="search_box">
                <input type="text" class="form-control" placeholder="Search schedule emails..." id="search-input">
                <button class="btn btn_search" id="search-btn">
                    <img src="{{ asset('images/search_w.svg') }}" alt="Search Icon">
                </button>
                <button class="btn btn-clear-search" id="clear-search" style="display: none; margin-left: 5px;">
                    <i class="fas fa-times"></i>
                </button>
                <div class="search-loading" id="search-loading" style="display: none; margin-left: 10px;">
                    <i class="fas fa-spinner fa-spin text-primary"></i>
                    <small class="text-muted ms-1">Searching...</small>
                </div>
            </div>
            <div class="contact_btns">
                @if($permission['create'] ?? true)
                <a href="{{ route('schedule-emails.create') }}" class="add_btn btn">
                    <img src="{{ asset('images/template.svg') }}"> ADD
                </a>                
                @endif
                @if($permission['destroy'] ?? true)
                <a href="javascript:void(0);" class="delete_btn btn" id="delete-selected">
                    <img src="{{ asset('images/delete_multiple.svg') }}"> Delete Multiple
                </a>                
                @endif
            </div>
        </div>
    </div>

    <div class="service_contentarea">
        <div class="table-responsive">
            <table class="table service_table" id="schedule-emails-table">
                <thead>
                    <tr>
                        <th width="30">
                            <input type="checkbox" class="form-check-input" id="select-all" title="Select All Schedule Emails">
                        </th>
                        <th>Schedule Email Title</th>
                        <th>Who Will Receive</th>
                        <th>Is Enabled?</th>
                        @if($permission['edit'] || $permission['destroy'] || $permission['show'])
                        <th>Action</th>
                        @endif
                    </tr>
                </thead>
                <tbody id="schedule-emails-tbody">
                    @if(isset($data) && $data->count() > 0)
                        @foreach($data as $scheduleEmail)
                        <tr class="schedule-email-row" data-schedule-email-id="{{ $scheduleEmail->id }}">
                            <td width="30">
                                <input type="checkbox" class="form-check-input schedule-email-checkbox" value="{{ $scheduleEmail->id }}">
                            </td>
                            <td>
                                <div class="d-flex flex-column">
                                    <strong>{{ $scheduleEmail->name }}</strong>
                                    @if($scheduleEmail->trigger)
                                        <small class="text-muted">Trigger: {{ $scheduleEmail->trigger->name }}</small>
                                    @endif
                                    @if($scheduleEmail->trigger_when && $scheduleEmail->unit_value && $scheduleEmail->unit_type)
                                        <small class="text-info">
                                            {{ ucfirst($scheduleEmail->trigger_when) }} {{ $scheduleEmail->unit_value }} {{ ucfirst($scheduleEmail->unit_type) }}{{ $scheduleEmail->unit_value > 1 ? 's' : '' }}
                                        </small>
                                    @endif
                                </div>
                            </td>
                            <td>
                                <span class="text-dark">{{ str_replace('_', ' ', ucwords($scheduleEmail->who_will_receive, '_')) }}</span>
                                @if($scheduleEmail->service)
                                    <br><small class="text-muted">Service: {{ $scheduleEmail->service->service_name }}</small>
                                @endif
                            </td>
                            <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input status-toggle" 
                                           type="checkbox" 
                                           role="switch" 
                                           data-id="{{ $scheduleEmail->id }}"
                                           {{ $scheduleEmail->is_active ? 'checked' : '' }}>
                                    <label class="form-check-label"></label>
                                </div>
                            </td>
                            @if($permission['edit'] || $permission['destroy'] || $permission['show'])                      
                            <td class="text-right">
                                @if($permission['show'] ?? true)
                                <a href="{{ route('schedule-emails.show', $scheduleEmail->id) }}" class="me-2" title="View Schedule Email">
                                    <img src="{{ asset('images/view.svg') }}" alt="View">
                                </a>
                                @endif
                                @if($permission['edit'] ?? true)
                                <a href="{{ route('schedule-emails.edit', $scheduleEmail->id) }}" class="me-2" title="Edit">
                                    <img src="{{ asset('images/edit.svg') }}">
                                </a>
                                @endif
                                @if($permission['destroy'] ?? true)
                                <a class="me-4" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                                   data-confirm-yes="$('#delete-form-{{ $scheduleEmail->id }}').submit();">
                                    <img src="{{ asset('images/delete_black.svg') }}">
                                </a>
                                <form id="delete-form-{{ $scheduleEmail->id }}" action="{{ route('schedule-emails.destroy', $scheduleEmail->id) }}" method="POST" style="display:inline">
                                    @csrf
                                    @method('DELETE')
                                </form>
                                @endif                      
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="5" class="text-center py-4">
                                <div class="text-muted">
                                    <i class="fas fa-envelope fa-2x mb-2"></i>
                                    <p>No Schedule Emails Found</p>
                                </div>
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>

        @if(isset($data) && method_exists($data, 'links') && $data->count() > 0)
        <div class="pagination pagination-rounded justify-content-end mb-0 mt-2">
            {{ $data->links() }}
        </div>
        @endif
    </div>
</div>
@endsection

@push('page_script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
$(document).ready(function() {
    // Select all functionality
    $('#select-all').change(function() {
        $('.schedule-email-checkbox').prop('checked', $(this).is(':checked'));
        updateDeleteButtonState();
    });

    $('.schedule-email-checkbox').change(function() {
        updateDeleteButtonState();
        
        // Update select all checkbox state
        const totalCheckboxes = $('.schedule-email-checkbox').length;
        const checkedCheckboxes = $('.schedule-email-checkbox:checked').length;
        $('#select-all').prop('checked', totalCheckboxes === checkedCheckboxes);
    });

    function updateDeleteButtonState() {
        const checkedBoxes = $('.schedule-email-checkbox:checked').length;
        $('#delete-selected').prop('disabled', checkedBoxes === 0);
        
        if (checkedBoxes > 0) {
            $('#delete-selected').removeClass('btn-secondary').addClass('btn-danger');
        } else {
            $('#delete-selected').removeClass('btn-danger').addClass('btn-secondary');
        }
    }

    // Bulk delete functionality
    $('#delete-selected').click(function() {
        const selectedIds = [];
        $('.schedule-email-checkbox:checked').each(function() {
            selectedIds.push($(this).val());
        });

        if (selectedIds.length === 0) {            
            showAlert('Please select at least one schedule email to delete.', 'warning');
            return;
        }

        // Use SweetAlert2 confirmation like single delete
        Swal.fire({
            title: 'Are You Sure?',
            text: `This action can not be undone. Do you want to continue deleting ${selectedIds.length} selected schedule email(s)?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, Sure!',
            showClass: {
                popup: 'animate__animated animate__fadeInDown'
            },
            hideClass: {
                popup: 'animate__animated animate__fadeOutUp'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("schedule-emails.delete-multiple") }}',
                    method: 'POST',
                    data: {
                        ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.status) {
                            location.reload();
                        } else {
                            showAlert(response.message, 'error');
                        }
                    },
                    error: function(xhr) {
                        showAlert('Error deleting schedule emails. Please try again.', 'error');
                    }
                });
            }
        });
    });

    // Search functionality
    let searchTimeout;
    $('#search-input').on('input', function() {
        clearTimeout(searchTimeout);
        const query = $(this).val().trim();
        
        // Show/hide clear button
        if (query.length > 0) {
            $('#clear-search').show();
        } else {
            $('#clear-search').hide();
        }
        
        // Perform search with delay
        searchTimeout = setTimeout(function() {
            performSearch(query);
        }, 500);
    });

    $('#search-btn').click(function() {
        const query = $('#search-input').val().trim();
        performSearch(query);
    });

    $('#clear-search').click(function() {
        $('#search-input').val('');
        $(this).hide();
        performSearch(''); // Perform empty search to reload all data
    });

    function performSearch(query) {
        $('#search-loading').show();

        $.ajax({
            url: '{{ route("schedule-emails.search") }}',
            method: 'GET',
            data: { q: query },
            success: function(response) {
                $('#search-loading').hide();
                updateTable(response.data);
            },
            error: function() {
                $('#search-loading').hide();
                showAlert('Search failed. Please try again.', 'error');
            }
        });
    }

    function updateTable(scheduleEmails) {
        const tbody = $('#schedule-emails-tbody');
        tbody.empty();

        if (!scheduleEmails || scheduleEmails.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="5" class="text-center py-4">
                        <div class="text-muted">
                            <i class="fas fa-search fa-2x mb-2"></i>
                            <p>No Schedule Emails Found matching your search</p>
                        </div>
                    </td>
                </tr>
            `);
            return;
        }

        scheduleEmails.forEach(function(scheduleEmail) {
            const statusToggle = scheduleEmail.is_active ? 'checked' : '';
            const row = `
                <tr class="schedule-email-row" data-schedule-email-id="${scheduleEmail.id}">
                    <td width="30">
                        <input type="checkbox" class="form-check-input schedule-email-checkbox" value="${scheduleEmail.id}">
                    </td>
                    <td>
                        <div class="d-flex flex-column">
                            <strong>${scheduleEmail.name}</strong>
                            ${scheduleEmail.trigger_name ? `<small class="text-muted">Trigger: ${scheduleEmail.trigger_name}</small>` : ''}
                            ${scheduleEmail.trigger_when && scheduleEmail.unit_value && scheduleEmail.unit_type ? 
                                `<small class="text-info">${scheduleEmail.trigger_when} ${scheduleEmail.unit_value} ${scheduleEmail.unit_type}${scheduleEmail.unit_value > 1 ? 's' : ''}</small>` : ''}
                        </div>
                    </td>
                    <td>
                        <span class="text-dark">${scheduleEmail.who_will_receive}</span>
                        ${scheduleEmail.service_name ? `<br><small class="text-muted">Service: ${scheduleEmail.service_name}</small>` : ''}
                    </td>
                    <td>
                        <div class="form-check form-switch">
                            <input class="form-check-input status-toggle" 
                                   type="checkbox" 
                                   role="switch" 
                                   data-id="${scheduleEmail.id}"
                                   ${statusToggle}>
                            <label class="form-check-label"></label>
                        </div>
                    </td>
                    <td class="text-right">
                        @if($permission['show'] ?? true)
                        <a href="{{ route('schedule-emails.show', '') }}/${scheduleEmail.id}" class="me-2" title="View Schedule Email">
                            <img src="{{ asset('images/view.svg') }}" width="16" height="16" alt="View">
                        </a>
                        @endif
                        @if($permission['edit'] ?? true)
                        <a href="{{ route('schedule-emails.edit', '') }}/${scheduleEmail.id}" class="me-4" data-toggle="tooltip" title="Edit">
                            <img src="{{ asset('images/edit.svg') }}" width="16" height="16" alt="Edit">
                        </a>
                        @endif
                        @if($permission['destroy'] ?? true)
                        <a class="me-4" data-toggle="tooltip" title="Delete" data-confirm="Are You Sure?|This action can not be undone. Do you want to continue?" 
                           data-confirm-yes="$('#delete-form-${scheduleEmail.id}').submit();">
                            <img src="{{ asset('images/delete.svg') }}" width="16" height="16" alt="Delete">
                        </a>
                        <form id="delete-form-${scheduleEmail.id}" action="{{ route('schedule-emails.destroy', '') }}/${scheduleEmail.id}" method="POST" style="display:inline">
                            @csrf
                            @method('DELETE')
                        </form>
                        @endif
                    </td>
                </tr>
            `;
            tbody.append(row);
        });

        // Reinitialize event handlers
        $('.schedule-email-checkbox').change(function() {
            updateDeleteButtonState();
        });

        // Reinitialize status toggle handlers
        $('.status-toggle').change(function() {
            const isEnabled = $(this).is(':checked');
            const scheduleEmailId = $(this).data('id');
            
            $.ajax({
                url: `{{ route('schedule-emails.toggle-status', '') }}/${scheduleEmailId}`,
                method: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.status) {
                        showAlert(response.message, 'success');
                    } else {
                        $('.status-toggle[data-id="' + scheduleEmailId + '"]').prop('checked', !isEnabled);
                        showAlert(response.message, 'error');
                    }
                },
                error: function() {
                    $('.status-toggle[data-id="' + scheduleEmailId + '"]').prop('checked', !isEnabled);
                    showAlert('Error updating status. Please try again.', 'error');
                }
            });
        });
    }

    // Helper function to show alerts
    function showAlert(message, type) {
        if (type === 'success') {
            showNotification('success', message);
        } else if (type === 'error') {
            showNotification('error', message);
        } else if (type === 'warning') {
            showNotification('warning', message);
        } else {
            showNotification('info', message);
        }
    }

    // Status toggle functionality
    $('.status-toggle').change(function() {
        const isEnabled = $(this).is(':checked');
        const scheduleEmailId = $(this).data('id');
        
        $.ajax({
            url: `{{ route('schedule-emails.toggle-status', '') }}/${scheduleEmailId}`,
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status) {
                    showAlert(response.message, 'success');
                } else {
                    $('.status-toggle[data-id="' + scheduleEmailId + '"]').prop('checked', !isEnabled);
                    showAlert(response.message, 'error');
                }
            },
            error: function() {
                $('.status-toggle[data-id="' + scheduleEmailId + '"]').prop('checked', !isEnabled);
                showAlert('Error updating status. Please try again.', 'error');
            }
        });
    });

    // Initialize delete button state
    updateDeleteButtonState();
});
</script>
@endpush