@extends('admin.layouts.master')

@section('title', __('admin.attachments.title'))

@section('content')
<div class="page-content-wrapper">
    <div class="content-container">
        <div class="page-content">
            <!-- Page Header -->
            <div class="page-header-section mb-4">
                <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                    <div>
                        <h1 class="page-title mb-2">{{ __('admin.attachments.title') }}</h1>
                        <p class="text-muted mb-0">{{ __('admin.attachments.subtitle') }}</p>
                    </div>
                    <a href="{{ route('admin.attachments.create') }}" class="btn btn-primary btn-lg">
                        <i class="ti ti-cloud-upload me-2"></i>{{ __('admin.attachments.add') }}
                    </a>
                </div>
            </div>

            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show mb-4" role="alert">
                    <i class="ti ti-circle-check me-2"></i>
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show mb-4" role="alert">
                    <i class="ti ti-alert-circle me-2"></i>
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            <!-- Filters Section -->
            <div class="row mb-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <form class="filter-form row g-3">
                                <div class="col-md-3">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.project_id') }}</label>
                                    <select id="filterProject" class="form-select form-select-sm">
                                        <option value="">{{ __('admin.attachments.all_projects') }}</option>
                                        @foreach($projects as $project)
                                            <option value="{{ $project->id }}">
                                                {{ $project->project_name ?: $project->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.category') }}</label>
                                    <select id="filterCategory" class="form-select form-select-sm">
                                        <option value="">{{ __('admin.attachments.all_categories') }}</option>
                                        @foreach($categories as $categoryOption)
                                            <option value="{{ $categoryOption }}">
                                                {{ __('admin.attachments.categories.'.$categoryOption) }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label fw-600">{{ __('admin.attachments.fields.stage_id') }}</label>
                                    <select id="filterStage" class="form-select form-select-sm" disabled>
                                        <option value="">{{ __('admin.attachments.all_stages') }}</option>
                                    </select>
                                </div>

                                <div class="col-md-3">
                                    <label class="form-label fw-600">{{ __('admin.actions.search') }}</label>
                                    <div class="input-group input-group-sm">
                                        <input type="text" id="filterSearch" class="form-control"
                                               placeholder="{{ __('admin.attachments.search_placeholder') }}">
                                        <button class="btn btn-outline-secondary" type="button" id="resetFilters">
                                            <i class="ti ti-x"></i>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- DataTable -->
            <div class="row">
                <div class="col-12">
                    <div class="card card-table">
                        <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <h5 class="card-title mb-0">{{ __('admin.attachments.list') }}</h5>
                            <div class="d-flex gap-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="selectAllCheckbox">
                                    <label class="form-check-label" for="selectAllCheckbox">
                                        {{ __('admin.actions.select_all') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="attachmentsTable" class="table table-hover mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width: 40px;">
                                                <input type="checkbox" class="form-check-input" id="masterCheckbox">
                                            </th>
                                            <th>{{ __('admin.attachments.fields.file') }}</th>
                                            <th>{{ __('admin.attachments.fields.project_id') }}</th>
                                            <th>{{ __('admin.attachments.fields.stage_id') }}</th>
                                            <th>{{ __('admin.attachments.fields.category') }}</th>
                                            <th>{{ __('admin.attachments.fields.file_size') }}</th>
                                            <th>{{ __('admin.attachments.fields.uploaded_by') }}</th>
                                            <th>{{ __('admin.attachments.upload_date') }}</th>
                                            <th style="width: 120px;">{{ __('admin.actions.actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Bulk Actions -->
            <div id="bulkActionsSection" class="position-fixed bottom-0 start-0 end-0 bg-light border-top p-3" style="display: none;">
                <div class="container-fluid">
                    <div class="d-flex justify-content-between align-items-center">
                        <span id="bulkCount">0 {{ __('admin.attachments.items_selected') }}</span>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-sm btn-outline-danger" id="bulkDeleteBtn">
                                <i class="ti ti-trash me-1"></i>{{ __('admin.actions.delete') }}
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="bulkCancelBtn">
                                {{ __('admin.actions.cancel') }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin.attachments.preview') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center">
                <div id="previewContent"></div>
            </div>
            <div class="modal-footer">
                <a id="previewDownloadBtn" href="#" class="btn btn-primary" download>
                    <i class="ti ti-download me-1"></i>{{ __('admin.actions.download') }}
                </a>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.actions.close') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin.attachments.confirm_delete') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteMessage">{{ __('admin.attachments.delete_confirmation') }}</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ __('admin.actions.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">{{ __('admin.actions.delete') }}</button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const table = $('#attachmentsTable').DataTable({
        processing: true,
        serverSide: true,
        autoWidth: false,
        scrollX: true,
        ajax: {
            url: '{{ route("admin.attachments.datatable") }}',
            data: function(d) {
                d.projectId = $('#filterProject').val();
                d.category = $('#filterCategory').val();
                d.stage = $('#filterStage').val();
            },
            error: function(xhr, status, error) {
                console.error('AJAX Error:', error);
                alert('{{ __('admin.attachments.load_error') }}');
            }
        },
        columns: [
            {
                data: 'id',
                render: function(data) {
                    return `<input type="checkbox" class="form-check-input row-checkbox" value="${data}">`;
                },
                searchable: false,
                orderable: false,
                width: '40px'
            },
            {
                data: null,
                render: function(data) {
                    const icon = `<i class="ti ${data.file_icon} text-primary"></i>`;
                    const name = `<strong>${escapeHtml(data.file_name)}</strong>`;
                    const notes = data.notes ? `<br><small class="text-muted">${escapeHtml(data.notes)}</small>` : '';
                    return `<div>${icon} ${name}${notes}</div>`;
                }
            },
            { data: 'project' },
            { data: 'stage' },
            {
                data: 'category',
                render: function(data, type, row) {
                    const badge = `<span class="badge bg-${row.category_badge}">${data}</span>`;
                    return badge;
                }
            },
            { data: 'size' },
            { data: 'uploader' },
            {
                data: 'uploaded_date_human',
                render: function(data, type, row) {
                    return `<span title="${row.uploaded_date}">${data}</span>`;
                }
            },
            {
                data: null,
                render: function(data) {
                    let actions = `
                        <div class="btn-group btn-group-sm" role="group">
                            <a href="${data.actions.download}" class="btn btn-outline-primary" title="{{ __('admin.actions.download') }}">
                                <i class="ti ti-download"></i>
                            </a>
                    `;

                    if (data.actions.preview) {
                        actions += `
                            <button type="button" class="btn btn-outline-info preview-btn" data-url="${data.actions.preview}"
                                    title="{{ __('admin.actions.preview') }}">
                                <i class="ti ti-eye"></i>
                            </button>
                        `;
                    }

                    actions += `
                            <button type="button" class="btn btn-outline-danger delete-btn" data-id="${data.id}"
                                    data-name="${escapeHtml(data.file_name)}" title="{{ __('admin.actions.delete') }}">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                    return actions;
                },
                searchable: false,
                orderable: false,
                width: '120px'
            }
        ],
        order: [[7, 'desc']],
        pageLength: 25,
        dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>' +
             '<"row"<"col-sm-12"tr>>' +
             '<"row"<"col-sm-12 col-md-5"i><"col-sm-12 col-md-7"p>>',
        language: {
            search: '{{ __('admin.actions.search') }}',
            lengthMenu: '_MENU_',
            info: '{{ __('admin.table.showing') }} _START_ {{ __('admin.table.to') }} _END_ {{ __('admin.table.of') }} _TOTAL_',
            paginate: {
                first: '{{ __('admin.table.first') }}',
                last: '{{ __('admin.table.last') }}',
                next: '{{ __('admin.table.next') }}',
                previous: '{{ __('admin.table.previous') }}'
            },
            emptyTable: '{{ __('admin.attachments.empty') }}'
        },
        drawCallback: function() {
            attachEventListeners();
        }
    });

    // Filter handlers
    $('#filterProject').on('change', function() {
        const projectId = $(this).val();
        const stageSelect = $('#filterStage');

        if (projectId) {
            $.ajax({
                url: '{{ route("admin.attachments.stages") }}',
                data: { project_id: projectId },
                success: function(stages) {
                    stageSelect.html('<option value="">{{ __('admin.attachments.all_stages') }}</option>');
                    stages.forEach(stage => {
                        stageSelect.append(`<option value="${stage.id}">${stage.name}</option>`);
                    });
                    stageSelect.prop('disabled', false);
                }
            });
        } else {
            stageSelect.html('<option value="">{{ __('admin.attachments.all_stages') }}</option>');
            stageSelect.prop('disabled', true);
        }

        table.draw();
    });

    $('#filterCategory, #filterStage').on('change', function() {
        table.draw();
    });

    $('#filterSearch').on('keyup', function() {
        table.search($(this).val()).draw();
    });

    $('#resetFilters').on('click', function() {
        $('#filterProject').val('').trigger('change');
        $('#filterCategory').val('');
        $('#filterStage').val('');
        $('#filterSearch').val('');
        table.search('').draw();
    });

    // Checkbox handlers
    $('#masterCheckbox').on('change', function() {
        $('.row-checkbox').prop('checked', this.checked);
        updateBulkActions();
    });

    $(document).on('change', '.row-checkbox', function() {
        updateBulkActions();
    });

    function updateBulkActions() {
        const checkedCount = $('.row-checkbox:checked').length;
        const bulkSection = $('#bulkActionsSection');

        if (checkedCount > 0) {
            $('#bulkCount').text(`${checkedCount} {{ __('admin.attachments.items_selected') }}`);
            bulkSection.show();
            $('#masterCheckbox').prop('indeterminate', checkedCount !== $('.row-checkbox').length);
        } else {
            bulkSection.hide();
            $('#masterCheckbox').prop('checked', false).prop('indeterminate', false);
        }
    }

    // Delete handlers
    let deleteAttachmentId = null;

    $(document).on('click', '.delete-btn', function() {
        deleteAttachmentId = $(this).data('id');
        const fileName = $(this).data('name');
        $('#deleteMessage').text(`{{ __('admin.attachments.confirm_delete_message') }} "${fileName}"?`);
        new bootstrap.Modal(document.getElementById('deleteModal')).show();
    });

    $('#confirmDeleteBtn').on('click', function() {
        if (!deleteAttachmentId) return;

        $.ajax({
            url: `/admin/attachments/${deleteAttachmentId}`,
            type: 'DELETE',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function() {
                table.draw();
                bootstrap.Modal.getInstance(document.getElementById('deleteModal')).hide();
                showNotification('{{ __('admin.attachments.flash.deleted') }}', 'success');
            },
            error: function() {
                showNotification('{{ __('admin.attachments.flash.delete_failed') }}', 'error');
            }
        });
    });

    // Bulk delete
    $('#bulkDeleteBtn').on('click', function() {
        const ids = $('.row-checkbox:checked').map(function() { return $(this).val(); }).get();

        if (ids.length === 0) return;

        if (!confirm(`{{ __('admin.attachments.bulk_delete_confirm') }} ${ids.length} {{ __('admin.attachments.items') }}?`)) {
            return;
        }

        let completed = 0;
        ids.forEach(id => {
            $.ajax({
                url: `/admin/attachments/${id}`,
                type: 'DELETE',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                success: function() {
                    completed++;
                    if (completed === ids.length) {
                        table.draw();
                        $('#bulkActionsSection').hide();
                        showNotification(`{{ __('admin.attachments.bulk_deleted') }}`, 'success');
                    }
                }
            });
        });
    });

    $('#bulkCancelBtn').on('click', function() {
        $('.row-checkbox').prop('checked', false);
        updateBulkActions();
    });

    // Preview handler
    $(document).on('click', '.preview-btn', function(e) {
        e.preventDefault();
        const url = $(this).data('url');

        $.ajax({
            url: url,
            success: function(data) {
                // Try to detect if it's an image
                const mimeType = $(this).closest('tr').find('td').eq(3).text();

                if (url.includes('image')) {
                    $('#previewContent').html(`<img src="${url}" style="max-width: 100%; max-height: 500px;" class="img-fluid">`);
                } else {
                    $('#previewContent').html(`<iframe src="${url}" style="width: 100%; height: 500px; border: none;"></iframe>`);
                }

                $('#previewDownloadBtn').attr('href', url);
                new bootstrap.Modal(document.getElementById('previewModal')).show();
            },
            error: function() {
                showNotification('{{ __('admin.attachments.preview_error') }}', 'error');
            }
        });
    });

    function attachEventListeners() {
        // Event listeners are attached via event delegation above
    }

    function escapeHtml(text) {
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, m => map[m]);
    }

    function showNotification(message, type = 'info') {
        const alertClass = type === 'error' ? 'danger' : type;
        const icon = type === 'error' ? 'ti-alert-circle' : 'ti-circle-check';

        const alert = `
            <div class="alert alert-${alertClass} alert-dismissible fade show" role="alert">
                <i class="ti ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;

        $('.page-content').prepend(alert);

        setTimeout(() => {
            $('.alert').fadeOut(function() { $(this).remove(); });
        }, 5000);
    }
});
</script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<style>
.page-header-section {
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1.5rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
}

.card-table {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

.btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
}

#bulkActionsSection {
    padding-bottom: calc(100% + 1rem);
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.form-check-input {
    width: 1.25em;
    height: 1.25em;
}

.badge {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}
</style>
@endsection