@csrf

<div class="row g-4">

    <div class="col-md-6">
        <label class="form-label">Cliente (opcional)</label>
        <select name="client_id" class="form-select @error('client_id') is-invalid @enderror">
            <option value="">Tarifa general (todos los clientes)</option>
            @foreach ($clients as $c)
                <option value="{{ $c->id }}" {{ old('client_id', $tariff->client_id ?? '') == $c->id ? 'selected' : '' }}>
                    {{ $c->business_name ?: $c->contact_name }} ({{ $c->rut }})
                </option>
            @endforeach
        </select>
        <div class="form-text">Si no seleccionas cliente, esta tarifa aplica como base general para la línea de servicio.</div>
        @error('client_id')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Servicio (opcional)</label>
        <select name="service_id" id="service-select" class="form-select @error('service_id') is-invalid @enderror">
            <option value="">Tarifa por línea genérica (sin servicio específico)</option>
            @foreach ($services as $s)
                <option value="{{ $s->id }}" data-line="{{ $s->service_line }}"
                    {{ old('service_id', $tariff->service_id ?? '') == $s->id ? 'selected' : '' }}>
                    {{ $s->name }} ({{ $s->serviceLineLabel() }})
                </option>
            @endforeach
        </select>
        <div class="form-text">Si eliges un servicio, la línea se completa sola y esta tarifa aplica solo a ese servicio.</div>
        @error('service_id')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Línea de servicio</label>
        <select name="service_line" id="service-line-select" class="form-select @error('service_line') is-invalid @enderror" required>
            @foreach (\App\Models\Order::SERVICE_LINES as $value => $label)
                <option value="{{ $value }}" {{ old('service_line', $tariff->service_line ?? '') === $value ? 'selected' : '' }}>
                    {{ $label }}
                </option>
            @endforeach
        </select>
        <div class="form-text" id="service-line-hint" style="display: none;">
            Línea determinada automáticamente por el servicio seleccionado.
        </div>
        @error('service_line')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Precio por kg</label>
        <div class="input-group">
            <span class="input-group-text">$</span>
            <input type="number" step="0.01" name="price_per_kg" class="form-control @error('price_per_kg') is-invalid @enderror"
                   value="{{ old('price_per_kg', $tariff->price_per_kg ?? '') }}" placeholder="0.00" required>
        </div>
        @error('price_per_kg')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Vigente desde</label>
        <input type="date" name="valid_from" class="form-control @error('valid_from') is-invalid @enderror"
               value="{{ old('valid_from', optional($tariff->valid_from ?? null)->format('Y-m-d')) }}" required>
        @error('valid_from')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

    <div class="col-md-6">
        <label class="form-label">Vigente hasta</label>
        <input type="date" name="valid_to" class="form-control @error('valid_to') is-invalid @enderror"
               value="{{ old('valid_to', optional($tariff->valid_to ?? null)->format('Y-m-d')) }}">
        <div class="form-text">Vacío = sin fecha de término (vigente indefinidamente).</div>
        @error('valid_to')
            <span class="invalid-feedback d-block">{{ $message }}</span>
        @enderror
    </div>

</div>

<div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
    <a href="{{ route('tariffs.index') }}" class="btn btn-outline-secondary">Cancelar</a>
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i> Guardar tarifa
    </button>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const serviceSelect = document.getElementById('service-select');
    const lineSelect = document.getElementById('service-line-select');
    const lineHint = document.getElementById('service-line-hint');

    function syncLineFromService() {
        const opt = serviceSelect.options[serviceSelect.selectedIndex];
        const line = opt ? opt.dataset.line : '';

        if (line) {
            lineSelect.value = line;
            lineSelect.setAttribute('disabled', 'disabled');
            let hidden = document.getElementById('service-line-hidden');
            if (!hidden) {
                hidden = document.createElement('input');
                hidden.type = 'hidden';
                hidden.name = 'service_line';
                hidden.id = 'service-line-hidden';
                lineSelect.parentNode.appendChild(hidden);
            }
            hidden.value = line;
            lineSelect.removeAttribute('name');
            lineHint.style.display = 'block';
        } else {
            lineSelect.removeAttribute('disabled');
            lineSelect.setAttribute('name', 'service_line');
            const hidden = document.getElementById('service-line-hidden');
            if (hidden) hidden.remove();
            lineHint.style.display = 'none';
        }
    }

    serviceSelect.addEventListener('change', syncLineFromService);

    if (serviceSelect.value) {
        syncLineFromService();
    }
});
</script>