@php
    $record = $getRecord();
@endphp

@if($record)
    <div class="custom-action-buttons">
        {{-- Ship button with dropdown --}}
        <div class="dropdown-container">
            <button type="button" 
                    class="action-btn ship-btn" 
                    data-order-id="{{ $record->order_id }}"
                    onclick="toggleDropdown(event, 'ship-{{ $record->order_id }}')">
                <span class="btn-text">Ship</span>
                <svg class="btn-arrow" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
                    <path d="M5 6.5L2 3.5h6L5 6.5z" fill="currentColor"/>
                </svg>
            </button>
            <div id="ship-{{ $record->order_id }}" class="dropdown-menu">
                <a href="#" onclick="handleShipAction(event, '{{ $record->order_id }}', 'standard')">Standard Shipping</a>
                <a href="#" onclick="handleShipAction(event, '{{ $record->order_id }}', 'express')">Express Shipping</a>
                <a href="#" onclick="handleShipAction(event, '{{ $record->order_id }}', 'overnight')">Overnight Shipping</a>
            </div>
        </div>
        
        {{-- Follow Up button --}}
        <button type="button" 
                class="action-btn follow-btn" 
                data-order-id="{{ $record->external_order_id }}"
                onclick="handleFollowUp(event, '{{ $record->external_order_id }}')">
            <span class="btn-text">Follow Up</span>
        </button>
        
        {{-- Resend button with dropdown --}}
        <div class="dropdown-container">
            <button type="button" 
                    class="action-btn resend-btn" 
                    data-order-id="{{ $record->external_order_id }}"
                    onclick="toggleDropdown(event, 'resend-{{ $record->order_id }}')"
                    style="background: transparent !important; color: rgb(107, 114, 128) !important; border: 1px solid transparent !important;">
                <span class="btn-text">Resend</span>
                <svg class="btn-arrow" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
                    <path d="M5 6.5L2 3.5h6L5 6.5z" fill="currentColor"/>
                </svg>
            </button>
            <div id="resend-{{ $record->order_id }}" class="dropdown-menu">
                <a href="#" onclick="handleResendAction(event, '{{ $record->external_order_id }}', 'email')">Resend Email</a>
                <a href="#" onclick="handleResendAction(event, '{{ $record->external_order_id }}', 'invoice')">Resend Invoice</a>
                <a href="#" onclick="handleResendAction(event, '{{ $record->external_order_id }}', 'tracking')">Resend Tracking</a>
            </div>
        </div>
    </div>
    
    <style>
        .custom-action-buttons {
            display: flex;
            flex-direction: column;
            gap: 0; /* No gap between buttons */
            align-items: stretch;
            width: 100%;
            padding: 0;
        }
        
        .dropdown-container {
            position: relative;
            width: 100%;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 2px 8px; /* Reduced from 4px 8px */
            border: 1px solid transparent;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
            background: transparent;
            color: rgb(107, 114, 128);
            width: 100%;
            min-width: 80px;
            position: relative;
            margin: 0; /* No margin */
        }
        
        /* Add small spacing only between buttons, not at edges */
        .action-btn + .action-btn,
        .dropdown-container + .action-btn,
        .action-btn + .dropdown-container,
        .dropdown-container + .dropdown-container {
            margin-top: 2px;
        }
        
        /* Light theme */
        .action-btn:hover {
            background: rgb(243, 244, 246);
            color: rgb(55, 65, 81);
            border-color: rgb(209, 213, 219);
        }
        
        .action-btn:active {
            background: rgb(229, 231, 235);
        }
        
        /* Dark theme */
        .dark .action-btn {
            color: rgb(156, 163, 175);
        }
        
        .dark .action-btn:hover {
            background: rgb(55, 65, 81);
            color: rgb(209, 213, 219);
            border-color: rgb(75, 85, 99);
        }
        
        .dark .action-btn:active {
            background: rgb(75, 85, 99);
        }
        
        .btn-text {
            flex: 1;
            text-align: center;
        }
        
        .btn-arrow {
            flex-shrink: 0;
            opacity: 0.6;
        }
        
        .action-btn:hover .btn-arrow {
            opacity: 1;
        }
        
        /* Dropdown menu styles */
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 2px;
            background: white;
            border: 1px solid rgb(229, 231, 235);
            border-radius: 4px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            min-width: 150px;
        }
        
        .dropdown-menu.show {
            display: block;
        }
        
        .dropdown-menu a {
            display: block;
            padding: 6px 12px;
            color: rgb(55, 65, 81);
            text-decoration: none;
            font-size: 12px;
            transition: background 0.15s ease;
            cursor: pointer;
        }
        
        .dropdown-menu a:hover {
            background: rgb(243, 244, 246);
        }
        
        .dropdown-menu a:first-child {
            border-radius: 3px 3px 0 0;
        }
        
        .dropdown-menu a:last-child {
            border-radius: 0 0 3px 3px;
        }
        
        /* Dark theme dropdown */
        .dark .dropdown-menu {
            background: rgb(31, 41, 55);
            border-color: rgb(55, 65, 81);
        }
        
        .dark .dropdown-menu a {
            color: rgb(209, 213, 219);
        }
        
        .dark .dropdown-menu a:hover {
            background: rgb(55, 65, 81);
        }
        
        /* Ensure dropdowns appear above other elements */
        .custom-action-buttons {
            position: relative;
            z-index: 1;
        }
    </style>
    
    <script>
        // Toggle dropdown menu
        function toggleDropdown(event, dropdownId) {
            event.stopPropagation();
            
            // Close all other dropdowns first
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                if (menu.id !== dropdownId) {
                    menu.classList.remove('show');
                }
            });
            
            // Toggle this dropdown
            const dropdown = document.getElementById(dropdownId);
            if (dropdown) {
                dropdown.classList.toggle('show');
            }
            
            // Close dropdown when clicking outside
            document.addEventListener('click', function closeDropdown(e) {
                if (!e.target.closest('.dropdown-container')) {
                    document.querySelectorAll('.dropdown-menu').forEach(menu => {
                        menu.classList.remove('show');
                    });
                    document.removeEventListener('click', closeDropdown);
                }
            });
        }
        
        // Handle Follow Up action
        function handleFollowUp(event, orderId) {
            event.stopPropagation();
            console.log('Follow up order:', orderId);
            // Add your follow up logic here
            // For example: window.location.href = `/orders/${orderId}/follow-up`;
        }
        
        // Handle Ship actions
        function handleShipAction(event, orderId, type) {
            event.preventDefault();
            event.stopPropagation();
            console.log('Ship order:', orderId, 'Type:', type);
            // Add your shipping logic here
            
            // Close the dropdown
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                menu.classList.remove('show');
            });
        }
        
        // Handle Resend actions
        function handleResendAction(event, orderId, type) {
            event.preventDefault();
            event.stopPropagation();
            console.log('Resend for order:', orderId, 'Type:', type);
            // Add your resend logic here
            
            // Close the dropdown
            document.querySelectorAll('.dropdown-menu').forEach(menu => {
                menu.classList.remove('show');
            });
        }
    </script>
@endif