@extends('layouts.app')

@section('title', 'Create POSM Norm Template')

@section('content')

<div class="fixed-action-bar d-flex align-items-center justify-content-between">
    <div class="fw-semibold fixed-nav-title">Create POSM Norm Template</div>
    <div class="d-flex align-items-center ms-auto">
        <!-- Mandatory Action Set (Right) -->
        <!-- Add -->
        <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Add"></i>

        <!-- Save -->
        <button type="submit" form="templateForm" class="btn p-0">
            <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                data-toggle="tooltip" title="Save"></i>
        </button>

        <!-- Edit -->
        <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Edit"></i>

        <!-- Delete -->
        <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Delete"></i>

        <!-- Close -->
        <a href="{{ route('posm.norms.index') }}" class="mx-1">
            <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                data-toggle="tooltip" title="Close"></i>
        </a>

        <!-- Column Visibility -->
        <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"
            data-toggle="tooltip" title="Columns"></i>
    </div>
</div>

<form id="templateForm" action="{{ route('posm.norms.store') }}" method="POST">
    @csrf

    <div class="row mt-3 mb-5">
        <div class="col-12">
            <!-- Basic Info Card -->
            <div class="card rounded-border shadow-sm border-0 mb-4">
                <div class="card-body p-4">
                    <h5 class="form-section-title mb-4">Basic Information</h5>

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <label class="form-label">Template Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control"
                                placeholder="e.g. Standard Restaurant Norms" value="{{ old('name') }}" required>
                            @error('name')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Applicable Outlet Types <span class="text-danger">*</span></label>
                            <select name="outlet_types[]" class="form-select select2" multiple required>
                                <option value="hotel">Hotel</option>
                                <option value="restaurant">Restaurant</option>
                                <option value="bar">Bar</option>
                                <option value="cafe">Café</option>
                                <option value="other">Other</option>
                            </select>
                            @error('outlet_types')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            <label class="form-label">Description (Optional)</label>
                            <textarea name="description" class="form-control" rows="3"
                                placeholder="Describe the purpose of this template...">{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Products Section -->
            <div class="card rounded-border shadow-sm border-0">
                <div class="card-body p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="form-section-title mb-0">POSM Products & Norms</h5>
                        <div class="d-flex">
                            <button type="button" class="btn btn-outline-primary btn-sm px-3 me-2 mr-1" id="bulkImportBtn"
                                style="color: #50649c; border-color: #50649c;" data-toggle="modal"
                                data-target="#bulkImportModal">
                                <i class="fa-solid fa-file-import me-1"></i> Bulk Import
                            </button>
                            <button type="button" class="btn btn-primary btn-sm px-3" data-toggle="modal"
                                data-target="#addProductModal" style="background-color: #50649c; border-color: #50649c;">
                                <i class="fa-solid fa-plus me-1"></i> Add Product Line
                            </button>
                        </div>
                    </div>

                    <div class="table-responsive">
                        <table class="table align-middle" id="productsTable">
                            <thead class="bg-light">
                                <tr class="extra-small text-muted fw-bold">
                                    <th style="width: 25%;">PRODUCT</th>
                                    <th style="width: 10%;">CATEGORY</th>
                                    <th style="width: 10%;" class="text-center">QTY</th>
                                    <th style="width: 10%;" class="text-center">MIN</th>
                                    <th style="width: 10%;" class="text-center">MAX</th>
                                    <th style="width: 10%;" class="text-center">MUST HAVE</th>
                                    <th style="width: 15%;">DEVIATION OK</th>
                                    <th style="width: 10%;" class="text-end">ACTIONS</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="emptyRow">
                                    <td colspan="8" class="text-center py-4 text-muted small">
                                        No products added yet. Click "Add Product Line" to start.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-6">
                            <div class="p-3 rounded alert alert-info bg-soft-info border-0" style="border-left: 4px solid #3B82F6 !important;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fa-solid fa-circle-info text-primary me-3 fs-5" style="margin-top: 6px;"></i>
                                    <h6 class="fw-bold text-primary mb-0 fs-14">&nbsp;Must Have</h6>
                                </div>
                                <div class="ps-4 ms-2">
                                    <span class="small text-dark">Triggers alert if not available during audit</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-3 rounded alert alert-warning bg-soft-warning border-0" style="border-left: 4px solid #F59E0B !important;">
                                <div class="d-flex align-items-center mb-1">
                                    <i class="fa-solid fa-triangle-exclamation text-warning me-3 fs-5" style="margin-top: 6px;"></i>
                                    <h6 class="fw-bold text-warning mb-0 fs-14">&nbsp;Deviation OK</h6>
                                </div>
                                <div class="ps-4 ms-2">
                                    <span class="small text-dark">Acceptable variance from min/max quantities</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Add Product Modal -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0 shadow-none">
                <h5 class="modal-title fw-bold" style="color: #50649c;">Add Product to Template</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="mb-4">
                    <label class="form-label">Select Product <span class="text-danger">*</span></label>
                    <select id="modal_product" class="form-control select2-modal">
                        <option value="">Search products...</option>
                        @foreach($products as $product)
                        <option value="{{ $product->id }}" data-name="{{ $product->name }}"
                            data-sku="{{ $product->code }}" data-category="{{ $product->category }}">
                            {{ $product->name }} ({{ $product->code }})
                        </option>
                        @endforeach
                    </select>
                </div>

                <div class="row mb-4">
                    <div class="col-md-4">
                        <label class="form-label">Quantity <span class="text-danger">*</span></label>
                        <input type="number" id="modal_qty" class="form-control" min="0" value="1" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Min Quantity</label>
                        <input type="number" id="modal_min" class="form-control" min="0" value="1" readonly>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Max Quantity</label>
                        <input type="number" id="modal_max" class="form-control" min="0" value="1" readonly>
                    </div>
                </div>

                <div class="mb-4 mt-4">
                    <div class="custom-control custom-switch d-flex align-items-center">
                        <input type="checkbox" class="custom-control-input" id="modal_must_have">
                        <label class="custom-control-label fw-bold" for="modal_must_have">Must Have Product</label>
                    </div>
                    <div class="text-muted extra-small mt-1 ms-4">Triggers alert if not available during audit</div>
                </div>

                <div class="mb-4">
                    <label class="form-label">Acceptable Deviation</label>
                    <select id="modal_deviation" class="form-control">
                        <option value="None">None</option>
                        <option value="±5%">±5%</option>
                        <option value="±10%" selected>±10%</option>
                        <option value="±1 unit">±1 unit</option>
                        <option value="±2 units">±2 units</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-link text-muted text-decoration-none"
                    data-dismiss="modal">Cancel</button>
                <button type="button" id="addRowBtn" class="btn btn-primary px-4"
                    style="background-color: #50649c; border-color: #50649c; border-radius: 8px;">Add Product</button>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Import Modal -->
<div class="modal fade" id="bulkImportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0 shadow-none">
                <h5 class="modal-title fw-bold" style="color: #50649c;">Bulk Import Products</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-4 p-3 rounded"
                    style="background-color: #f8f9fa; border: 1px dashed #ced4da;">
                    <a href="{{ asset('files/norm_products_import_template.xlsx') }}" download class="btn btn-sm btn-outline-secondary">
                        <i class="fa-solid fa-download me-1"></i> Download Template Excel
                    </a>
                </div>

                <div class="mb-3">
                    <label class="form-label">Select Excel File <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <input type="file" id="import_file" class="form-control" accept=".xlsx, .xls">
                    </div>
                    <div class="extra-small text-muted mt-2">
                        <i class="fa-solid fa-circle-info me-1 text-info"></i> Only .xlsx file supported.
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-link text-muted text-decoration-none"
                    data-dismiss="modal">Cancel</button>
                <button type="button" id="processImportBtn" class="btn btn-primary px-4"
                    style="background-color: #50649c; border-color: #50649c; border-radius: 8px;">Upload &
                    Import</button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
    $(document).ready(function() {
        if ($.fn.select2) {
            $('.select2').select2({
                placeholder: "Select outlet types",
                allowClear: true,
                width: '100%'
            });

            $('.select2-modal').select2({
                dropdownParent: $('#addProductModal'),
                width: '100%'
            });
        }

        $('#templateForm').on('submit', function(e) {
            if ($('#productsTable tbody tr').length <= 1 && $('#emptyRow').length > 0) {
                e.preventDefault();
                Swal.fire('Error', 'Please add at least one product line.', 'error');
                return false;
            }
        });

        function updateModalMinMax() {
            const qty = parseInt($('#modal_qty').val()) || 0;
            const deviation = $('#modal_deviation').val();
            let min = qty;
            let max = qty;
            if (deviation === '±5%') {
                let diff = 5;
                min = qty - diff;
                max = qty + diff;
            } else if (deviation === '±10%') {
                let diff = 10;
                min = qty - diff;
                max = qty + diff;
            } else if (deviation === '±1 unit') {
                min = qty - 1;
                max = qty + 1;
            } else if (deviation === '±2 units') {
                min = qty - 2;
                max = qty + 2;
            }
            if (min < 0) min = 0;
            $('#modal_min').val(min);
            $('#modal_max').val(max);
        }

        $('#modal_qty, #modal_deviation').on('input change', updateModalMinMax);
        // Initialize modal values
        updateModalMinMax();

        function updateRowMinMax(row) {
            const qtyInput = row.find('.qty-input');
            const minInput = row.find('.min-input');
            const maxInput = row.find('.max-input');
            const deviationSelect = row.find('select[name$="[deviation_tolerance]"]');
            
            const qty = parseInt(qtyInput.val()) || 0;
            const deviation = deviationSelect.val();
            
            let min = qty;
            let max = qty;
            
            if (deviation === '±5%') {
                let diff = 5;
                min = qty - diff;
                max = qty + diff;
            } else if (deviation === '±10%') {
                let diff = 10;
                min = qty - diff;
                max = qty + diff;
            } else if (deviation === '±1 unit') {
                min = qty - 1;
                max = qty + 1;
            } else if (deviation === '±2 units') {
                min = qty - 2;
                max = qty + 2;
            }
            
            if (min < 0) min = 0;
            
            minInput.val(min);
            maxInput.val(max);
        }

        $(document).on('keypress', '.qty-input, #modal_qty', function(e) {
            if (e.which === 45) { // '-' key
                e.preventDefault();
            }
        });

        $(document).on('input change', '.qty-input, #modal_qty', function() {
            const val = parseInt($(this).val());
            if (val < 0) {
                $(this).val(0);
            }
        });

        $(document).on('input', '.qty-input', function() {
            updateRowMinMax($(this).closest('tr'));
        });

        $(document).on('change', 'select[name$="[deviation_tolerance]"]', function() {
            updateRowMinMax($(this).closest('tr'));
        });

        let rowIdx = 0;

        $('#addRowBtn').on('click', function() {
            const productSelect = $('#modal_product');
            const productId = productSelect.val();

            if (!productId) {
                Swal.fire('Error', 'Please select a product.', 'error');
                return;
            }

            const productData = productSelect.find(':selected').data();
            const qty = $('#modal_qty').val();
            const min = $('#modal_min').val();
            const max = $('#modal_max').val();

            if (!qty || parseInt(qty) < 0) {
                Swal.fire('Error', 'Please enter a valid quantity.', 'error');
                return;
            }

            if (parseInt(max) < parseInt(min)) {
                Swal.fire('Error', 'Max quantity cannot be less than min quantity.', 'error');
                return;
            }

            const mustHave = $('#modal_must_have').is(':checked');
            const deviation = $('#modal_deviation').val();

            // Check if product already exists in the table
            let exists = false;
            $('input[name^="items"][name$="[product_id]"]').each(function() {
                if ($(this).val() == productId) {
                    exists = true;
                    return false;
                }
            });

            if (exists) {
                Swal.fire('Error', 'This product is already added to the template.', 'error');
                return;
            }

            $('#emptyRow').remove();

            const newRow = `
                                                        <tr id="row_${rowIdx}">
                                                            <td>
                                                                <input type="hidden" name="items[${rowIdx}][product_id]" value="${productId}">
                                                                <div class="fw-bold">${productData.name}</div>
                                                                <div class="extra-small text-muted">${productData.sku}</div>
                                                            </td>
                                                            <td>
                                                                <span class="badge bg-light text-dark border">${productData.category}</span>
                                                            </td>
                                                            <td class="text-center">
                                                                <input type="number" name="items[${rowIdx}][qty]" class="form-control form-control-sm text-center mx-auto qty-input" style="width: 70px;" value="${qty}" required min="0">
                                                            </td>
                                                            <td class="text-center">
                                                                <input type="number" name="items[${rowIdx}][min_quantity]" class="form-control form-control-sm text-center mx-auto min-input" style="width: 70px;" value="${min}" readonly>
                                                            </td>
                                                            <td class="text-center">
                                                                <input type="number" name="items[${rowIdx}][max_quantity]" class="form-control form-control-sm text-center mx-auto max-input" style="width: 70px;" value="${max}" readonly>
                                                            </td>
                                                            <td class="text-center">
                                                                <div class="custom-control custom-checkbox d-inline-block">
                                                                    <input class="custom-control-input" type="checkbox" id="check_${rowIdx}" name="items[${rowIdx}][must_have]" value="1" ${mustHave ? 'checked' : ''}>
                                                                    <label class="custom-control-label" for="check_${rowIdx}"></label>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <select name="items[${rowIdx}][deviation_tolerance]" class="form-control form-control-sm">
                                                                    <option value="None" ${deviation === 'None' ? 'selected' : ''}>None</option>
                                                                    <option value="±5%" ${deviation === '±5%' ? 'selected' : ''}>±5%</option>
                                                                    <option value="±10%" ${deviation === '±10%' ? 'selected' : ''}>±10%</option>
                                                                    <option value="±1 unit" ${deviation === '±1 unit' ? 'selected' : ''}>±1 unit</option>
                                                                    <option value="±2 units" ${deviation === '±2 units' ? 'selected' : ''}>±2 units</option>
                                                                </select>
                                                            </td>
                                                            <td class="text-end">
                                                                <button type="button" class="btn btn-link text-danger p-0 delete-row" data-id="${rowIdx}">
                                                                    <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    `;

            $('#productsTable tbody').append(newRow);
            rowIdx++;

            // Reset modal
            $('#modal_product').val('').trigger('change');
            $('#modal_qty').val(1);
            $('#modal_min').val(1);
            $('#modal_max').val(1);
            $('#modal_must_have').prop('checked', false);
            $('#modal_deviation').val('±10%');
            updateModalMinMax();

            $('#addProductModal').modal('hide');
        });

        $(document).on('click', '.delete-row', function() {
            const id = $(this).data('id');
            $(`#row_${id}`).remove();

            if ($('#productsTable tbody tr').length === 0) {
                $('#productsTable tbody').append(`
                                                            <tr id="emptyRow">
                                                                <td colspan="7" class="text-center py-4 text-muted small">
                                                                    No products added yet. Click "Add Product Line" to start.
                                                                </td>
                                                            </tr>
                                                        `);
            }
        });

        $('#processImportBtn').on('click', function() {
            const fileInput = $('#import_file')[0];
            if (fileInput.files.length === 0) {
                Swal.fire('Error', 'Please select an Excel file.', 'error');
                return;
            }

            const formData = new FormData();
            formData.append('import_file', fileInput.files[0]);
            formData.append('_token', '{{ csrf_token() }}');

            const btn = $(this);
            btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-1"></i> Processing...');
            $('#importErrors').remove();

            $.ajax({
                url: '{{ route("posm.norms.import.validate") }}',
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.success) {
                        $('#emptyRow').remove();
                        response.products.forEach(product => {
                            const pId = product.product_id;

                            let exists = false;
                            $('input[name^="items"][name$="[product_id]"]').each(function() {
                                if ($(this).val() == pId) {
                                    exists = true;
                                    return false;
                                }
                            });

                            if (!exists) {
                                const qty = product.qty;
                                const newRow = `
                                    <tr id="row_${rowIdx}">
                                        <td>
                                            <input type="hidden" name="items[${rowIdx}][product_id]" value="${pId}">
                                            <div class="fw-bold">${product.name}</div>
                                            <div class="extra-small text-muted">${product.sku}</div>
                                        </td>
                                        <td>
                                            <span class="badge bg-light text-dark border">${product.category}</span>
                                        </td>
                                        <td class="text-center">
                                            <input type="number" name="items[${rowIdx}][qty]" class="form-control form-control-sm text-center mx-auto qty-input" style="width: 70px;" value="${qty}" required min="0">
                                        </td>
                                        <td class="text-center">
                                            <input type="number" name="items[${rowIdx}][min_quantity]" class="form-control form-control-sm text-center mx-auto min-input" style="width: 70px;" value="${product.min_quantity}" readonly>
                                        </td>
                                        <td class="text-center">
                                            <input type="number" name="items[${rowIdx}][max_quantity]" class="form-control form-control-sm text-center mx-auto max-input" style="width: 70px;" value="${product.max_quantity}" readonly>
                                        </td>
                                        <td class="text-center">
                                            <div class="custom-control custom-checkbox d-inline-block">
                                                <input class="custom-control-input" type="checkbox" id="check_${rowIdx}" name="items[${rowIdx}][must_have]" value="1" ${product.must_have ? 'checked' : ''}>
                                                <label class="custom-control-label" for="check_${rowIdx}"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <select name="items[${rowIdx}][deviation_tolerance]" class="form-control form-control-sm">
                                                <option value="None" ${product.deviation_tolerance === 'None' ? 'selected' : ''}>None</option>
                                                <option value="±5%" ${product.deviation_tolerance === '±5%' ? 'selected' : ''}>±5%</option>
                                                <option value="±10%" ${product.deviation_tolerance === '±10%' ? 'selected' : ''}>±10%</option>
                                                <option value="±1 unit" ${product.deviation_tolerance === '±1 unit' ? 'selected' : ''}>±1 unit</option>
                                                <option value="±2 units" ${product.deviation_tolerance === '±2 units' ? 'selected' : ''}>±2 units</option>
                                            </select>
                                        </td>
                                        <td class="text-end">
                                            <button type="button" class="btn btn-link text-danger p-0 delete-row" data-id="${rowIdx}">
                                                <i class="fa-solid fa-trash-can rounded-5 p-1 d-inline-flex align-items-center justify-content-center action-btn theme-red"></i>
                                            </button>
                                        </td>
                                    </tr>
                                `;
                                $('#productsTable tbody').append(newRow);
                                rowIdx++;
                            }
                        });

                        $('#bulkImportModal').modal('hide');
                        $('#import_file').val('');
                        Swal.fire({
                            icon: 'success',
                            title: 'Import Successful',
                            text: 'Valid products have been added to the template.',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }
                    btn.prop('disabled', false).text('Upload & Import');
                },
                error: function(xhr) {
                    btn.prop('disabled', false).text('Upload & Import');
                    let errorHtml = '<div id="importErrors" class="alert alert-danger small p-3 mb-3"><ul class="mb-0 ps-3">';
                    if (xhr.responseJSON && xhr.responseJSON.errors) {
                        xhr.responseJSON.errors.forEach(err => {
                            errorHtml += `<li>${err}</li>`;
                        });
                    } else if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorHtml += `<li>${xhr.responseJSON.message}</li>`;
                    } else {
                        errorHtml += '<li>An unexpected error occurred.</li>';
                    }
                    errorHtml += '</ul></div>';

                    $('#bulkImportModal .modal-body').prepend(errorHtml);
                }
            });
        });
    });
</script>
<style>
    .rounded-border {
        border-radius: 12px;
        border: 1px solid #e0e0e0;
    }

    .form-label {
        color: #8D99AE;
        font-weight: 500;
        font-size: 0.85rem;
        margin-bottom: 8px;
        display: block;
    }

    .form-control,
    .form-select {
        border: none !important;
        border-bottom: 1px solid #E5E9F2 !important;
        border-radius: 0 !important;
        padding: 0.4rem 0 !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        color: #4E5E7A !important;
        box-shadow: none !important;
    }

    .form-control:focus,
    .form-select:focus {
        border-bottom-color: #FABB1E !important;
    }

    .form-section-title {
        font-size: 1.1rem;
        font-weight: 700;
        color: #50649c;
        margin-bottom: 1.5rem;
    }


    .extra-small {
        font-size: 0.75rem;
    }

    .theme-red {
        color: #f06548;
    }

    .select2-container--bootstrap-5 .select2-selection {
        border: none !important;
        border-bottom: 1px solid #E5E9F2 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
        padding-left: 0 !important;
        color: #4E5E7A !important;
    }

    .action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
    }

    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
</style>
@endpush