@extends('layouts.app')

@section('title', 'Record Meter Reading')

@section('content')
<div class="container-fluid" style="max-width: 600px;">
    <div class="row mb-4">
        <div class="col-12">
            <h2><i class="fas fa-tachometer-alt me-2"></i>Record Meter Reading</h2>
            <p class="text-muted">Search for a client and record their meter reading</p>
        </div>
    </div>

    @if($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <strong><i class="fas fa-exclamation-triangle me-2"></i>Errors Found:</strong>
            <ul class="mb-0 mt-2">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ route('meter-readings.record-store') }}">
        @csrf
        
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-search me-2"></i>Search Client</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="client_search" class="form-label">Search by Name or Account Number <span class="text-danger">*</span></label>

                    @if($blockLotSearchEnabled ?? false)
                        <div class="row mb-2">
                            <div class="col-6 col-md-3">
                                <input
                                    type="text"
                                    class="form-control"
                                    id="search_block"
                                    placeholder="Block #"
                                    autocomplete="off"
                                >
                            </div>
                            <div class="col-6 col-md-3">
                                <input
                                    type="text"
                                    class="form-control"
                                    id="search_lot"
                                    placeholder="Lot #"
                                    autocomplete="off"
                                >
                            </div>
                            <div class="col-md-6 d-flex align-items-center">
                                <small class="text-muted">Search by block and/or lot to list the clients there</small>
                            </div>
                        </div>
                    @endif

                    <input
                        type="text"
                        class="form-control"
                        id="client_search"
                        placeholder="Type client name, account number, or meter number..."
                        autocomplete="off"
                    >
                    <div id="client_dropdown" class="position-absolute w-100" style="max-width: 540px; z-index: 1000; display: none;">
                        <div class="list-group">
                            <!-- Results will appear here -->
                        </div>
                    </div>
                    <small class="form-text text-muted d-block mt-2">
                        Type at least 2 characters to search{{ ($blockLotSearchEnabled ?? false) ? ', or fill in Block/Lot above' : '' }}
                    </small>
                </div>

                <input type="hidden" name="client_id" id="client_id" value="{{ old('client_id') }}">
                
                <div id="client_info" style="display: none;">
                    <hr>
                    <div id="pending_warning" class="alert alert-danger" style="display: none;">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Pending Reading Exists!</strong>
                        <p class="mb-0">This client has a pending meter reading. Please approve or reject it before recording a new reading.</p>
                    </div>

                    <div class="alert alert-info">
                        <strong>Selected Client:</strong>
                        <p class="mb-2"><strong id="selected_client_name"></strong></p>
                        <small>
                            Account: <span id="selected_account_number"></span><br>
                            Meter: <span id="selected_meter_number">Not set</span>
                        </small>
                    </div>

                    <div class="alert alert-light border">
                        <strong id="reading_label">Last Approved Reading:</strong>
                        <p class="mb-0">
                            <span id="last_reading_date">—</span> 
                            | 
                            <strong><span id="last_reading_value">—</span> cu.m</strong>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="card" id="reading_form" style="display: none;">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-pencil me-2"></i>Meter Reading Details</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="meter_number" class="form-label">Meter Number <span id="meter_required" class="text-danger" style="display: none;">*</span></label>
                    <input 
                        type="text" 
                        class="form-control @error('meter_number') is-invalid @enderror" 
                        id="meter_number" 
                        name="meter_number"
                        value="{{ old('meter_number') }}"
                        placeholder="Enter meter number"
                    >
                    <small class="form-text text-muted d-block mt-1" id="meter_info">
                        The meter number becomes locked after the first reading is recorded.
                    </small>
                    @error('meter_number')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="reading_date" class="form-label">Reading Date <span class="text-danger">*</span></label>
                    <input 
                        type="date" 
                        class="form-control @error('reading_date') is-invalid @enderror" 
                        id="reading_date" 
                        name="reading_date"
                        value="{{ old('reading_date', date('Y-m-d')) }}"
                        required
                    >
                    @error('reading_date')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="reading_value" class="form-label">Meter Reading (cu.m) <span class="text-danger">*</span></label>
                    <input 
                        type="number" 
                        class="form-control @error('reading_value') is-invalid @enderror" 
                        id="reading_value" 
                        name="reading_value"
                        value="{{ old('reading_value') }}"
                        placeholder="0"
                        step="0.01"
                        min="0"
                        required
                    >
                    @error('reading_value')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="units_consumed" class="form-label">Units Consumed (cu.m)</label>
                    <div class="input-group">
                        <input 
                            type="number" 
                            class="form-control" 
                            id="units_consumed" 
                            name="units_consumed"
                            value="{{ old('units_consumed') }}"
                            placeholder="0"
                            step="0.01"
                            min="0"
                            readonly
                        >
                        <span class="input-group-text" id="units_info">Auto-calculated</span>
                    </div>
                </div>

                <div class="d-grid gap-2 d-sm-flex justify-content-sm-end">
                    <a href="{{ route('meter-readings.index') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-success">
                        <i class="fas fa-check me-2"></i>Record Reading
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>

