@extends('layouts.main')

@section('otherCss')

<style>
/* Global Search Styles */
.global-search-container {
    position: relative;
    width: 100%;
}

.search-input-wrapper {
    position: relative;
}

.search-results-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1050;
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background-color 0.2s;
}

.search-result-item:hover {
    background-color: #f8f9fa;
}

.search-result-item:last-child {
    border-bottom: none;
}

.result-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #6c757d;
    font-size: 18px;
}

.result-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-content {
    flex: 1;
    min-width: 0;
}

.result-title {
    font-weight: 600;
    color: #212529;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subtitle {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-meta {
    font-size: 12px;
    color: #adb5bd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-action {
    color: #6c757d;
    font-size: 16px;
    margin-left: 8px;
}

.search-loading,
.search-error,
.search-no-results {
    padding: 16px;
    text-align: center;
    color: #6c757d;
    font-size: 14px;
}

.search-loading .spinner-border-sm {
    width: 1rem;
    height: 1rem;
}

.search-error {
    color: #dc3545;
}

/* Dark theme support (if you're using dark theme) */
@media (prefers-color-scheme: dark) {
    .search-results-dropdown {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    .search-result-item:hover {
        background-color: #4a5568;
    }
    
    .result-title {
        color: #f7fafc;
    }
    
    .result-subtitle {
        color: #cbd5e0;
    }
    
    .result-meta {
        color: #a0aec0;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .global-search-container {
        max-width: 100%;
    }
    
    .result-content {
        font-size: 14px;
    }
    
    .result-subtitle {
        font-size: 13px;
    }
    
    .result-meta {
        font-size: 11px;
    }
}
</style>

@endsection

@section('contents')
    <div class="container-fluid">
        <!-- Page-Title -->
        <x-bread-crumbs>
            <div class="float-right">
                <ol class="breadcrumb">
                    {{-- <li class="breadcrumb-item"><a href="javascript:void(0);">Crovex</a></li> --}}
                    {{-- <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li> --}}
                    <li class="breadcrumb-item active">Search Consumers</li>
                </ol>
            </div>
            <h4 class="page-title">MSPDCL Surya Ghar</h4>
        </x-bread-crumbs>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="header-title mt-0 mb-4">Search Consumers</h4>
                        <div class="slimscroll profile-activity-height">
                            <div id="global-search-container" class="global-search-container">
                                <div class="search-input-wrapper">
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <select class="custom-select" id="search-type-selector" style="max-width: 120px;">
                                                <option value="consumers">Consumers</option>
                                                <option value="ppa">PPA Status</option>
                                            </select>
                                        </div>
                                        <input type="text" 
                                            id="global-search-input" 
                                            class="form-control" 
                                            placeholder="Search consumers, PPA status... (Ctrl+K)"
                                            autocomplete="off">
                                        <div class="input-group-append">
                                            <span class="input-group-text">
                                                <i class="mdi mdi-magnify"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- Search Results Dropdown -->
                                <div id="global-search-results" class="search-results-dropdown" style="display: none;">
                                    <!-- Results will be populated here by JavaScript -->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@section('otherJs')
<script>
// Add to your layout's script section or include in your main JavaScript file
document.addEventListener('DOMContentLoaded', function() {
    // Focus search input when Ctrl+K or Cmd+K is pressed
    document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
            e.preventDefault();
            const searchInput = document.getElementById('global-search-input');
            if (searchInput) {
                searchInput.focus();
            }
        }
    });
});

</script>
@endsection