{{-- Current Split will expire info --}}
@if($current_expiration)
<div class="alert alert-info d-flex align-items-center mb-3" role="alert">
    <i class="bx bx-info-circle me-2"></i>
    <span>Current Split will expire on {{ \Carbon\Carbon::parse($current_expiration['expiration_date'])->format('F d, Y') }}</span>
</div>

{{-- Update Split Expiration Date Form --}}
<div class="project-box border rounded p-3 mb-3 bg-light">
    <form id="update-expiration-form" data-merchant-id="{{ $merchant_id }}" data-user-id="{{ $user_id }}">
        @csrf
        <div class="row g-2">
            <div class="col-md-4">
                <div class="project-form form-line">
                    <label for="split-expiration-date" class="form-label mb-0">Split Expiration Date</label>
                    <input type="month" id="split-expiration-date" name="split_expiration" class="form-control" value="{{ isset($current_expiration['expiration_date']) ? \Carbon\Carbon::parse($current_expiration['expiration_date'])->format('Y-m') : date('Y-m') }}">
                </div>
            </div>
            <div class="col-md-4">
                <div class="project-form form-line">
                    <label for="split_percentage" class="form-label mb-0">Split (%)</label>
                    <input type="number" class="form-control" name="split_percentage" id="split_percentage"
                        value="{{ $current_expiration['split_percentage'] ?? '0.00' }}" 
                        step="0.01" min="0" max="100">
                </div>
            </div>
            <div class="col-md-4">
                <div class="project-form form-line">
                    <label for="split_type" class="form-label mb-0">Type</label>
                    <select class="form-control select2 no-search" name="split_type" id="split_type">
                        <option value="1" {{ ($current_expiration['split_type'] ?? 1) == 1 ? 'selected' : '' }}>Gross</option>
                        <option value="2" {{ ($current_expiration['split_type'] ?? 1) == 2 ? 'selected' : '' }}>Net</option>
                    </select>
                </div>
            </div>
            <div class="col-12">
                <div class="project-form form-line">
                    <div class="d-flex gap-2">
                        <button type="button" class="black-btn-inner waves-effect delete-expiration-btn" 
                                data-merchant-id="{{ $merchant_id }}" 
                                data-user-id="{{ $user_id }}">
                            <i class="bx bx-trash"></i> Delete Expiration Date
                        </button>
                        <button type="submit" class="green-btn-inner waves-effect">
                            <i class="bx bx-edit"></i> Update
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endif

{{-- Search and Actions Bar --}}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h6 class="mb-0">Split Expiration Date History</h6>
    <div class="search-field position-relative">
        <input type="text" class="form-control pr-45 expiration-history-search" placeholder="Search history..." value="{{ e(request()->input('search_text')) }}" style="padding-right: 35px;">
        @if(request()->has('search_text') && request()->input('search_text'))
            <i class="{{ \Config::get('settings.icon_cross') }} expiration-search-clear-icon position-absolute" style="right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; color: #6c757d;"></i>
        @else
            <i class="{{ \Config::get('settings.icon_search') }} position-absolute" style="right: 10px; top: 50%; transform: translateY(-50%); color: #6c757d;"></i>
        @endif
    </div>
</div>

{{-- Split Expiration Date History Table --}}
<div class="table-responsive">
    <table id="expiration-history-table" class="table mb-0 dt-responsive nowrap table-sm">
        <thead class="thead-light">
            <tr>
                <th class="expiration-searchable-column" data-column="split_percentage">New Split</th>
                <th class="expiration-searchable-column" data-column="expiration_date">Expiration Date</th>
                <th class="expiration-searchable-column" data-column="changed_by">Change By</th>
                <th class="expiration-searchable-column" data-column="date">Date</th>
            </tr>
        </thead>
        <tbody>
            @if(isset($data) && count($data) > 0)
                @foreach($data as $record)
                <tr>
                    <td class="expiration-searchable-column" data-column="split_percentage">{{ $record->split_percentage ?? 'N/A' }}%</td>
                    <td class="expiration-searchable-column" data-column="expiration_date">{{ $record->expiration_date ?? 'N/A' }}</td>
                    <td class="expiration-searchable-column" data-column="changed_by">{{ $record->changed_by ?? 'System' }}</td>
                    <td class="expiration-searchable-column" data-column="date">{{ $record->date ?? 'N/A' }}</td>
                </tr>
                @endforeach
            @else
                <tr>
                    <td colspan="4" class="text-center text-muted">No expiration split history found</td>
                </tr>
            @endif
        </tbody>
    </table>
