{{-- Action Buttons Component for Admin Tables --}}
@props([
    'viewRoute' => null,
    'editRoute' => null,
    'deleteRoute' => null,
    'customButtons' => [],
    'size' => 'sm',
    'layout' => 'horizontal' // horizontal or vertical
])

<div class="action-buttons {{ $layout === 'vertical' ? 'action-buttons-vertical' : 'action-buttons-horizontal' }}">
    {{-- View Button --}}
    @if($viewRoute)
        <a href="{{ $viewRoute }}" 
           class="btn btn-info btn-{{ $size }} action-btn view-btn" 
           title="Xem chi tiết"
           data-bs-toggle="tooltip">
            <i class="fas fa-eye"></i>
            <span class="btn-text">Xem</span>
        </a>
    @endif

    {{-- Edit Button --}}
    @if($editRoute)
        <a href="{{ $editRoute }}" 
           class="btn btn-warning btn-{{ $size }} action-btn edit-btn" 
           title="Chỉnh sửa"
           data-bs-toggle="tooltip">
            <i class="fas fa-edit"></i>
            <span class="btn-text">Sửa</span>
        </a>
    @endif

    {{-- Delete Button --}}
    @if($deleteRoute)
        <button type="button" 
                class="btn btn-danger btn-{{ $size }} action-btn delete-btn" 
                title="Xóa"
                data-bs-toggle="tooltip"
                onclick="confirmDelete('{{ $deleteRoute }}')">
            <i class="fas fa-trash"></i>
            <span class="btn-text">Xóa</span>
        </button>
    @endif

    {{-- Custom Buttons --}}
    @foreach($customButtons as $button)
        <a href="{{ $button['route'] ?? '#' }}" 
           class="btn btn-{{ $button['color'] ?? 'secondary' }} btn-{{ $size }} action-btn custom-btn"
           title="{{ $button['title'] ?? '' }}"
           data-bs-toggle="tooltip"
           @if(isset($button['onclick'])) onclick="{{ $button['onclick'] }}" @endif>
            @if(isset($button['icon']))
                <i class="{{ $button['icon'] }}"></i>
            @endif
            <span class="btn-text">{{ $button['text'] ?? '' }}</span>
        </a>
    @endforeach
</div>

<style>
.action-buttons {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    justify-content: flex-start;
}

.action-buttons-vertical {
    flex-direction: column;
    align-items: stretch;
}

.action-buttons-horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 44px; /* Touch-friendly */
    justify-content: center;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn i {
    font-size: 0.75rem;
    flex-shrink: 0;
}

.btn-text {
    font-size: 0.75rem;
}

/* Button Colors */
.view-btn {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: white;
    border: 1px solid #06b6d4;
}

.view-btn:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490);
    color: white;
}

.edit-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: 1px solid #f59e0b;
}

.edit-btn:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
}

.delete-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    border: 1px solid #ef4444;
}

.delete-btn:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .action-buttons-horizontal {
        flex-direction: column;
        gap: 0.25rem;
        align-items: stretch;
    }

    .action-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        justify-content: flex-start;
    }

    .btn-text {
        font-size: 0.8rem;
    }

    .action-btn i {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .action-buttons {
        gap: 0.25rem;
    }

    .action-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        min-width: 40px;
    }

    .btn-text {
        display: none; /* Hide text on very small screens */
    }

    .action-btn i {
        font-size: 0.875rem;
    }
}
</style>

<script>
function confirmDelete(deleteRoute) {
    if (confirm('Bạn có chắc chắn muốn xóa? Hành động này không thể hoàn tác.')) {
        // Create form and submit
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = deleteRoute;
        
        // Add CSRF token
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        form.appendChild(csrfInput);
        
        // Add DELETE method
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        form.appendChild(methodInput);
        
        document.body.appendChild(form);
        form.submit();
    }
}

// Initialize tooltips
document.addEventListener('DOMContentLoaded', function() {
    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }
});
</script>