<style>
    #client_dropdown {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border-radius: 0.25rem;
        margin-top: 0.5rem;
    }
    
    #client_dropdown .list-group-item {
        cursor: pointer;
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding: 0.75rem 1rem;
    }
    
    #client_dropdown .list-group-item:last-child {
        border-bottom: none;
    }
    
    #client_dropdown .list-group-item:hover {
        background-color: #f8f9fa;
    }
</style>

<script>
    let debounceTimer;
    let lastReadingValue = null; // Track last reading for calculation
    let meterStartReading = null; // Track start reading as fallback
    
    const clientSearch = document.getElementById('client_search');
    const clientDropdown = document.getElementById('client_dropdown');
    const clientId = document.getElementById('client_id');
    const clientInfo = document.getElementById('client_info');
    const readingForm = document.getElementById('reading_form');
    const meterNumber = document.getElementById('meter_number');
    const meterRequired = document.getElementById('meter_required');
    const meterInfo = document.getElementById('meter_info');
    const readingValue = document.getElementById('reading_value');
    const unitsConsumed = document.getElementById('units_consumed');

    // Calculate units consumed when reading value changes
    readingValue.addEventListener('change', function() {
        calculateUnitsConsumed();
    });

    function calculateUnitsConsumed() {
        const currentReading = parseFloat(readingValue.value) || 0;
        let consumed = 0;

        if (lastReadingValue !== null) {
            // Use last meter reading if available
            consumed = currentReading - lastReadingValue;
        } else if (meterStartReading !== null) {
            // Use meter start reading as fallback
            consumed = currentReading - meterStartReading;
        }

        unitsConsumed.value = consumed >= 0 ? consumed.toFixed(2) : 0;
    }

    // Search clients — combines the text query with the optional
    // Block/Lot fields (shown when enabled in company settings)
    const searchBlock = document.getElementById('search_block');
    const searchLot = document.getElementById('search_lot');

    function triggerClientSearch() {
        clearTimeout(debounceTimer);
        const query = clientSearch.value.trim();
        const block = searchBlock ? searchBlock.value.trim() : '';
        const lot = searchLot ? searchLot.value.trim() : '';

        if (query.length < 2 && !block && !lot) {
            clientDropdown.style.display = 'none';
            return;
        }

        debounceTimer = setTimeout(async () => {
            try {
                const params = new URLSearchParams({ q: query, block: block, lot: lot });
                const response = await fetch(`{{ route('api.search-clients') }}?${params.toString()}`);
                const clients = await response.json();

                const listGroup = clientDropdown.querySelector('.list-group');
                listGroup.innerHTML = '';

                if (clients.length === 0) {
                    listGroup.innerHTML = '<div class="list-group-item text-muted">No clients found</div>';
                } else {
                    clients.forEach(client => {
                        const item = document.createElement('div');
                        item.className = 'list-group-item';
                        const blockLot = [
                            client.block_number ? 'Blk ' + client.block_number : null,
                            client.lot_number ? 'Lot ' + client.lot_number : null,
                        ].filter(Boolean).join(' ');
                        item.innerHTML = `
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>${client.name}</strong>
                                    <br>
                                    <small class="text-muted">
                                        Account: ${client.account_number}
                                        ${client.meter_number ? ' | Meter: ' + client.meter_number : ''}
                                    </small>
                                </div>
                                ${blockLot ? '<span class="badge bg-info">' + blockLot + '</span>' : ''}
                            </div>
                        `;
                        item.addEventListener('click', () => selectClient(client));
                        listGroup.appendChild(item);
                    });
                }

                clientDropdown.style.display = 'block';
            } catch (error) {
                console.error('Search error:', error);
            }
        }, 300);
    }

    clientSearch.addEventListener('input', triggerClientSearch);
    if (searchBlock) searchBlock.addEventListener('input', triggerClientSearch);
    if (searchLot) searchLot.addEventListener('input', triggerClientSearch);

    // Close dropdown when clicking outside the search inputs
    document.addEventListener('click', function(e) {
        if (e.target !== clientSearch && e.target !== clientDropdown
            && e.target !== searchBlock && e.target !== searchLot) {
            clientDropdown.style.display = 'none';
        }
    });

    // Select client
    async function selectClient(client) {
        clientSearch.value = client.name;
        clientId.value = client.id;
        clientDropdown.style.display = 'none';

        // Fetch meter info
        try {
            const response = await fetch(`/api/client-meter-info/${client.id}`);
            const info = await response.json();

            // Update client info display
            document.getElementById('selected_client_name').textContent = info.name;
            document.getElementById('selected_account_number').textContent = info.account_number;
            document.getElementById('selected_meter_number').textContent = info.meter_number || 'Not set';

            // Store readings for calculation
            lastReadingValue = info.last_reading_value ? parseFloat(info.last_reading_value) : null;
            meterStartReading = info.meter_start_reading ? parseFloat(info.meter_start_reading) : 0;

            // Check if there's a pending reading
            const pendingWarning = document.getElementById('pending_warning');
            if (info.has_pending_reading) {
                pendingWarning.style.display = 'block';
                readingForm.style.display = 'none'; // Hide form if pending reading exists
            } else {
                pendingWarning.style.display = 'none';
                readingForm.style.display = 'block';
            }

            // Display baseline reading (last approved or meter start)
            const readingLabel = document.getElementById('reading_label');
            const lastReadingDateElem = document.getElementById('last_reading_date');
            const lastReadingValueElem = document.getElementById('last_reading_value');

            if (lastReadingValue !== null) {
                readingLabel.textContent = 'Last Approved Reading:';
                lastReadingDateElem.textContent = info.last_reading_date || '—';
                lastReadingValueElem.textContent = lastReadingValue;
            } else {
                readingLabel.textContent = 'Meter Start Reading (Baseline):';
                lastReadingDateElem.textContent = 'Initial reading';
                lastReadingValueElem.textContent = meterStartReading;
            }

            // Clear the units consumed field
            unitsConsumed.value = '';
            readingValue.value = '';

            // Always allow manual meter number entry
            if (info.meter_number_required) {
                meterRequired.style.display = 'inline';
                meterNumber.placeholder = 'Enter meter number (required for first reading)';
                meterInfo.textContent = 'The meter number is required for the first reading.';
                meterNumber.disabled = false;
                meterNumber.value = '';
            } else {
                // Meter number already exists, disable field and populate it
                meterRequired.style.display = 'none';
                meterNumber.placeholder = 'Meter number is locked';
                meterInfo.innerHTML = '<i class="fas fa-lock me-1"></i>Meter number is already set and locked.';
                meterNumber.disabled = true;
                meterNumber.value = info.meter_number || '';
            }

            clientInfo.style.display = 'block';
        } catch (error) {
            console.error('Error fetching meter info:', error);
        }
    }

    // Restore state if client was previously selected
    window.addEventListener('DOMContentLoaded', function() {
        @if(old('client_id'))
            const clientIdValue = '{{ old('client_id') }}';
            if (clientIdValue) {
                // Trigger client info fetch
                fetch(`/api/client-meter-info/${clientIdValue}`)
                    .then(r => r.json())
                    .then(info => {
                        clientSearch.value = info.name;
                        document.getElementById('selected_client_name').textContent = info.name;
                        document.getElementById('selected_account_number').textContent = info.account_number;
                        document.getElementById('selected_meter_number').textContent = info.meter_number || 'Not set';

                        // Store readings for calculation
                        lastReadingValue = info.last_reading_value ? parseFloat(info.last_reading_value) : null;
                        meterStartReading = info.meter_start_reading ? parseFloat(info.meter_start_reading) : 0;

                        // Check if there's a pending reading
                        const pendingWarning = document.getElementById('pending_warning');
                        if (info.has_pending_reading) {
                            pendingWarning.style.display = 'block';
                            readingForm.style.display = 'none';
                        } else {
                            pendingWarning.style.display = 'none';
                            readingForm.style.display = 'block';
                        }

                        // Display baseline reading (last approved or meter start)
                        const readingLabel = document.getElementById('reading_label');
                        const lastReadingDateElem = document.getElementById('last_reading_date');
                        const lastReadingValueElem = document.getElementById('last_reading_value');

                        if (lastReadingValue !== null) {
                            readingLabel.textContent = 'Last Approved Reading:';
                            lastReadingDateElem.textContent = info.last_reading_date || '—';
                            lastReadingValueElem.textContent = lastReadingValue;
                        } else {
                            readingLabel.textContent = 'Meter Start Reading (Baseline):';
                            lastReadingDateElem.textContent = 'Initial reading';
                            lastReadingValueElem.textContent = meterStartReading;
                        }

                        if (info.meter_number_required) {
                            meterRequired.style.display = 'inline';
                            meterNumber.placeholder = 'Enter meter number (required for first reading)';
                            meterInfo.textContent = 'The meter number is required for the first reading.';
                            meterNumber.disabled = false;
                            meterNumber.value = '';
                        } else {
                            // Meter number already exists, disable field and populate it
                            meterRequired.style.display = 'none';
                            meterNumber.placeholder = 'Meter number is locked';
                            meterInfo.innerHTML = '<i class="fas fa-lock me-1"></i>Meter number is already set and locked.';
                            meterNumber.disabled = true;
                            meterNumber.value = info.meter_number || '';
                        }

                        clientInfo.style.display = 'block';
                    });
            }
        @endif
    });
</script>
@endsection