</div>
<script src="{{ asset('admin-form-plugins/select2-init.js')}}"></script>
<script>
(function() {
    // Search functionality specific to expiration split history modal only
    var $modal = $('#expiration-history-table').closest('.modal-body, .modal-content');
    var $searchInput = $('.expiration-history-search');
    var $table = $('#expiration-history-table');
    
    // Only proceed if we have the specific elements
    if ($searchInput.length && $table.length) {
        
        $searchInput.on('keypress', function(e) {
            if (e.which === 13) { // Enter key
                var searchText = $searchInput.val();
                var currentUrl = window.location.href;
                var baseUrl = currentUrl.split('?')[0];
                var params = new URLSearchParams(window.location.search);
                
                if (searchText.trim()) {
                    params.set('search_text', searchText);
                } else {
                    params.delete('search_text');
                }
                
                // Reset to first page when searching
                params.delete('page');
                
                var newUrl = baseUrl + (params.toString() ? '?' + params.toString() : '');
                
                // For modal content, reload the modal content instead of full page
                if ($modal.length) {
                    // Reload modal content via AJAX
                    var modalUrl = newUrl;
                    $.get(modalUrl, function(response) {
                        $modal.html($(response).find('.modal-body').html());
                    });
                } else {
                    window.location.href = newUrl;
                }
            }
        });
        
        // Handle search clear functionality
        $('.expiration-search-clear-icon').on('click', function() {
            $searchInput.val('');
            $searchInput.trigger('input'); // Trigger real-time search to show all rows
            
            var currentUrl = window.location.href;
            var baseUrl = currentUrl.split('?')[0];
            var params = new URLSearchParams(window.location.search);
            
            params.delete('search_text');
            params.delete('page');
            
            var newUrl = baseUrl + (params.toString() ? '?' + params.toString() : '');
            
            // For modal content, reload the modal content
            if ($modal.length) {
                $.get(newUrl, function(response) {
                    $modal.html($(response).find('.modal-body').html());
                });
            } else {
                window.location.href = newUrl;
            }
        });
        
        // Real-time table search (client-side for current page results - specific to this table only)
        $searchInput.on('input', function() {
            var searchText = $(this).val().toLowerCase();
            var $tableRows = $table.find('tbody tr');
            
            $tableRows.each(function() {
                var $row = $(this);
                var searchableText = '';
                
                // Collect text only from this table's searchable columns
                $row.find('.expiration-searchable-column').each(function() {
                    searchableText += $(this).text().toLowerCase() + ' ';
                });
                
                if (searchableText.indexOf(searchText) > -1) {
                    $row.show();
                } else {
                    $row.hide();
                }
            });
            
            // Show "No results" message if all rows are hidden (specific to this table)
            var visibleRows = $tableRows.filter(':visible').length;
            var $noResultsRow = $table.find('tbody tr:contains("No expiration split history found")');
            
            if (visibleRows === 0 && searchText.trim() !== '' && $noResultsRow.length === 0) {
                $table.find('tbody').append('<tr class="expiration-search-no-results"><td colspan="4" class="text-center text-muted">No matching results found</td></tr>');
            } else if (visibleRows > 0) {
                $table.find('.expiration-search-no-results').remove();
            }
        });
    }
})();
</script>