@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/email_logs.title') }}</h4>

            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="javascript: void(0);">{{ __('admin/email_logs.breadcrumb.email_logs') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/email_logs.page_titles.list') }}</li>
                </ol>
            </div>
        </div>

        <div class="row mb-3">
            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/email_logs.stats.total') }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary">{{ number_format($stats['total']) }}</h4>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle rounded fs-3">
                                    <i class="ri-mail-line text-primary"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/email_logs.stats.sent') }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary ">{{ number_format($stats['sent']) }}</h4>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-success-subtle rounded fs-3">
                                    <i class="ri-checkbox-circle-line text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/email_logs.stats.failed') }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary">{{ number_format($stats['failed']) }}</h4>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-danger-subtle rounded fs-3">
                                    <i class="ri-close-circle-line text-danger"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-3">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1 overflow-hidden">
                                <p class="text-uppercase fw-medium text-muted text-truncate mb-0">{{ __('admin/email_logs.stats.today') }}</p>
                            </div>
                        </div>
                        <div class="d-flex align-items-end justify-content-between">
                            <div>
                                <h4 class="fs-22 fw-semibold ff-secondary">{{ number_format($stats['today']) }}</h4>
                            </div>
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-warning-subtle rounded fs-3">
                                    <i class="ri-calendar-line text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-12">
            <div class="card">
                <div class="card-header align-items-center d-flex">
                    <h4 class="card-title mb-0 flex-grow-1">{{ __('admin/email_logs.sections.filters_actions') }}</h4>
                    <div class="flex-shrink-0">
                        <div class="hstack text-nowrap gap-2">
                            <a href="{{ route('admin.email-logs.index', request()->query()) }}" class="btn btn-sm btn-soft-secondary material-shadow-none">
                                <i class="ri-refresh-line me-1 align-bottom"></i> {{ __('admin/email_logs.actions.reload_logs') }}
                            </a>
                            <a href="{{ route('admin.email-logs.stats') }}" class="btn btn-sm btn-info">
                                <i class="ri-bar-chart-line me-1 align-bottom"></i> {{ __('admin/email_logs.actions.view_stats') }}
                            </a>
                            <a href="{{ route('admin.email-logs.export', request()->query()) }}" class="btn btn-sm btn-success">
                                <i class="ri-download-2-line me-1 align-bottom"></i> {{ __('admin/email_logs.actions.export') }}
                            </a>
                            <button class="btn btn-sm btn-soft-danger material-shadow-none" id="remove-actions" onclick="deleteMultiple()" style="display: none;">
                                <i class="ri-delete-bin-2-line"></i> {{ __('admin/email_logs.actions.delete_selected') }}
                            </button>
                            <div class="input-group input-group-sm">
                                <select id="cleanup-days" class="form-select" style="width: auto;">
                                    <option value="30">{{ __('admin/email_logs.filters.days_options.30') }}</option>
                                    <option value="60">{{ __('admin/email_logs.filters.days_options.60') }}</option>
                                    <option value="90" selected>{{ __('admin/email_logs.filters.days_options.90') }}</option>
                                    <option value="180">{{ __('admin/email_logs.filters.days_options.180') }}</option>
                                    <option value="365">{{ __('admin/email_logs.filters.days_options.365') }}</option>
                                </select>
                                <button type="button" class="btn btn-sm btn-danger" onclick="confirmCleanup()">
                                    <i class="ri-delete-bin-line me-1"></i> {{ __('admin/email_logs.actions.cleanup_logs') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card-body border-bottom">
                    <form method="GET" action="{{ route('admin.email-logs.index') }}" class="row g-3">
                        <div class="col-md-2">
                            <div class="search-box">
                                <input type="text" name="search" class="form-control search"
                                    placeholder="{{ __('admin/email_logs.placeholders.search_emails') }}"
                                    value="{{ request('search') }}">
                                <i class="ri-search-line search-icon"></i>
                            </div>
                        </div>

                        <div class="col-md-2">
                            <select name="status" class="form-select">
                                <option value="">{{ __('admin/email_logs.filters.all_statuses') }}</option>
                                <option value="sent" {{ request('status') === 'sent' ? 'selected' : '' }}>{{ __('admin/email_logs.status.sent') }}</option>
                                <option value="failed" {{ request('status') === 'failed' ? 'selected' : '' }}>{{ __('admin/email_logs.status.failed') }}</option>
                                <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>{{ __('admin/email_logs.status.pending') }}</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="email_type" class="form-select">
                                <option value="">{{ __('admin/email_logs.filters.all_types') }}</option>
                                @foreach($types as $value => $label)
                                    <option value="{{ $value }}" {{ request('email_type') === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <select name="category" class="form-select">
                                <option value="">{{ __('admin/email_logs.filters.all_categories') }}</option>
                                @foreach($categories as $value => $label)
                                    <option value="{{ $value }}" {{ request('category') === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-2">
                            <input type="date" name="date_from" class="form-control" value="{{ request('date_from') }}" placeholder="{{ __('admin/email_logs.filters.date_from') }}">
                        </div>

                        <div class="col-md-2">
                            <input type="date" name="date_to" class="form-control" value="{{ request('date_to') }}" placeholder="{{ __('admin/email_logs.filters.date_to') }}">
                        </div>

                        <div class="col-md-2">
                            <select name="per_page" class="form-select">
                                <option value="15" {{ request('per_page', 50) == '15' ? 'selected' : '' }}>{{ __('admin/email_logs.filters.per_page_options.15') }}</option>
                                <option value="25" {{ request('per_page', 50) == '25' ? 'selected' : '' }}>{{ __('admin/email_logs.filters.per_page_options.25') }}</option>
                                <option value="50" {{ request('per_page', 50) == '50' ? 'selected' : '' }}>{{ __('admin/email_logs.filters.per_page_options.50') }}</option>
                                <option value="100" {{ request('per_page', 50) == '100' ? 'selected' : '' }}>{{ __('admin/email_logs.filters.per_page_options.100') }}</option>
                            </select>
                        </div>

                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="ri-equalizer-fill"></i> {{ __('admin/email_logs.actions.apply_filters') }}
                            </button>
                        </div>

                        <div class="col-md-2">
                            <a href="{{ route('admin.email-logs.index') }}" class="btn btn-light w-100">
                                <i class="ri-refresh-line me-1"></i> {{ __('admin/email_logs.actions.clear_filters') }}
                            </a>
                        </div>                        
                    </form>
                </div>

                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <div class="text-muted">
                            {{ __('admin/email_logs.table.display_from') }} {{ $emails->firstItem() ?? 0 }} {{ __('admin/email_logs.table.to') }} {{ $emails->lastItem() ?? 0 }} {{ __('admin/email_logs.table.on') }} {{ $emails->total() }} {{ __('admin/email_logs.table.emails') }}
                            @if(request('search'))
                                {{ __('admin/email_logs.filters.for_search') }} <strong>{{ request('search') }}</strong>
                            @endif
                        </div>
                        @if($emails->hasPages())
                        <div class="text-muted">
                            {{ __('admin/email_logs.filters.page') }} {{ $emails->currentPage() }} {{ __('admin/email_logs.filters.on') }} {{ $emails->lastPage() }}
                        </div>
                        @endif
                    </div>

                    <div class="table-responsive table-card">
                        <table class="table align-middle table-nowrap table-hover mb-0 mt-3">
                            <thead class="table-light">
                                <tr>
                                    <th scope="col" style="width: 50px;">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" id="checkAll" value="option">
                                        </div>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'id', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            ID
                                            @if(request('sort') == 'id')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">
                                        <a href="{{ request()->fullUrlWithQuery(['sort' => 'created_at', 'direction' => request('direction') == 'asc' ? 'desc' : 'asc']) }}"
                                            class="text-decoration-none text-dark">
                                            {{ __('admin/email_logs.table.date') }}
                                            @if(request('sort') == 'created_at')
                                            <i class="ri-arrow-{{ request('direction') == 'asc' ? 'up' : 'down' }}-s-line"></i>
                                            @endif
                                        </a>
                                    </th>
                                    <th scope="col">{{ __('admin/email_logs.table.type') }}</th>
                                    <th scope="col">{{ __('admin/email_logs.table.category') }}</th>
                                    <th scope="col">{{ __('admin/email_logs.table.recipient') }}</th>
                                    <th scope="col">{{ __('admin/email_logs.form.subject') }}</th>
                                    <th scope="col">{{ __('admin/email_logs.form.status') }}</th>
                                    <th scope="col" class="text-center">{{ __('admin/email_logs.table.retry_count') }}</th>
                                    <th scope="col" class="text-end">{{ __('admin/email_logs.table.actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($emails as $email)
                                <tr>
                                    <th scope="row">
                                        <div class="form-check">
                                            <input class="form-check-input fs-15" type="checkbox" name="chk_child" value="{{ $email->id }}">
                                        </div>
                                    </th>
                                    <td><span class="fw-medium">{{ $email->id }}</span></td>
                                    <td>
                                        <h6 class="mb-0">{{ $email->created_at->format('d/m/Y') }}</h6>
                                        <small class="text-muted">{{ $email->created_at->format('H:i') }}</small>
                                    </td>
                                    <td>
                                        <span class="badge bg-secondary-subtle text-secondary">{{ $email->type_human }}</span>
                                    </td>
                                    <td>
                                        <span class="badge bg-info-subtle text-info">{{ $email->category_label }}</span>
                                    </td>
                                    <td>
                                        <div class="d-flex flex-column">
                                            <span class="fw-medium">{{ $email->to_email }}</span>
                                            @if($email->user)
                                                <small class="text-muted">{{ $email->user->firstname }} {{ $email->user->lastname }}</small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-truncate d-inline-block" style="max-width: 200px;" data-bs-toggle="tooltip" title="{{ $email->subject }}">
                                            {{ Str::limit($email->subject, 40) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($email->status === 'sent')
                                            <span class="badge bg-success-subtle text-success">{{ __('admin/email_logs.status.sent') }}</span>
                                            @if($email->sent_at)
                                                <br><small class="text-muted">{{ $email->sent_at->format('d/m H:i') }}</small>
                                            @endif
                                        @elseif($email->status === 'failed')
                                            <span class="badge bg-danger-subtle text-danger">{{ __('admin/email_logs.status.failed') }}</span>
                                            @if($email->failed_at)
                                                <br><small class="text-muted">{{ $email->failed_at->format('d/m H:i') }}</small>
                                            @endif
                                        @else
                                            <span class="badge bg-warning-subtle text-warning">{{ __('admin/email_logs.status.pending') }}</span>
                                        @endif
                                    </td>
                                    <td class="text-center">
                                        <span class="badge bg-primary-subtle text-primary">{{ $email->retry_count }}</span>
                                    </td>
                                    <td class="text-end">
                                        <div class="gap-1 d-flex justify-content-md-end">
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/email_logs.actions.view_details') }}">
                                                <a class="btn btn-icon bg-info-subtle text-info" href="{{ route('admin.email-logs.show', $email) }}">
                                                    <i class="ri-eye-line"></i>
                                                </a>
                                            </span>
                                            @if($email->canRetry())
                                                <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/email_logs.actions.retry') }}">
                                                    <form method="POST" action="{{ route('admin.email-logs.retry', $email) }}" class="d-inline">
                                                        @csrf
                                                        <button type="submit" class="btn btn-icon bg-warning-subtle text-warning">
                                                            <i class="ri-refresh-line"></i>
                                                        </button>
                                                    </form>
                                                </span>
                                            @endif
                                            <span data-bs-toggle="tooltip" data-bs-placement="top" title="{{ __('admin/email_logs.actions.delete') }}">
                                                <button class="open-delete-modal btn btn-icon bg-danger-subtle text-danger"
                                                    data-bs-toggle="modal"
                                                    href="#deleteRecordModal"
                                                    data-delete-url="{{ route('admin.email-logs.destroy', $email) }}"
                                                    data-item-name="{{ $email->to_email }}"
                                                    data-item-type="{{ __('admin/email_logs.status.this_email') }}"
                                                    id="delete-record-{{ $email->id }}">
                                                    <i class="ri-delete-bin-line align-bottom"></i>
                                                </button>
                                            </span>
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="20" class="text-center py-4">
                                        <div class="d-flex flex-column align-items-center">
                                            <i class="ri-mail-line fs-1 text-muted mb-3"></i>
                                            <h5 class="text-muted">{{ __('admin/email_logs.status.no_emails_found') }}</h5>
                                            @if(request('search') || request('status') || request('email_type') || request('category'))
                                            <p class="text-muted mb-3">{{ __('admin/email_logs.status.try_different_filters') }}</p>
                                            <a href="{{ route('admin.email-logs.index') }}" class="btn btn-primary">
                                                <i class="ri-refresh-line me-1"></i> {{ __('admin/email_logs.actions.clear_filters') }}
                                            </a>
                                            @else
                                            <p class="text-muted mb-3">{{ __('admin/email_logs.help.emails_will_appear_here') }}</p>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>

                @if($emails->hasPages())
                <div class="card-footer">
                    <div class="d-flex justify-content-center mt-4">
                        {!! $emails->withQueryString()->links('pagination::bootstrap-5') !!}
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<x-admin.confirm-modal
    modal-id="cleanupConfirmModal"
    title="{{ __('admin/email_logs.actions.cleanup_logs') }}"
    message="{{ __('admin/email_logs.modals.cleanup_warning') }}"
    confirm-text="{{ __('admin/email_logs.modals.yes_cleanup') }}"
    cancel-text="{{ __('admin/global.cancel') }}"
    type="warning" />

<x-admin.delete-modal
    item-type="{{ __('admin/email_logs.status.this_email') }}"
    confirm-text="{{ __('admin/email_logs.modals.delete_confirm') }}"
    delete-text="{{ __('admin/global.delete') }}" />

<x-admin.toast-messages />

@endsection

@push('script')
<script>
    $(document).ready(function() {
        ischeckboxcheck();

        $('#checkAll').on('click', function() {
            var isChecked = this.checked;
            $('input[name="chk_child"]').each(function() {
                this.checked = isChecked;
                if (isChecked) {
                    $(this).closest("tr").addClass("table-active");
                } else {
                    $(this).closest("tr").removeClass("table-active");
                }
            });
            updateRemoveButton();
        });

        $('select[name="per_page"]').on('change', function() {
            $(this).closest('form').submit();
        });

        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });

    function confirmCleanup() {
        const days = document.getElementById('cleanup-days').value;
        
        if (!days) {
            alert('{{ __("admin/email_logs.help.select_period") }}');
            return;
        }

        const daysText = days >= 365 ? '{{ __("admin/email_logs.filters.days_options.365") }}' : (days >= 180 ? '{{ __("admin/email_logs.filters.days_options.180") }}' : days + ' {{ __("admin/email_logs.filters.days") }}');

        showConfirmModal({
            modalId: 'cleanupConfirmModal',
            title: '{{ __("admin/email_logs.actions.cleanup_logs") }}',
            message: `{{ __("admin/email_logs.modals.cleanup_warning_days") }} ${daysText}. {{ __("admin/email_logs.modals.irreversible") }}`,
            confirmText: '{{ __("admin/email_logs.modals.yes_cleanup") }}',
            autoClose: false
        }).then(result => {
            if (result.confirmed) {
                fetch('{{ route("admin.email-logs.cleanup") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ days: days })
                })
                .then(response => response.json())
                .then(data => {
                    closeConfirmModal('cleanupConfirmModal');
                    if (data.success) {
                        if(data.count > 0) {
                            showToast(data.message || '{{ __("admin/email_logs.messages.cleanup_success") }}', 'success');
                            setTimeout(() => {
                                window.location.reload();
                            }, 1500);
                        }
                        else {
                            showToast(data.message || '{{ __("admin/email_logs.messages.cleanup_no_mail_deleted") }}', 'info');
                        }
                    } else {
                        showToast(data.message || '{{ __("admin/email_logs.messages.cleanup_error") }}', 'error');
                    }
                })
                .catch(error => {
                    closeConfirmModal('cleanupConfirmModal');
                    console.error('Erreur complete:', error);
                    showToast('{{ __("admin/email_logs.messages.cleanup_error") }}', 'error');
                });
            }
        }).catch(() => {
            console.log('{{ __("admin/email_logs.actions.cancel") }}');
        });
    }

    function ischeckboxcheck() {
        Array.from(document.getElementsByName("chk_child")).forEach(function(checkbox) {
            checkbox.addEventListener("change", function(e) {
                if (checkbox.checked) {
                    e.target.closest("tr").classList.add("table-active");
                } else {
                    e.target.closest("tr").classList.remove("table-active");
                }
                updateCheckAllState();
                updateRemoveButton();
            });
        });
    }

    function updateCheckAllState() {
        var totalCheckboxes = document.querySelectorAll('input[name="chk_child"]').length;
        var checkedCheckboxes = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var checkAllBox = document.getElementById('checkAll');

        if (checkAllBox) {
            checkAllBox.checked = totalCheckboxes === checkedCheckboxes && totalCheckboxes > 0;
            checkAllBox.indeterminate = checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes;
        }
    }

    function updateRemoveButton() {
        var checkedCount = document.querySelectorAll('input[name="chk_child"]:checked').length;
        var removeButton = document.getElementById('remove-actions');

        if (removeButton) {
            removeButton.style.display = checkedCount > 0 ? "block" : "none";
        }
    }

    $('#deleteRecordModal').on('hidden.bs.modal', function() {
        var modal = $(this);
        modal.find('form').find('input[name="ids[]"]').remove();
        modal.find('.modal-body p').text('{{ __("admin/email_logs.modals.delete_confirm") }}');
        modal.find('#item-name-text-deleteRecordModal').text('');
        modal.find('#item-type-text-deleteRecordModal').text('');
    });

    function deleteMultiple() {
        var selectedIds = [];
        var selectedEmails = [];

        document.querySelectorAll('input[name="chk_child"]:checked').forEach(function(checkbox) {
            selectedIds.push(checkbox.value);
            var row = checkbox.closest('tr');
            var email = row.cells[5].querySelector('.fw-medium').textContent.trim();
            selectedEmails.push(email);
        });

        if (selectedIds.length === 0) {
            alert('{{ __("admin/email_logs.help.select_at_least_one") }}');
            return;
        }

        var modal = $('#deleteRecordModal');
        if (modal.length) {
            var itemText = selectedIds.length + ' {{ __("admin/email_logs.status.email_count") }}';
            var confirmText = '{{ __("admin/email_logs.modals.delete_multiple_confirm") }} ' + selectedIds.length + ' {{ __("admin/email_logs.status.email_count") }}';

            modal.find('#item-name-text-deleteRecordModal').text(selectedEmails.join(', '));
            modal.find('#item-type-text-deleteRecordModal').text(itemText);
            modal.find('.modal-body p').text(confirmText);
            modal.find('form').attr('action', '{{ route("admin.email-logs.destroy-multiple") }}');
            modal.find('form').attr('method', 'POST');

            modal.find('form').find('input[name="ids[]"]').remove();
            selectedIds.forEach(function(id) {
                var input = $('<input>').attr({
                    type: 'hidden',
                    name: 'ids[]',
                    value: id
                });
                modal.find('form').append(input);
            });

            modal.modal('show');
        }
    }
</script>
@endpush